1

<table>現在、意味的に正しいHTMLを使用して表形式のデータを表示しています。データを表示するときに、データの表示を変更して表形式の外観を少なくする方法があるかどうか疑問に思っています。

私のマークアップは現在次のようになっています。

<table>
    <thead>
    <tr>
        <th scope='col'>Vehicle</th>
        <th scope='col'>License plate</th>
        <th scope='col'>Location</th>
        <th scope='col'>Deployment date</th>
        <th scope='col'>Date of last inspection</th>
        <th scope='col'>Last inspection at</th>
    </tr>
    </thead>
    <tbody>
    <tr itemscope>
        <th scope='row' itemprop='primary_key_id'> ... </th>
        <td itemprop='license_plate'> ... </td>
        <td itemprop='location'> ... </td>
        <td itemprop='deployment_date'><time> ... </time></td>
        <td itemprop='last_inspection_date'><time> ... </time></td>
        <td itemprop='last_inspection_odometer'> ... </td>
    </tr>
    </tbody>
</table>

もちろん、テーブルには複数の車両がありますが、それが現在のデータの表示方法とほぼ同じです。追加の列もあります。私の例では、これらの6つだけを使用します。

リストビューをもっとやりたいと思っていますが、これは表形式のデータであるため<ul>、display: table-*ここで使用するかどうかは意味的に正しいかどうかはわかりません。<span itemprop='...'>ブロックレベルの要素と一緒にセルに入れて<td>、コンテンツを希望どおりに配置することもできますが、これが正しいかどうかもわかりません。

プレゼンテーションに関しては、これが私が達成しようとしていることです。

<table>
    <tbody>
    <tr itemscope>
        <th scope='row'>
            <b itemprop='primary_key_id'> ... </b>
            <div itemprop='license_plate'> ... </div>
        </th>
        <td>
            <p>Located at: <span itemprop='location'> ... </span>
            <p>Deployed at: <time itemprop='deployment_date'> ... </time>
        </td>
        <td>
            Last inspected on <time itemprop='last_inspection_date'> ... </time>
            at <span itemprop='last_inspection_odometer'> ... </span>
        </td>
    </tr>
    </tbody>
</table>

しかし、この場合、テーブルマークアップを使用して、情報を3つの列にスタイル設定しているだけではないでしょうか。私がこれをした場合、それは違いを生むでしょうか？

<ul>
    <li itemscope>
        <div class='column'>
            <b itemprop='primary_key_id'> ... </b>
            <div itemprop='license_plate'> ... </div>
        </div>
        <div class='column'>
            <p>Located at: <span itemprop='location'> ... </span>
            <p>Deployed at: <time itemprop='deployment_date'> ... </time>
        </div>
        <div class='column'>
            Last inspected on <time itemprop='last_inspection_date'> ... </time>
            at <span itemprop='last_inspection_odometer'> ... </span>
        </div>
    </li>
</ul>

データをマークアップしてスタイルを設定するための最良の方法は何ですか？

4

3 に答える 3

0

「プレゼンテーションに関して、これは私が達成しようとしていることです」で使用するマークアップがニーズに合っている場合は、それを使用してください。現在のマークアップでCSSだけを使用してそのようなプレゼンテーションを実現することは不可能のようです。（障害は、2つのセルを1つに結合する必要があることです。これは、ある意味ではグリッドレイアウトを使用して可能かもしれませんが、プライムタイムの準備はまだできていません。）

使用するdiv class=columnことは、テーブルを使用することよりも意味論的ではありません。実際には、少ないです。

于 2012-12-31T08:27:06.993 に答える
0

テーブルは意味的に正しいです。あなたの例で達成しようとしていることは良くありません。

テーブルを使用しますが、識別および追加のプロパティのために、クラスまたは ID を動的に割り当てることができます。

もう 1 つの方法は、テーブル要素に data-* 属性を追加することです。

<td data-some-key="value">

また、行のカスタムマークアップに最後の例のコードを使用する場合、セマンティックの問題は見られません。

于 2012-12-31T08:01:30.483 に答える
-1

悲しいことに、データを特定の方法で表示したい場合、常に HTML でデータを意味的に表示できるとは限りません。ただし、この場合はdl 要素が役立つ場合があります。

于 2012-12-31T07:59:58.983 に答える