HTML Table Header using rowspan
Question
<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% |
\------------------------------/
3 answers
solution1
11 ACCPTED 2012-04-20 11:03:51
Remove the extra TH in your code
<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>
solution2
7 2012-04-20 11:22:03
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;
}
solution3
0 2012-04-20 11:04:58
Change First Row
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
It will solve the problem
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.