Question

现在，我正在使用带有HTML的<table>显示表格数据，这在语义上是正确的。我想知道在查看数据时是否有办法改变数据的表示形式，以减少表格外观。

我的标记目前看起来像这样：

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

当然桌子上有不止一辆车，但这就是我现在正在显示数据的方式。还有其他专栏，为了我的例子，我将坚持使用这六个。

我正在寻找更多的列表视图，但我不确定在这里使用<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>

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

<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- *属性添加到table元素。

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

如果您使用上一个示例中的代码来自定义行标记，我也不会发现语义问题。

Answer 2

如果你在“演示明智，我想要达到的目标”下使用的标记适合你的需要，请使用它。似乎不可能仅使用当前标记上的CSS来实现此类演示。（障碍是您需要将两个单元组合成一个。从某种意义上说，这可能是使用网格布局，但它还没有为黄金时间做好准备。）

使用div class=column并不比使用表更具语义。实际上，少了。

Answer 3

遗憾的是，如果您希望以某种方式显示数据，则无法始终在HTML中以语义方式显示数据。但是dl element在这种情况下可能会有所帮助。

表格数据的语义和表示

3 个答案: