使用 rowspan 的 HTML 表格标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10244877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Table Header using rowspan
提问by m4n07
<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% |
\------------------------------/
回答by Nauphal
Remove the extra TH in your code
删除代码中的额外 TH
<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>
回答by David says reinstate Monica
While nauphalhas already addressed your problem, I just wanted to make some suggestions regarding your HTML structure.
虽然nauphal已经解决了您的问题，但我只是想就您的 HTML 结构提出一些建议。
First, upper-case isn't mandatory (HTML's case-insensitive), though should you ever switch to XHTML lower-case ismandatory (and, frankly, looks a little nicer too).
首先，大写不是强制性的（HTML 不区分大小写），尽管您是否应该切换到 XHTML 小写是强制性的（坦率地说，看起来也更好一些）。
Second, because a tbodyelement 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 tbodyyourself, that way you can assign the thelement-rows to a thead, which increases semantics a little (I'm not sure how useful that is, but every little helps).
其次，因为一个tbody元素总是由浏览器插入（我不确定所有客户端，但肯定是视觉网络客户端）如果已经没有一个元素存在，通常最好包装那些代表“主体”的元素表中的 a tbody，这样您就可以将th元素行分配给 a thead，这会稍微增加语义（我不确定这有多大用处，但每一点都有帮助）。
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.
同样，它不是强制性的（在 HTML 4 中，我相信），但它减少了由于在标记周围使用额外的、未关闭的起始标签而引入的错误的范围。
Fourth, and this is just nit-picking, possibly, if you're wanting to style the whole of the captionas emphasized text it's easier to avoid inserting extra mark-up and just style the captiondirectly.
第四，这只是吹毛求疵，如果您想为整个caption强调的文本设置样式，则更容易避免插入额外的标记并直接设置样式caption。
That said, here's my version of your table and some CSS:
也就是说，这是我的表格版本和一些 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:
CSS：
caption {
font-style: italic;
}
td,
th {
border: 1px solid #000;
padding: 0.2em;
}?
回答by Hardik Mishra
Change First Row
更改第一行
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
It will solve the problem
它会解决问题
