複雑な、またはネストされた HTML テーブルのセマンティック マークアップ?
https://stackoverflow.com/questions/1794354
-
22-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
データ行に 1 つの表の行に収まらない複雑なデータが含まれている場合に、Web ページ上の表形式のデータをマークアップする最適な方法を知りたいです。
具体的な例を示します。最初の行には、腕と脚に関する追加情報のリストが追加されています。
Shadrach M Banana 12 Arms Blue 2 Legs Yellow 3 Meshgah M Apple 34 Abednego M Persimmon 0
このようなネストされたテーブルを含むスパンドセルを使用する以外に、これをマークアップする良い方法はありますか?
+-------+--+--------+-----+ | | | | | +-------+--+--------+-----+ | +-------+------+-+ | | | | | | | | +-------+------+-+ | | | | | | | | +-------+------+-+ | +-------+--+--------+-----+ | | | | | +-------+--+--------+-----+ | | | | | +-------+--+--------+-----+
外側のテーブルには特定の見出しと意味を持つ 4 つの列があるため、これに完全に満足しているわけではありません。しかし、2 行目は 4 列すべてにまたがっており、別のものが含まれています。この情報は、トップレベルのテーブルの一部ではなく、最初の行項目 (Shadrach) の一部にしたいと考えています。しかし、HTML ではこれを行うことができないようです。
もっと良い、よりセマンティックな方法はあるでしょうか?
解決
時には、しかし、あなたはHTMLだけで処理できない場合に遭遇します。これは、彼らの一つのようです。 HTMLは、テーブルの他の列と一致しない列を持つテーブル内の階層データをネストのいずれかの方法がありません。だから、あなたはあなたが持っているものでベストを尽くす必要があります。この時点で、それはより多くの意味的なことについて心配するあなたのすべての多くのことを購入していません。あなたは他のスタイルシート、スクリーンリーダー、およびツールは、おそらくので、かなりあなたはそれを思い付くすべてのソリューション要素の目的に完全に反していない、と何をすべきかわからないことが、何かかなり特殊なケースをやっています質問でOKです。
私はあなたが言及ソリューションは、あなたができる最善程度だと思います。彼らは他の行のようではないことを示しているクラスとネストされたテーブルを含むそれらの行をマークし、良いそれを呼び出します。あなたが望むならば、あなたは彼らが複数の<tbody>要素を使用して接続されている行と一緒にグループ化できます。
<table>
<tbody>
<tr><td>Shadrach <td>M <td>Banana <td>12
<tr class=nested><td colspan=4>
<table>...</table>
<tbody>
<tr><td>Meshgah <td>M <td>Apple <td>34
<tbody>
<tr><td>Abednego <td>M <td>Persimmon <td>0
</table>
他のヒント
テーブルを詳細行の最初の列に配置し、4 つの列すべてにまたがるようにし、説明的なテーブル ヘッダーをテーブルに追加すると、詳細テーブルを説明する列に関連付ける基本的なセマンティクスが提供されます。
ただし、これは従来の HTML セマンティクスでは探しているものを伝えることができないケースだと思います。そのため、XHTML を利用してそれを拡張することを検討する必要があります。 ARIA 属性 によってレイアウトされた W3C WAI 既存の XHTML セマンティクスを拡張して、作成しようとしているような複雑な構造を記述します。おそらく、を追加した場合、 アリアの説明 詳細テーブルで説明されているセルに属性を追加します。これにより、探している追加のセマンティクスが提供されます。
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td id="master" aria-describedby="detail">Shadrach</td>
<td>M</td>
<td>Banana</td>
<td>12</td>
</tr>
<tr>
<td colspan="4">
<table id="detail">
<tbody>
<tr>
<td>arms</td>
<td>blue</td>
<td>2</td>
</tr>
<tr>
<td>legs</td>
<td>yellow</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody
</table>
役に立つと思われる aria-role と属性が多数あります。例えば、 ツリーグリッド 階層レイアウトと展開行を備えたテーブルの役割。ARIA 作業草案に目を通せば、あなたが伝えようとしている内容を説明できるものがきっと見つかるはずです。
は、より良い、より多くの意味的な方法はありますか？
1 いいえ、私はあなたがおそらくセマンティックHTMLとCSSと同じ視覚効果を得ることができるのか分かりません。しかし、それはポイントではありません。あなたは、セマンティックマークアップを探している - ではない、それはあなたが何を考えて収まるようにする方法UXのが適切である（ヒントは：あなたはレイアウトのためにテーブルを使用している場合（あなたがそうであるように）、それは視覚的なユーザーのためだけUXの適切なのです）。
はこれを行うには、単一の方法はありません。あなたは、行の内側にツリー状の構造を持っているように見えるし、いくつかのネストされたDIVは有用である可能性があります。だから、それが持つ仕事に複雑になりますが、行のセルのDIVの子を持つことも可能です。別の方法としては、ネストした表（内容としてテーブルまたはセル）を作成しようとすることができます。
あなたは、複雑なセマンティクスを保持したい場合は、