网络上曾经充斥着表格和利用表格进行布局的创造性方法。这些天已经过去了，表格被用于最初的目的，即数据表示。不幸的是，响应速度极快的网页设计以及不得不处理较小屏幕上的表格，导致了人们的骚动＜div＞一方面是汤，另一方面是创建JavaScript卡片库。
这篇文章总结了我所学到的关于HTML表的知识，以及在使用尽可能简单的CSS的同时，我用来充分利用数据表的方法。您可以在代码笔如下所示。请调整视口大小，以便切换布局。
优点
性感的-设计师可能会对排版、间距、尺寸和颜色发疯。只要他们同意移动设备上的垂直表格布局，每个条目都显示为不同的信息块（类似，但不完全像维基百科上的信息表).
快速-手机和桌面的标记是相同的，不需要不必要的helper元素。布局只使用CSS进行切换，不需要JavaSript。这可以防止“非样式表闪烁”，因为一旦加载JavaScript，表就不会回流。
搜索引擎优化–一个好的表有一个主题列，表标题有<th>元素和带有的表标题<标题>。搜索引擎会自动检测主题列，因此您必须应用自定义样式。在我的示例中，左边的列有不同的颜色，并且用粗体书写。搜索引擎还将分析表格前后的内容，以了解表格的含义，因此请务必在标题和正文中描述它。
无障碍–您可以使用<th scope=“col”>或<th scope=“row”>。也有几种提供表摘要的方法，但如果您需要摘要，则您的表可能不太容易访问，应进行简化。在大多数情况下，具有标题和干净的标记是可访问表所需的全部。您可以在中找到更多信息Web辅助功能教程WAI的。
与一些响应表解决方案相比，这也是一个真实的表，而不是一个看起来像表的元素集合。这对屏幕阅读器（和网络爬虫）来说很好，因为它们只需序列化您的所有<span>和＜div＞元素。
- 灵活–我们可以免费获得表格提供的所有酷东西，例如通过
垂直对齐：顶部|中部|底部；以及浏览器调整单元格大小以适应内容长度。
代码
要在手机上以键-值对的形式显示表数据，您必须将键作为自定义数据属性添加到HTML中。您可以在示例中看到这一点1200欧元</td>.
<桌子>
<标题>布鲁托/内托2015年9月</标题>
<头部>
<信托收据>
<第个>布鲁托洛恩</第个>
<第个>工资税</第个>
<第个>弗雷尔·丁斯特拉格</第个>
<第个>承揽合同</第个>
</信托收据>
</头部>
<表格主体>
<信托收据>
<td（时域） 数据-时间="布鲁托洛恩">€ 1200</td（时域）>
<td（时域） 数据-时间="工资税">€ 2,82</td（时域）>
<td（时域） 数据-时间="Sozialversicherung公司">€ 180,84</td（时域）>
<td（时域） 数据-时间="Nettolohn公司">€ 1.016,34</td（时域）>
</信托收据>
...
</表格主体>
</桌子>
为了简洁起见，我已经从示例中去掉了所有HTML类。当然，您可以也应该使用BEM或任何其他前端范例，但我们只需在这里使用元素选择器。您可以在代码笔，所以我们只需仔细查看一下媒体查询。
您会注意到，这是桌面第一种方法。它通常是我在项目中使用的唯一一个。真实的标题是隐藏的，键值对是通过伪元素创建的。这个attr（）中使用的表达式内容：attr（data-th）；允许您检索自定义数据属性的值，因此不必将字符串放入样式中。这是从InternetExplorer8开始的，所以不用担心。
这个<td>获取填充以为绝对定位的伪元素腾出空间，该伪元素具有相同的宽度，并根据单元格填充进行定位顶部和左边.
@媒体屏幕和 (最大宽度:640像素) {
头部 {
显示:没有人;
}
td（时域） {
显示:块;
位置:相对的;
向左填充:50%;
水平对齐:正确的;
}
td：第一个孩子 {
字体加粗:大胆的;
}
td：之前 {
内容: 属性(数据-时间);
位置:绝对的;
顶部:10像素;
左边:10像素;
宽度:50%;
字体加粗:继承;
水平对齐:左边;
}
}
这是一个包装！希望你能用这些技巧让你的桌子变得性感、快速、搜索引擎优化、可访问和灵活。如果您发现任何错误或建议不同的方法，请随时这样做！
