26

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

次の図のようなレイアウトでHTMLのテーブルをセマンティックにコーディングしたいと思います。残念ながら、私はここのネットワーク上でそれのようなものを見つけることができませんでした。

ここに画像の説明を入力してください

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

ここに画像の説明を入力してください

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

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

2 に答える 2

20

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

rowspan編集：画像を見ると、 （そしてcolspanすでに使用している方法で）それを確実に達成できると思います。

scopeまた、 「col」の場合は属性を設定する必要はありません。デフォルトは「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>
于 2012-10-09T01:17:12.537 に答える
1

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

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

<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>
于 2012-10-09T09:34:14.117 に答える