web-dev-qa-db-ja.com

親テーブルのヘッダーと整列（および関連付け）するHTMLネストテーブルを意味的にコーディングする方法

編集：選択した回答には、ネストされたテーブルを使用せずに作成できた作業フィドルへのリンクが含まれています。

下の画像のようなレイアウトでHTMLのテーブルを意味的にコーディングしたいと思います。残念ながら、ネットワーク上でこのようなものを見つけることはできませんでした。

enter image description here

セルの幅を手動で設定することで外観を強制することができましたが、作成しているコードが意味をなすことを確認したいのですが、手動で幅を設定しないと、標準のレンダリングの方が見栄えがよくなるので、そうではありません。次の写真のように。

enter image description here

これまでのところ、私が思いついた問題のあるコードは次のようになります。

<table>
  <thead>
    <tr>
      <th scope="col">Type of Loss Dollar</th>
      <th scope="col">Reserve Amount</th>
      <th scope="col">Paid Amount</th>
      <th scope="col">Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <th scope="row">Medical</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Indemnity</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Expense</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr>
          </tbody>
        </table>
      </td><td>
        TOTAL
      </td>
    </tr>
  </tbody>
</table>
htmlhtml-tablesemantic-markup
24
Evan Driscoll

画像がないと言うのは少し難しいですが、ネストされたテーブルよりも良い解決策は、単にcolspan属性とrowspan属性を使用することだと思います。

編集：rowspan（およびcolspanをすでに使用している方法で）を使用すれば、間違いなくそれを達成できると思います。

また、「col」の場合、scope属性を設定する必要はありません。デフォルトは「col」です。

編集：Marat Tanalinがscope属性のデフォルト値を実際に指摘しているように、実際にはautoであり、「コンテキストに基づいて選択された一連のセルにヘッダーセルが適用されます」。そして、私の経験では、これを「col」に設定するのとまったく同じように機能します（スクリーンリーダーの場合）。

編集：高度なテーブルのマークアップに関する2つの優れた記事を次に示します： http://www.456bereastreet.com/archive/200910/use_the_th_element_to_specify_row_and_column_headers_in_data_tables/ ＆ http ：//www.456bereastreet.com/archive/200410/bring_on_the_tables/

編集： これは、（少なくとも視覚的に）望ましい動作を示すフィドル であり、そのフィドルのソースコードは次のとおりです。

<table border="1">
  <thead>
    <tr>
      <th>Status</th>
      <th>Type of Loss Dollar</th>
      <th>Reserve Amount</th>
      <th>Paid Amount</th>
      <th>Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="3">Open</td>
      <td>Medical</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td rowspan="3">TOTAL</td>
    </tr><tr>
      <td>Indemnity</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr><tr>
      <td>Expense</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>
19
powerbuoy

うん、上記のすべての覗き見が示唆したように、それはすべて行スパンに関するものです。

これがあなたのコードの書き直しです：

<table>
  <thead>
    <tr>
      <th>Type of Loss Dollar</th>
      <th>Reserve Amount</th>
      <th>Paid Amount</th>
      <th>Total This Loss</th>
      <th>Last Heading</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="3"></td>
      <td>Medical</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td rowspan="3">TOTAL</td>
    </tr><tr>
      <td>Indemnity</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr><tr>
      <td>Expense</td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>
1
caitriona