如何使用 Tailwind 为类似于 HTML 表格的内容设置样式

Posted 2023-03-06

【中文标题】如何使用 Tailwind 为类似于 HTML 表格的内容设置样式

【英文标题】：How to style content similar to a HTML Table with Tailwind

【发布时间】：2022-01-22 06:52:51

【问题描述】：

我们有一些 html 当前以一种表格格式显示数据，但它确实是不正确的，因为没有标题，并且应该没有该数据的标题。作为我们努力遵守屏幕阅读器网络标准的一部分，我们需要用 div/span 替换这些不正确的表格，但不改变外观/感觉。我正在尝试使用 Tailwind 和 Flex 来做到这一点，我认为这应该是可行的，但我一直被挂断。

这是最终结果的样子（忽略封闭框，只讨论内栏内容）

基本上我需要有 2 列右对齐标签和左对齐值。我有一个顺风游乐场，其中包含内容here 的基本结构。感谢您的帮助，我是顺风的新手。

【参考方案1】：

这并不涉及 Tailwind，但重要的是要声明——

声明此信息不能标记为表格并且仍符合无障碍最佳做法和网络标准的说法是不正确的。说它会在语义上用 div 和 span 进行标记也是不正确的。 Divs 和 spans 没有语义意义，并​​且会使依赖辅助技术的用户难以辨别标题和数据之间的关系。

从可访问性和网络标准的角度来看，此信息应使用带有horizontally scoped headers 的表格进行标记，如下所示（因为它是表格内容，如您所说）：

th  text-align: right; 

<table>
  <caption>Project Information</caption>
  <tr>
    <th scope="row">Company</th>
    <td>ABC, Inc.</td>
  </tr>
  <tr>
    <th scope="row">Project Duration</th>
    <td>10/01/2020 &ndash; 03/07/2022</td>
  </tr>
  <tr>
    <th scope="row">Technology</th>
    <td>Electromagnets</td>
  </tr>
</table>

或者作为description list，它在语义上关联术语和相应的描述：

dl 
  display: grid;
  grid-template: 1fr / auto auto;
  justify-content: start;

dt 
  font-weight: bold;
  text-align: right;

dd 
  margin-left: 1ch;

<dl>
  <dt>Company</dt>
  <dd>ABC, Inc.</dd>
  <dt>Project Duration</dt>
  <dd>10/01/2020 &ndash; 03/07/2022</dd>
  <dt>Technology</dt>
  <dd>Electromagnets</dd>
</dl>

【讨论】：

感谢您的回复，我已更正。我以前没有见过水平范围标头的这种方法。如果有人想要一些额外的点，我仍然会对如何通过顺风实现这种布局感兴趣:)