熟悉而又陌生的table

最新推荐文章于 2024-03-31 08:00:00 发布

原创最新推荐文章于 2024-03-31 08:00:00 发布 · 818 阅读

CC 4.0 BY-SA版权

在处处大谈语义化的今天，人们谈起table时心里大多都是很复杂的，一方面是因为使用table确实在布局上能给我们带来很大的方便，避免很多意外的情况和兼容性的问题；另一方面则是不太清楚什么时候该用table，什么时候不该用。下面我们就一起聊一聊关于table的事情二三。（如果有不对的或是不足的地方还请大家指出来和补充^_^）。

1. 什么时候使用table

在前一混乱的布局时代，人们为了方便布局而泛滥使用table，大约看中的大概是table的这两个好处：同行等高和宽度自动调节。而忽略了标签其自有的语义信息。
当然，也不是说table是完全不好。当我们面对这样一些结构的数据时就可以使用table，如：一个计划、一组规则、一些属性的比较、球赛的比分、日历、财政的数据或员工信息等。所谓当用则用嘛。

2.Table-layout

它定义了如何布局一张表的行、列和单元格。

Value：auto，fixed
Auto：每列的宽度由其里面的内容决定；
Fixed：表格和列的宽度由table, col的宽度或者是第一行每个单元格的宽度决定。第一行之后每行里的单元格不会影响这一列的宽度。说明第一行每列的单元格宽度是起决定性作用的。

据说Fixed之后的表格布局加载会更快，因为每个列的宽度是固定了的了，而不会通过计算表格的内容来决定列的宽度。（还没有数据证实）。
但是，有可能其后单元格中的内容可能与其被设定的宽度并不符合，需要使用overflow来决定溢出的内容是否被clip掉。

2.1如何设定单元格宽度后，让其里面的内容不溢出？

(1)设定table为固定布局：

table-layout: fixed;
width:100%;/* must have this set */

(2)设定每列的宽度，可用<col>或者设定class类的方式

(3)为tr，td进行如下样式设定

th td{
    white-space: nowrap;(必须要有)
    overflow: hidden(必须要有);
    text-overflow:ellipsis;
}

2.2 Overflow和text-overflow都是不可被继承的

Text-overflow，可取的值有：
clip :不显示省略标记（…），而是简单的裁切
ellipsis :当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word :当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

2.3 需要注意的问题

如果某行中的某个单元格中的内容为空，在套模板时，我们有时会通过判断后将整个<td>都不显示，那么就会出现第二幅图的情况，table的结构被打乱了。比较好的做法是，保留<td>结构，而让其内容为空就可以了。

3. table中常用的标签

大多数的标签大家都比较熟悉，其中有几个是值得注意的：

(1) tfoot。
我们基本较少使用，该标签书写的顺序不是在tbody之后，而是在thead和tbody之间，但却是在呈现在表格的底部，像下面这样，

它的使用场景是，通过重复表头的内容使得，在一个内容很长的表，也容易让人们看到每一列对应的标题是什么。

(2) col,colgroup
这两个标签一般是配合使用的,<colgroup><col></col>…..</colgroup>,即使源码里不用colgroup包裹col，页面加载的时候也会被自动包裹上。这个主要是通<col>影响第一行，而第一行又会影响表格其他的行。
有时我们需要保持表格每一列的样式基本统一，就可以将共同的样式都放在对应的col上，而不用给th，td加上相同的类名，这样不仅语义上更好，代码结构上也会更清晰。

4.常用到的css属性

(1)border-collapse
可取的值separated(默认的)，Collapsed

Separated：每个单元格之间都是分开的，之间的距离由border-spacing来决定。
Collapsed：这种模式下，合并边框；如果左右两个单元格边框都有颜色，则上面单元格的下边框压了下面单元格的上边框，左面压了右面的。

*只有在sepatrated模式下border-spacing才有用。可用来设定垂直与水平之间不同的间隔。
当然了，你必须要显示的设置th或者td的border,如border:1px solid black;这样才会看到边框线的出现。再给table设置border-spacing: 2px 5px;，就可以看到如下的效果了