I'm trying to write a table so that it doesn't expand to the full width of the page. Below is what I have so far, but even though the first columns seem to respect the "width" parameter, the last column expands to the end of the page.
All results I found use CSS, but I am not sure how to do that. I don't know if it's relevant, but I'm writing a Joomla! article.
<table class="zebra" width="300">
<thead>
<tr>
<th style="text-align: left;" width="100">title 1</th>
<th style="text-align: center;" width="100">title 2</th>
<th style="text-align: center;" width="100">title 3</th></tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;" width="100">content 1</td>
<td style="text-align: center;" width="100">content 2</td>
<td style="text-align: center;" width="100">content 3</td>
</tr>
</tbody>
</table>
<table class="zebra" style="max-width:300px;">
Related
I have table:
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="width: 50%;text-align: left;">1000</span> / <span style="width: 50%;text-align: right;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="width: 50%;text-align: left;">250.50</span> / <span style="width: 50%;text-align: right;">Day</span></td>
</tr>
</tbody>
</table>
Need that 1000 and 250.50 were under the word Price, Hour and Day were under the word Einheit. I tried do it using width property and text-align but it doesnt work.
Need this result, for example:
https://clip2net.com/s/3ZXsphT
Thanks
By Default span tag is inline element, it doesn't take width. You need to change span tag to block label element using display or float. check updated snippet below...
td span {
display: inline-block;
width: 47%;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="text-align: right;">1000</span> / <span style="text-align: left;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="text-align: right;">250.50</span> / <span style="text-align: left;">Day</span></td>
</tr>
</tbody>
Add this CSS
table tr td:nth-child(even){
text-align:center;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span>Price</span> / <span>Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span>1000</span> / <span>Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span>250.50</span> / <span>Day</span></td>
</tr>
</tbody>
</table>
Actually, you don't need any single span as none was executed.
price / Einheit was centered only as this is the default of th tag
So, in order to align the cell beneath it, you can just code td style=" text-align:center"
and if you want to align all cells to the center
table style="text-align:center"
A table on my site has been flagged by an accessibility plugin (aXe). After some tinkering, it ended up saying that I had to fix the following two things:
<th> elements should only be used when there is a single row and
single column of headers
Table has cells whose rowspan attribute is not equal to 1
How can I reasonably build a table with nested levels of information without violating at least one of those?
My table code is:
<table>
<tbody>
<tr>
<th scope="col" rowspan="2">Type Of</th>
<th scope="col" colspan="2">Blue</th>
<th scope="col" colspan="2">Green</th>
</tr>
<tr>
<td scope="col" class="centered">Light Blue</td>
<td scope="col" class="centered">Dark Blue</td>
<td scope="col" class="centered">Light Green</td>
<td scope="col" class="centered">Dark Green</td>
</tr>
<tr>
<th scope="row">Type 1</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
<tr>
<th scope="row">Type 2</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
<tr>
<th scope="row">Type 3</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
</tbody>
</table>
Accessibility tools are free to invent their own rules, but this tool is wrong saying you should remove table headers th when you use rowspan or colspan. It's totally wrong. Check that you have the last version of this tool : this is an awful advice.
In your case, you can use the following technique to mark column headers:
H43: Using id and headers attributes to associate data cells with header cells in data tables
Your have one problem in your example:
Your headers in your second line are not marked as column headers (th) (and headers attribute should only reference th with id).
You markup should be something like:
<table>
<thead>
<tr>
<th rowspan="2" id="typeof">Type Of</th>
<th colspan="2" id="blue">Blue</th>
<th colspan="2" id="green">Green</th>
</tr>
<tr>
<th id="lightblue">Light</th>
<th id="darkblue">Dark</th>
<th id="lightgreen">Light</th>
<th id="darkgreen">Dark</th>
</tr>
</thead>
<tbody>
<tr>
<th id="type1" headers="typeof">Type 1</th>
<td headers="type1 lightblue" title="Yes">Y</td>
<td headers="type1 darkblue" title="Yes">Y</td>
<td headers="type1 lightgreen" title="Yes">Y</td>
<td headers="type1 darkgreen" title="No">N</td>
</tr>
<tr>
<th id="type2" headers="typeof">Type 2</th>
<td headers="type2 lightblue" title="Yes">Y</td>
<td headers="type2 darkblue" title="Yes">Y</td>
<td headers="type2 lightgreen" title="Yes">Y</td>
<td headers="type2 darkgreen" title="No">N</td>
</tr>
<tr>
<th id="type3" headers="typeof">Type 3</th>
<td headers="type3 lightblue" title="Yes">Y</td>
<td headers="type3 darkblue" title="Yes">Y</td>
<td headers="type3 lightgreen" title="Yes">Y</td>
<td headers="type3 darkgreen" title="No">N</td>
</tr>
</tbody>
</table>
Also, I added a title attribute in order to add a speakable alternative for screen readers (you could have used aria-label but title adds a tooltip for other people, except it is not keyboard friendly). Better choice would be to have here a full word.
I'm not sure what tool you are using, but have you tried using col and colgroup elements? There is some basic information here from W3C about irregular headers in data tables.
Also, I put together a quick JSFiddle based on your table if you want to look at that: https://jsfiddle.net/dngvc84o/
As you can see from my two tables, one is a different size to the other.
My first question being, why is this? when I have set the width of the <th> in the top table to 100/300/100/100/100 (=700), and in the bottom table 500/100/100 (=700)
I would like to set the first column in the lower table to invisible, as I only want to see the summary and totals of the bottom table. Also I would like the aligned with the right hand side of the upper table. Any ideas or advice would be appreciated. Is it something to do with setting the border in the style?
If I try border-left for example I am allowed to add border-width, border-style, border-colour, inherit?
(Table 2)
<table class="detailstable StartOnNewPage" align="center">
<tr>
<th style="width:500px;"></th>
<th style="text-align:left; width:100px;">Summary</th>
<th style="text-align:right; width:100px;"></th>
</tr>
<tr>
<td style="width:500px;"></td>
<td style="text-align:left; width:100px;">Labour</td>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(LabourTotal)%></th>
</tr>
<tr>
<td style="width:500px;"></td>
<td style="text-align:left; width:100px; border-top:yes;">Plant</td>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(PlantTotal)%></th>
</tr>
<tr>
<td style="width:500px;"></td>
<th style="text-align:right; width:100px;"><%: this.DisplayPlantPercentage%></th>
<td style="text-align:right; width:100px;"><%: this.PlantToDisplayWithTwoDecimalPlaces%></td>
</tr>
<tr>
<td style="width:500px;"></td>
<td style="text-align:left; width:100px;">Miscellaneous</td>
<th style="text-align:right; width:100px" class="FadeOutOnEdit"><%: this.FormatMoney(MiscellaneousItemsTotal) %></th>
</tr>
<tr>
<td style="width:500px;"></td>
<th style="text-align:right; width:100px;"><%: this.DisplayMiscellaneousPercentage%></th>
<td style="text-align:right; width:100px;"><%: this.MiscellaneousToDisplayWithTwoDecimalPlaces%></td>
</tr>
<tr>
<td style="width:500px;"></td>
<th style="text-align:left; width:100px;">TOTAL</th>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(TotalOfAll)%></th>
</tr>
</table>
Now Looks like:
For lower table remove the first column and use table attribute align as shown below
<table class="detailstable StartOnNewPage" align="right">
<tr>
<th style="text-align:left; width:100px;">Summary</th>
<th style="text-align:right; width:100px;"></th>
</tr>
<tr>
<td style="text-align:left; width:100px;">Labour</td>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(LabourTotal)%></th>
</tr>
....
I am trying to shrink one cell in the table, but it refuses to shring..here is my table.
<table cellspacing="0" style="position: absolute;width: 990px;margin-left: 8px;" align="center">
<thead>
<tr class='no-wrap'>
<th width="20%"></th>
<th width="10%">Our Rating</th>
<th width="10%">Users' Rating</th>
<th width="30%">Review</th>
<th width="30%">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%"></td>
<td width="10%">Our Rating</td>
<td width="10%">Users' Rating</td>
<td width="30%">Review</th>
<td width="30%">Price</td>
</tr>
</tbody>
</table>
The problem is that the review part doesnt shrink..even when I give it a lower percentage..why is that?
You have incorrect HTML syntax.
You need to wrap your table row elements in tr:
<tbody>
<tr>
<td></td>...
</tr>
</tbody>
Also you have a </th> where you should have a <td> on your 2nd row, 4th cell (Review):
<td width="30%">Review</th>
So far, I'm doing this programmatically using VB.net/ASP.net:
<table cellspacing="0" cellpadding="4" border="0" style="border-
width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
<td colspan="6"></td>
<td align="center" colspan="3" style="background-color:#F0D3D3;text-
decoration:underline;">SET</td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td align="center" colspan="3" style="background-color:#BEE0F7;text-
decoration:underline;">REM</td>
</tr>
<tr>
<th style="width:70px;">M</th>
<th style="width:70px;">PG</th>
<th style="width:70px;">PV</th>
<th style="width:70px;">PDD</th>
<th style="width:40px;">R</th>
<th style="width:55px;">I #</th>
<th style="background-color:#F0D3D3;width:70px;">P A</th>
<th style="background-color:#F0D3D3;width:70px;">U D</th>
<th style="background-color:#F0D3D3;width:70px;">B P</th>
<th style="background-color:#CFF5CE;width:70px;">P U</th>
<th style="background-color:#CFF5CE;width:70px;">D E</th>
<th style="background-color:#BEE0F7;width:70px;">P</th>
<th style="background-color:#BEE0F7;width:70px;">U D</th>
<th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
</table>
<div style="width:100%;clear:both;text-align:left;margin:0;">
<div style="width:375px;float:left;margin:0;display:block;">
<img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
<span style="font-weight:bold;font-size:16px;">Test Company</span>
</div>
<div style="background-
color:#F0D3D3;width:210px;float:left;margin:0;display:block;"></div>
<div style="background-
color:#CFF5CE;width:140px;float:left;margin:0;display:block;"></div>
<div style="background-
color:#BEE0F7;width:210px;float:right;padding:0;margin:0;display:block;"></div>
</div>
This should give me four DIVS inside a container DIV. Here's what it's coming out as:
The correct blocks above the non-inline blocks are from a table with the same exact widths as the ones I'm using on the Divs. There isn't any CSS adding pixels to them, I don't think. I need to line these up, and I can't figure out where my problem is here.
You can use instead of divs the colspan="[number]", for example:
<table cellspacing="0" cellpadding="4" border="0" style="border-width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
<td colspan="6"></td>
<td align="center" colspan="3" style="background-color:#F0D3D3;text-decoration:underline;">SET</td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td align="center" colspan="3" style="background-color:#BEE0F7;text-decoration:underline;">REM</td>
</tr>
<tr>
<th style="width:70px;">M</th>
<th style="width:70px;">PG</th>
<th style="width:70px;">PV</th>
<th style="width:70px;">PDD</th>
<th style="width:40px;">R</th>
<th style="width:55px;">I #</th>
<th style="background-color:#F0D3D3;width:70px;">P A</th>
<th style="background-color:#F0D3D3;width:70px;">U D</th>
<th style="background-color:#F0D3D3;width:70px;">B P</th>
<th style="background-color:#CFF5CE;width:70px;">P U</th>
<th style="background-color:#CFF5CE;width:70px;">D E</th>
<th style="background-color:#BEE0F7;width:70px;">P</th>
<th style="background-color:#BEE0F7;width:70px;">U D</th>
<th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
<tr>
<td colspan="6">
<img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
<span style="font-weight:bold;font-size:16px;">Test Company</span>
</td>
<td colspan="3" style="background-color:#F0D3D3;"></td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td colspan="3" style="background-color:#BEE0F7;"></td>
</tr>
</table>
Hoped i helped you.. =)
Width: 100% on the table overrides individual column widths. In your table, there are 13 <th>, and each will have a width of 1/13:th of the table's width. A width property on a <th> doesn't do anything. You could force it by adding display: inline-block to the <th>, but I wouldn't want to go that way.
Also, you should set the pink and green divs to float: right in order to remove the white inbetween green and blue (note however that you'll have to change the order of the divs in your code).
Also, I'd suggest using a table instead if you're aiming to present tabular data.
Did you put cellspacing="0" cellpadding="0" on the table? If not, that might be where the difference is coming from.
Or maybe border.
Can you include the table header?