table元素完全指南（包含css3+html5）

标签：style   blog   http   io   color   ar   使用   sp   strong   

表头和表体

上面这个基础例子中我们没有做的一件事是没有语义地指出第一行是该表格的头部。我们本应该这么做。整个第一行的部分没有包含数据，它只是每个列的标题。因此，我们可以<thead>元素来完成这件事情，它会包裹第一个<tr>元素(它会包裹所有的行所需要的头部信息)

当你使用了<thead>元素后，<table>元素中不能有直接的<tr>子元素，所有的行必须存在于<thead>，<tbody>和<tfoot>里面。要注意的是我们会把所有的数据行包含在<tbody>里面。

表尾

连同<thead>和<tbody>一起的还有<tfoot>,用于包裹指出表格页脚的行。和<thead>一样,它只是语义地指出了辅助信息，没包含别的数据。

<tfoot>独一无二的一点是它在HTML中的位置，它紧跟着<thead>并位于<tbody>的前面！你可能会认为它是table标签结束前的最后一个元素，但情况并不是这样。因为页脚可能包含了用于理解表格的必要信息，因为在资源序列中它应当排在在数据的前面。

尽管首先在资源序列中出现，<tfoot>确实渲染在了表格的底部，这使其成为一个不同寻常的HTML元素。

举个例子，它可以用于这样的场景，在一个很长或很高的表格中，<tfoot>重复了表头的信息，使得读者更容易地在底部看到列表的标题信息，而不用回到头部查看。但你并没有必要这样来使用它。

<th>元素并不是必须放在<thead>元素当中。它们简单地指出了头部信息。因此它们也能用于<tbody>元素的第一行当中。

单元格的间隔

border-spacing:0.5rem可以控制单元格之间的间距；

border-collapse:collapse可以把单元格之间的间距去掉；

这两个都加在table里

表格的行、高：一般不直接写死witdh或者height，而用padding来制造。

合并单元格

有两个能应用在任何单元格中的重要的属性（<td>或<th>）：colspan 和 rowspan 。他们接受任何大于等于2的正整数。如果一个 td 元素的 colspan 值为2（<td colspan="2">），它将仍然是单独的单元格，但它会在一行中水平的占据两个单元格的空间。rowspan 也一样，但它作用于垂直方向。

两个标题轴

只要是标题的元素都用<th></th>标签

在这种情况我可能会省略 <thead>标签即使第一行全是表格头部信息。因为这个头部并不显得十分重要，将它单独分行放在<thead>中会让人感到有点奇怪。因此只要让第一行的所有列都使用<th>标签并让余下的行的第一列使用<th>标签就可以了。

什么时候使用表格

现在让我们缓一缓并讨论一下应该何时使用表格，或许你已经听过这类型的建议：表格是为列表式的数据准备的（请看本文的第一个句子）。

把什么东西放在表格当中是比较合适的？这里列出了一些：一个计划表/价格表/特性比价，保龄球分数，网格式的员工信息，财务数据，日历，营养成分表信息版，逻辑难题解算器，等等。

你可能会听说过：表格是非语义的。这并不正确 - 它们语义地指出了表格数据，当展示数据时表格是个很好的选择。

什么时候不使用表格

表格并不适用于布局。这看起来好像有点奇怪。那让我们看一下为何表格的特性使它们似乎适合用于布局：易于控制，逻辑严密，具有可预见性，并且一点也不脆弱。

但当使用表格来布局时有一些严重的问题。首先，HTML标签意味着某些东西。像我们前面提到的，table 元素语义地描述了列表式数据。把它们用于其他的任何东西都是违反语义化的职责的。虽然你在邮件中使用并不会受到惩罚，但在HTML文档中使用 table 的获益并没有这么大。

但谈论语义化有时候并不是那么简单（相关资料：1，2，3，4，5），因此我们来谈论一些所有人都基本同意的东西（即使我们没有像我们想达到地那么好）：网站应该是可访问的。其中一部分的可访问性是面向屏幕读者而言。屏幕读者是从上至下从左至右地阅读表格的。因为你要根据表格的结构来决定如何呈现网站内容，也就意味着由视觉的选择而不是可访问性的选择决定。

说到资源顺序，它的影响超过了可访问性。想象一个“侧边栏在左边”的布局，一个表格会要求表格应该首先出现在资源序列中，这同时也不利于可访问性，也可能不利于SEO，这潜在地决定了你得辅助内容在你得主要内容之上。

你能通过在表格中使用语义化的标签来解决SEO的问题吗？这是有可能的，但你现在在使用双重HTML。如果你真的需要表格的布局能力但又想使用语义标签，那请看下一部分。如果你在使用 table 布局时不知道该如何达到语义化，请在表格中使用ARIArole="presentation"表明它的含义。

当我在2013下半年后写这篇文章时，表格已经变得不那么流行并且在布局方案中也没有那么大的吸引力了。我们看到现在大量的人更多地使用固定或绝对定位，这在表格当中是无法做到的。我们看到 flexbox 在主流可用性的边缘成为极好的一个选择。我们看到网格布局开始发展起来。我们看到 inline-block 强大的使用方法。我们看到过去那浮动的脆弱性已经逐渐消失。

现在你已经很少看到现代网站使用表格来布局了，除了HTML邮件还在坚持以外。呈现邮件的范围是非常广阔的。邮件出现在互联网的任何地方和移动端的原生应用以及老式和新式系统的桌面端。你可以对邮件做些进步性的优化，但大家一致认为它最安全的布局方式是使用表格。一个有力的证据是：主要的邮件推送服务器全都用表格来搭建模板。

使语义元素表现地像一个表格

你总是需要改变元素的 display 属性来得到表格风格的行为，这里是它们的相关值：

display: table                /* <table>     */
display: table-cell           /* <td>        */
display: table-row            /* <tr>        */
display: table-column         /* <col>       */
display: table-column-group   /* <colgroup>  */
display: table-footer-group   /* <tfoot>     */
display: table-header-group   /* <thead>     */

inline-table与inline-block的作用效果一样

表格中其他的重要属性

caption：放在<table>后<thead>前，表示表格的标题，一般居中显示

样式美化后的表格

奇偶行变色，高亮行、列，鼠标hover，请见demo

记住一点：表格自身设置圆角时需要设置border-collapse: separate;

表格搜索

源码见2014-10-27收藏夹

固定表头

源码见demo

table元素完全指南（包含css3+html5）

标签：style   blog   http   io   color   ar   使用   sp   strong   

原文地址：http://www.cnblogs.com/JolinChan/p/4054679.html