6

我需要标记以下设计，我无法修改其布局：

复杂的表格布局，每个项目的数据点垂直排列 请忽略填充文本，我知道这没有多大意义。

我选择了一张桌子，因为它感觉 95% 像桌子。但是当涉及到每个项目下方数据点布局的适当语义标记时，我感到很困惑。每个点都是不同的，即这不是自由格式的文本，并且每次都放置在相同的相对位置 -但它打破了传统的数据表布局，因为没有为这些点呈现分配的标题或标签。我有兴趣标记这样的布局，以便它既是：

  1. 语义
  2. 适用于现代屏幕阅读器（我知道一些较旧的屏幕阅读器有各种错误，但很像较旧的浏览器，我认为限制已弃用软件的更好/更新技术是不公平的）。

这几年我遇到过无数次这个问题，最后破解并求助于社区。我试过了：

  1. 为每个项目使用单独tbody的 s ，并在其中使用第二行作为额外的数据点，但是当我无法弄清楚如何将“子行”与项目相关联时放弃了。
  2. 水平放置包含所有各种数据点和标题的表格，然后使用 CSS 定位。不幸的是，与我之前关于已弃用软件的声明相反，我需要支持 IE 7，但这种技术失败了。
  3. 我曾考虑使用隐藏行th并rowspans创建更复杂的表格布局并尝试使用ARIA来获得所需的屏幕阅读结果，但均无济于事。
  4. 我也考虑过使用嵌套表，但这感觉非常非常错误。

任何帮助表示赞赏。

注意：渲染它以显示跨浏览器并不是那么难——我对如何使这种语义和可访问性感兴趣。

4

2 回答 2

3

是的，去一张桌子！我花了几次迭代才得到一个包含符合Webrichtlijnen表的网站，但它最终通过了所有标准。您需要注意以下几点：

  • 包括一个summary属性以提供您的表格的简短摘要。您可以添加<caption/>，但这不是必需的，在某些情况下，表格上方的标题也可以。
  • 在你的和你的第一个上使用scope属性（在大多数情况下，其他列将与行的第一个表格单元格的标签相关联）。th td
  • 从删除按钮的文本版本开始。
  • 我会为删除按钮使用描述性标题。
  • 确保<abbr/>在缩写月份上使用标签。

该表的一个示例可能是：

<table summary="summary">
  <thead>
    <tr>
      <th scope="col">Course</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">
        <div class="title">Title</div>
        <div class="sub-title">Subtitle</div>
        <div class="period">Period</div>
      </td>
      <td class="number">1.45</td>
      <td class="number">$1,047</td>
      <td><a href="">Delete</a></td>
    </tr>
  <tbody>
</table>

如果您选择在删除链接上使用 Ajax，请首先在不使用任何 Javascript 的情况下实现它（只需指向删除相应项目的 URL），然后向其中添加 Ajax 功能。

于 2012-09-06T10:50:16.877 回答
2

从广义上讲，我将有一个包含 1 个标题行和 6 个数据行的表格，奇数数据行有 3 个单元格，偶数数据行有一个单元格跨越三列。

在偶数行单元格内，我将有一个<h?>“lorem 102”行的元素和一个详细点列表。在<td>偶数行单元格的元素上，我有一个headers属性指向上面行的第一个单元格，以提供从子行到项目的关联。

我也可以在元素上包含一个<caption>元素或一个summary属性<table>来描述结构。

更新：看到 Jasper de Vries 的回答后，我意识到我忽略了删除列。只需听从他的建议即可。

于 2012-09-06T00:06:56.383 回答