Suppose the following basic table structure:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Is it possible to make it so that the first two data cells and the last two data cells are always 50% of the total width? If one cell gets bigger the other will shrink as much as it can but their total width will be 50% of the whole table. Ex:
|1 |2 |3 |4 |
can adjust to
|1 |2 |3 |4 |
where the start position of 1 and 3 never changes, the end position of 2 and 4 never changes.
EDIT: Ideally without nesting in a second table to house the pair of <td> elements.
A bit hacky - but you may try:
.fifty {
width: 50%
}
<table>
<tr>
<td class="fifty" colspan="2">foo</td>
<td class="fifty" colspan="2">bar</td>
</tr>
<tr>
<td>foo bar</td>
<td>foo foo bar</td>
<td>foo foo</td>
<td>foo bar</td>
</tr>
</table>
Related
In this Html table , how could I insert the cells "XPath" and "XSL transformations" as each of them covers 1.5 row (the 2 cells cover equally 3 rows).
How should I use the "rowspan" attribute ?
<td rowspan = "number">table content...</td>
Another example
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ajay</td>
<!-- This cell will take up space on two rows -->
<td rowspan="2">24</td>
</tr>
<tr>
<td>Priya</td>
</tr>
</table>
I want to make table header and table data. But facing problem with width on that two tables different.
Here is the example table :
<table>
<tr>
<td>Name</td>
<td>Class</td>
<td>Phone</td>
</tr>
</table>
and the data here :
<table>
<tr>
<td>John Reise</td>
<td>Math</td>
<td>123456789</td>
<tr>
<td>Michael Sweirzgez</td>
<td>Information Technology</td>
<td>012345678910</td>
<tr>
So when I try to run the code, it will like this :
Name | Class | Phone
John Reise | Math | 123456789
If I delete the data, width will fit with table header.
I make 2 table, 1 table header and 1 table data cause I want to marquee this data. So table header will keep stay in the top.
Maybe you better use thead and tbody tags?
<table>
<thead>
<tr>
<td>Name</td>
<td>Class</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td>John Reise</td>
<td>Math</td>
<td>123456789</td>
</tr>
<tr>
<td>Michael Sweirzgez</td>
<td>Information Technology</td>
<td>012345678910</td>
</tr>
</tbody>
</table>
You can read more about it here http://www.w3schools.com/tags/tag_thead.asp
You can use thead and tbody. Here are the simple examples:
http://www.w3schools.com/tags/tag_thead.asp
http://www.idocs.com/tags/tables/_THEAD.html
I have a two-row table like this:
---------------------------
| 1 Item | Total: $370.00 |
---------------------------
| View Cart Check-out |
---------------------------
I want it to display inline, like this:
| 1 Item | Total: $370.00 | View Cart Check-out |
Is this possible with CSS?
Note: Unfortunately this code is produced by my CMS and it would be difficult to change it to use divs and then CSS float:left or display:inline-block.
Simplified HTML:
<table class="cart-block-summary">
<tbody>
<tr>
<td class="cart-block-summary-items">1 Item</td>
<td class="cart-block-summary-total">Total: $370.00</td>
</tr>
<tr class="cart-block-summary-links">
<td colspan="2">View cart Checkout</td>
</tr>
</tbody>
</table>
Worked for me:
table { width: 600px;}
tr{float:left}
http://jsfiddle.net/N5fhU/
You could also remove the last TR that way it will look all in one line
<table class="cart-block-summary">
<tbody>
<tr>
<td class="cart-block-summary-items">1 Item</td>
<td class="cart-block-summary-total">Total: $370.00</td>
<td class="cart-block-summary-links" colspan="2">View cart Checkout</td>
</tr>
</tbody>
</table>
<html>
<body>
<TABLE border="1" ">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2"> Average
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
<TH>height</TH><TH>weight</TH>
</TR>
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR>
<TD>1.7<TD>0.002<TD>43%</TD>
</TR>
</TABLE>
</body>
</html>
I'm getting the output with first element of header as blank
A test table with merged cells
/-----------------------------------------\
| | Average | Red |
| |-------------------| eyes |
| | height | weight | |
|-----------------------------------------|
| 1.9 | 0.003 | 40% | |
|-----------------------------------------|
| 1.7 | 0.002 | 43% | |
\-----------------------------------------/
Expected output
A test table with merged cells
/----------------------------- \
| Average | Red |
|-------------------| eyes |
| height | weight | |
|------------------------------|
| 1.9 | 0.003 | 40% |
|------------------------------|
| 1.7 | 0.002 | 43% |
\------------------------------/
Remove the extra TH in your code
http://jsfiddle.net/yqQsP/
<html>
<body>
<TABLE border="1" >
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
<TH>height</TH><TH>weight</TH>
</TR>
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR>
<TD>1.7<TD>0.002<TD>43%</TD>
</TR>
</TABLE>
</body>
</html>
While nauphal has already addressed your problem, I just wanted to make some suggestions regarding your HTML structure.
First, upper-case isn't mandatory (HTML's case-insensitive), though should you ever switch to XHTML lower-case is mandatory (and, frankly, looks a little nicer too).
Second, because a tbody element is always inserted by the browser (I'm not sure about all clients, but certainly visual web-clients) if there isn't one present already, it's usually best to wrap those elements that represent the 'body' of the table in a tbody yourself, that way you can assign the th element-rows to a thead, which increases semantics a little (I'm not sure how useful that is, but every little helps).
Third, remember to close your tags:
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
Should, really, be:
<TR>
<TD>1.9</TD><TD>0.003</TD><TD>40%</TD>
</TR>
Again, it's not mandatory (in HTML 4, I believe), but it reduces the scope for errors introduced by having extra, un-closed, start-tags around your mark-up.
Fourth, and this is just nit-picking, possibly, if you're wanting to style the whole of the caption as emphasized text it's easier to avoid inserting extra mark-up and just style the caption directly.
That said, here's my version of your table and some CSS:
<table>
<caption>A test table with merged cells</caption>
<theader>
<tr>
<th colspan="2">Average</th>
<th rowspan="2">Red Eyes</th>
</tr>
<tr>
<th>height</th>
<th>weight</th>
</tr>
</theader>
<tbody>
<tr>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</tbody>
</table>
CSS:
caption {
font-style: italic;
}
td,
th {
border: 1px solid #000;
padding: 0.2em;
}
JS Fiddle.
Change First Row
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
It will solve the problem
I've got an HTML table of which I cannot depend on how many rows and/or columns it will contain - so using index numbers is not possible. Here is an example of the table:
|Name|Description|Credit|Balance|
|Bob | Rent |400.00|1000.00|
|Jim | Car |100.00|4000.00|
Here is the HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Credit</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>Rent</td>
<td>400.00</td>
<td>1000.00</td>
</tr>
<tr>
<td>Jim</td>
<td>Car</td>
<td>100.00</td>
<td>4000.00</td>
</tr>
</tbody>
</table>
I need to get the credit amount for which ever name I need.
Got it:
//tr[td[.="Jim"]]/td[count(ancestor::table/thead/tr/th[.="Credit"]/preceding-sibling::*)+1]