HTML表頭用行跨度

<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>

我越來越有標題爲空白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% |   
\------------------------------/

來源

2012-04-20 m4n07

而你的問題是..？ – 2012-04-20 10:59:44

的第一個元素的輸出在代碼中刪除多餘的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-20 11:03:51 Nauphal

更改第一行

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

它會解決這個問題

來源

2012-04-20 11:04:58

雖然nauphal已經解決你的問題，我只是想對您的HTML結構提出了一些建議。

首先，大寫是不是強制性的（HTML的不區分大小寫），但你應該永遠切換到XHTML小寫是強制性的（，坦率地說，看起來有點太漂亮）。其次，因爲一個tbody元素總是被瀏覽器插入（我不確定所有的客戶端，但肯定是可視化的web客戶端），如果沒有一個已經存在，通常最好包裝那些元素代表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 Fiddle。

來源

2012-04-20 11:22:03

HTML表頭用行跨度

回答

相關問題