8 
<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%   |          
\------------------------------/
4

3 回答 3

15

删除代码中多余的 TH

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>
于 2012-04-20T11:03:51.467 回答
8

虽然nauphal已经解决了您的问题，但我只是想就您的 HTML 结构提出一些建议。

首先，大写不是强制性的（HTML 不区分大小写），但如果您切换到 XHTML，小写是强制性的（坦率地说，看起来也更好一些）。

其次，因为一个tbody元素总是由浏览器插入（我不确定所有客户端，但肯定是可视 Web 客户端）如果还没有一个元素，通常最好包装那些代表“主体”的元素a 中的表格tbody，这样您就可以将th元素行分配给 a 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小提琴。

于 2012-04-20T11:22:03.193 回答
1

更改第一行

<TR>
    <TH colspan="2"> Average</TH>
    <TH rowspan="2">Red<BR>eyes </TH>
</TR>

它会解决问题

于 2012-04-20T11:04:58.297 回答