html - 表格数据的语义和表示

Question

现在，我正在使用 <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>

当然，表格中不止一种车辆，但这几乎就是我现在显示数据的方式。还有其他列，出于我的示例的目的，我将坚持使用这六个列。

我想做更多的 ListView ，但我不确定是否使用 <ul>和 display: table-*这里在语义上是正确的，因为这是表格数据。我知道我也可以放 <span itemprop='...'>进入<td>单元格以及 block 级元素以我想要的方式排列内容，但我也不确定这是否正确。

在演示方面，这就是我想要实现的目标:

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

但在这种情况下，我不会只是使用表格标记将信息设置为三列吗？如果我这样做会有什么不同吗？

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

标记和设置数据样式的最佳方式是什么？

Answer 1

表格在语义上是正确的。您在示例中尝试实现的效果并不好。

使用表格，但对于标识和其他属性，您可以动态分配类或 ID。

另一种方法是将 data-* 属性添加到表格元素。

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

此外，如果您将上一个示例中的代码用于自定义行标记，我也看不到语义问题。