使用rowspan的HTML表头
[英]HTML Table Header using rowspan
问题描述
<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>
我得到的输出头的第一个元素为空白
A test table with merged cells
/-----------------------------------------\
| | Average | Red |
| |-------------------| eyes |
| | height | weight | |
|-----------------------------------------|
| 1.9 | 0.003 | 40% | |
|-----------------------------------------|
| 1.7 | 0.002 | 43% | |
\-----------------------------------------/
预期产出
A test table with merged cells
/----------------------------- \
| Average | Red |
|-------------------| eyes |
| height | weight | |
|------------------------------|
| 1.9 | 0.003 | 40% |
|------------------------------|
| 1.7 | 0.002 | 43% |
\------------------------------/
3 个解决方案
解决方案1
11 已采纳 2012-04-20 11:03:51
删除代码中的额外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>
解决方案2
7 2012-04-20 11:22:03
虽然nauphal已经解决了你的问题，但我只是想对你的HTML结构提出一些建议。
首先，大写不是强制性的（HTML不区分大小写），但是你应该切换到XHTML小写是必须的（坦率地说，看起来也好一点）。
第二，因为tbody元素总是被浏览器插入（我不确定所有客户端，但肯定是可视化Web客户端）如果还没有一个存在，通常最好包装那些代表'body的元素“在表中tbody自己，这样你可以指定th元素行到thead ，这增加了语义一点（我不知道这是多么有用的，但每一点帮助）。
第三，记得关闭你的标签：
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
真的应该是：
<TR>
<TD>1.9</TD><TD>0.003</TD><TD>40%</TD>
</TR>
同样，它不是强制性的（在HTML 4中，我相信），但它通过在标记周围添加额外的，未关闭的开始标记来减少引入错误的范围。
第四，这可能只是挑选，可能，如果你想要将整个caption样式设置为强调文本，则更容易避免插入额外的标记并直接设置caption样式。
也就是说，这是我的表格版本和一些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小提琴 。
解决方案3
0 2012-04-20 11:04:58
改变第一行
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
它将解决问题
使用 rowspan 和 colspan 的 HTML 表格
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.