10

データ行に単一のテーブル行に収まらない複雑なデータが含まれている場合に、Webページで表形式のデータをマークアップするための最良の方法を知りたいです。

具体的な例を示します。最初の行には、腕と脚に関する追加情報のリストが添付されています。

ShadrachMバナナ12
  アームズブルー2
  レッグスイエロー3
Meshgah M Apple 34
アベドネゴM柿0

このようなネストされたテーブルを含むスパンセルを使用する以外に、これをマークアップする良い方法はありますか？

+ ------- +-+ -------- + ----- +
| | | | |
+ ------- +-+ -------- + ----- +
| + ------- + ------ +-+ |
| | | | | |
| + ------- + ------ +-+ |
| | | | | |
| + ------- + ------ +-+ |
+ ------- +-+ -------- + ----- +
| | | | |
+ ------- +-+ -------- + ----- +
| | | | |
+ ------- +-+ -------- + ----- +

外側のテーブルには特定の見出しと意味を持つ4つの列があるため、これには完全には満足していません。ただし、2番目の行は4つの列すべてにまたがっており、別のものが含まれています。この情報を、トップレベルのテーブルの一部ではなく、最初のラインアイテム（Shadrach）の一部にしたいと考えています。しかし、HTMLではこれができないようです。

より良い、よりセマンティックな方法はありますか？

4

5 に答える 5

8

テーブルを詳細行の最初の列に配置し、4つの列すべてにまたがるようにし、テーブルに説明的なテーブルヘッダーを追加すると、詳細テーブルをそれが説明する列に関連付けるための基本的なセマンティクスが提供されます。

これは、従来のHTMLセマンティクスでは探しているものが伝わらない場合だと思います。XHTMLを利用し、 W3C WAIによってレイアウトされたARIA属性を使用して拡張し、既存のXHTMLセマンティクスを拡張して複雑な記述を行うことを検討する必要があります。作成しようとしているような構造。おそらく、詳細テーブルが説明するセルにaria-describeby属性を追加すると、探している追加のセマンティクスが提供されます。

<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-rolesと属性は多数あります。たとえば、 階層レイアウトと拡張行を持つテーブルのtreegridロールなどです。ARIAワーキングドラフトを見てみると、あなたが伝えようとしていることを説明できる何かが見つかると確信しています。

于 2009-11-25T03:34:30.040 に答える
7

マークアップをよりセマンティックにしようとするときに自問する必要があることの1つは、それをどのような目的で行うかです。セマンティックマークアップは、使用しているマークアップに合わせてカスタマイズしなくても、スタイルを設定したり、さまざまなスタイルシートを適用したりするのが簡単であるため、価値があります。アクセシビリティを支援し、スクリーンリーダーや代替レンダリングエンジンが適切に分析しやすくするため、価値があります。また、検索エンジンやその他の自動化ツールがそこから情報を抽出できるため、価値がある場合もあります。

ただし、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>
于 2009-11-25T03:36:44.887 に答える
2

より良い、よりセマンティックな方法はありますか？

はい-ネストされたテーブルをそこに配置しないでください。Arms / Legsは、元のテーブルのより多くの列であるか、完全に別のテーブルである必要があります。次に、CSSを使用して適切なスタイルを設定します1。

1いいえ、セマンティックHTMLとCSSで同じ視覚効果を得る方法がわかりません。しかし、それは重要ではありません。セマンティックマークアップを探しています-UXに適していると思うものに合わせる方法ではありません（ヒント：レイアウトにテーブルを使用している場合（そのまま）、ビジュアルユーザーに適しているのはUXだけです）。

于 2010-02-06T18:36:33.920 に答える
1

WAIのテーブルチュートリアルは、複雑なテーブルを扱うための非常に簡単な紹介を提供します。元の投稿の例は、一種のマルチレベルテーブルを示している可能性があります。

于 2015-01-09T22:42:20.243 に答える
0

情報に明示的なセマンティクスがない限り、これを行う単一の方法はありません。行内にツリーのような構造があるように見え、ネストされたDIVが役立つ場合があります。したがって、行セルのDIV子を持つことは可能かもしれませんが、操作は複雑になります。または、ネストされたテーブル（コンテンツまたはセルとしてのTABLE）の作成を試みることもできます。

複雑なセマンティクスを保持したい場合は、HTMLが最善の方法ではないため、XML表現またはRDFのいずれかを使用する必要があります。これらは両方とも、セマンティクスを保持しながら表示するためにHTMLに変換できます。

于 2009-11-25T03:17:56.253 に答える