html表格去除网格线_HTML表格模式：数据网格

html表格去除网格线

Previously I’ve shown HTML & CSS patterns for various kinds of tables, including designs with zebra stripes, rounded corners and scrolling data. Things get slightly more complex when we turn to “data grids”: tables that feature headers for both column and row information.

以前，我已经为各种表显示了HTML和CSS模式，包括带有斑马条纹，圆角和滚动数据的设计 。 当我们转向“数据网格”时，事情变得稍微复杂一些：表具有列和行信息的标题。

For this example I’ll use technical specifications of the giant Jaeger fighting mechs in Guillermo del Toro’s Pacfic Rim because, well, why the heck not.

在此示例中，我将使用吉列尔莫·德尔·托罗(Guillermo del Toro)的Pacfic Rim中巨型Jaeger战斗机的技术规格，因为，那么，为什么不这样做。

A “data grid” table, as I define it, has headers for both rows and columns, with no visible cell in the top left corner. Like most challenges in web development, the key is employing the right markup, with tags that enhance accessibility:

正如我定义的那样，“数据网格”表具有行