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>

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

我希望做更多的列表视图，但我不确定在此处使用<ul>anddisplay: 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>

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

4

3 回答 3

0

如果您在“Presentation-wise, this is what I'm looking to perform”下使用的标记适合您的需求，请使用它。在当前标记上仅使用 CSS 似乎无法实现这样的表示。（障碍是您需要将两个单元格合并为一个单元格。这在某种意义上使用网格布局可能是可能的，但它还没有准备好迎接黄金时段。）

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

于 2012-12-31T08:27:06.993 回答
0

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

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

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

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

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

于 2012-12-31T08:01:30.483 回答
-1

遗憾的是，如果您希望数据以某种方式显示，您不能总是在 HTML 中以语义方式呈现数据。不过，在这种情况下， dl 元素可能会有所帮助。

于 2012-12-31T07:59:58.983 回答