4

次のように、要素がまったく同じ属性を持つ子要素を持つことができるテーブルがあります。

ITEM    ATTRIBUTE 1    ATTRIBUTE 2
item    value          value
 sub    value          value
 sub    value          value
item    value          value

これから、次のようなマークアップを作成しました。

<table>
    <thead>
        <tr>
            <th>ITEM</th>
            <th>ATTRIBUTE 1</th>
            <th>ATTRIBUTE 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>item</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr>
            <td colspan=3>
                <table>
                    <tbody>
                        <tr>
                            <td>sub</td>
                            <td>value</td>
                            <td>value</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>item</td>
            <td>value</td>
            <td>value</td>
        </tr>
    </tbody>
</table>

私の質問は今：

  • これは最高のセマンティック ソリューションですか?
  • 別のアプローチの方が適していますか? もしそうなら、どの方法が推奨されますか？
  • テーブルヘッダーは両方のテーブルを担当していますか、それとも新しいテーブルを作成する必要がありvisibility: hiddenますか?
4

4 に答える 4

4

これは最高のセマンティック ソリューションですか?

あまり。要素 A を別の要素 B 内にネストする行為は、A が B の子であることを示すために使用できますが、それはここで行っていることではありません。完全に異なる行内にテーブルをネストしているので、 A と B の間に親子関係はありません。

テーブル内のすべての列にまたがるセルを作成し、その中に同じ列数の別のテーブルを作成することで、「これらは他の列であり、外側の列とは関係がない」と効果的に言うこともできます。テーブル"。

上記の例のセルに境界線を追加することで、列間の暗黙の (欠如) 関係を確認できます。

レンダリングされたテーブル

明らかに、CSS でそれを修正できますが、HTML の一部のスタイル設定されていないレンダリングは、多くの場合、そのセマンティクスの良いガイドになります。

別のアプローチの方が適していますか? もしそうなら、どの方法が推奨されますか？

HTML で表の行間の階層関係を表す標準的な方法はありません。私が同様の質問に与えた回答から引用しますが、追加のクラス、ID、およびdata-属性を使用してそれを行うことができます。

<table>
    <thead>
        <tr>
            <th>ITEM</th>
            <th>ATTRIBUTE 1</th>
            <th>ATTRIBUTE 2</th>
        </tr>
    </thead>
    <tbody>
        <tr id=100>
            <td>item</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr id=110 data-parent=100 class=level-1>
            <td>sub</td>
            <td>value</td>
            <td>value</td>
        </tr>
        <tr id=200>
            <td>item</td>
            <td>value</td>
            <td>value</td>
        </tr>
    </tbody>
</table>

親子関係は、スタイル設定されていないレンダリングでは表示されません (私が見る限り、余分なコンテンツを追加せずに表示する方法は他にありません) が、必要な CSS を追加するのに十分なフックがあります。

.level-1 > td:first-child {
    padding-left: 1em;
}

...結果は次のようになります。

レンダリングされたテーブル

少しの JavaScript を使用して、idおよびdata-parent属性を使用して設定することもできます。たとえば、行にカーソルを合わせると、その親が強調表示されます。

両方のテーブルを担当するのはテーブル ヘッダーですか、それとも新しいテーブルを作成する必要がありますか?

提案されたソリューションでは、すべての列にまたがる単一のセルを作成し、その中に別のテーブルを作成することは、ヘッダー セルと「子」行のセルの間に暗黙の関係がないことを意味します。明らかに、上記の私の提案した解決策にはその問題はありません。

于 2013-09-21T18:33:28.953 に答える
1

これは W3C の推奨事項です。

現時点では、ヘッダーが最初の行/列にないテーブルに対して支援技術全体で一貫したサポートを確保したい場合は、複雑なテーブル H43: Using id and headers attributes to associated data cells with headers の手法を使用することをお勧めします。データ テーブルのセル。最初の列または行にヘッダーがある単純なテーブルの場合、th 要素と td 要素の使用をお勧めします。

この投稿でロックできます：セマンティックHTMLテーブルを構築するための最良の方法

それがあなたの答えを得るのに役立つことを願っています

于 2013-09-21T18:46:39.560 に答える
0

子供たちを別のテーブルに置くのは間違った方法だと思います。入れ子になったテーブルは、入れ子になったリストとは異なります。それらは同じ意味階層を持っていません。すべてが同じ情報をリストする場合、すべてが同じテーブル内にあるはずです。

たとえば、テーブルにヘッダーがある場合

REGION    POPULATION     AREA

次に、item1 = Earth、item2 = France、item3 = Paris とすることができます。フランスが Earth の子であるか、Paris が France の子であるかは問題ではありません。すべてを 1 つのテーブルにまとめ、CSS スタイリング以外で親子関係を作成しようとしないほうがよいでしょう。

親子関係を知らずにテーブルが本当に理解できない場合は、テーブル データの例を挙げて、構造化の方法をよりよく理解できるようにしてください。

于 2013-09-25T18:33:13.423 に答える