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 では大文字と小文字が区別されません)。

第二に、tbody要素は常にブラウザーによって挿入されるため (すべてのクライアントについてはわかりませんが、確かに視覚的な Web クライアント)、まだ存在しない場合は、通常、「本体」を表す要素をラップするのが最善です。そうすれば、要素行を aにtbody割り当てることができます。これにより、セマンティクスが少し増加します (それがどれほど役立つかはわかりませんが、少しでも役立ちます)。ththead

第三に、タグを閉じることを忘れないでください:

<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 の場合だと思います) が、マークアップの周りに追加の閉じられていない開始タグを配置することで、エラーが発生する可能性を減らします。

第 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 に答える