HTML+CSS教程:表格Table元素网页制作技巧

2013-09-26 21:55:58  来源:网页教学网 

网页制作Webjx文章简介:table元素在HTML中用于呈现表格数据。你可以把它作为一个描述和展示可用于电子表格的数据的方法。

重置默认的表格样式

世界上最流行的CSS reset叫做 Meyer Reset,对表格做了如下设置:

table, caption, tbody, tfoot, thead, tr, th, td {   margin: 0;   padding: 0;   border: 0;   font-size: 100%;   font: inherit;   vertical-align: baseline; } table {   border-collapse: collapse;   border-spacing: 0; } 

它的做法和 HTML5 Reset 以及 HTML5 (Doctor) Reset Stylesheet 是相同的。

这还有一个可供选择的 CSS resets,Normalize.css 。它的重置的原理有一点儿不同。它没有将所有的样式重置为0,而是设置一些合理的不一致的样式。我对使用 Normalize.css 的建议是:不要移除里面的任何东西。但可以自由地修改它们。

Normalize 对表格只做了如下样式设置:

table {   border-collapse: collapse;   border-spacing: 0; } 

我好像需要更深入地研究,因为我觉得上面的样式有点不寻常......

  1. 我很喜欢使用border-collapse: collapse,因为单元格之间的空隙会让人感到有点尴尬,但我知道在所有的浏览器中都是如此的border-collapse: separate;,所以它并不需要被归一化。
  2. 如果border-collapse的值是collapse,那么border-spacing是无关紧要的。
  3. 单元格元素时需要进行归一化的(例如在firefox和chrome中的padding是不同的),但这里却没有这么做。

这些东西不会有太大影响,也不必纠结。

对我来说,通常我会对表格进行下面的重置:

table {   border-collapse: collapse;   width: 100%; } th, td {   padding: 0.25rem;   text-align: left;   border: 1px solid #ccc; } 

“隐含”元素和未关闭的标签

看看下面丑陋的HTML:

<table>   <col>   <tr>     <td>Cell </table> 

虽然看起来有点怪异,但它是起作用的。为什么会这样?

  • <col>标签是属于那种无内容的不需要闭合的标签,类似<br>/<br />
  • <td>元素在这些情况中是无需闭合的:“如果<td>元素后面没有更多的<td><th>元素或者在它父元素中没有更多的内容,闭合标签是可以省略的。”
  • 缺少的</tr>标签的原理也是相同的:“如果<tr>元素后面没有紧跟着一个<tr>元素或者如果它父元素组(<thead>, <tbody>或者 <tfoot>)没有更多的内容,结束标签是可以省略的。”

如果我们检查浏览器对表格的渲染,我们可以看到那些缺少了闭合标签的标签又重新拥有了闭合标签。这是浏览器自动为我们添加的。并且里面还增加了一些新的元素。

要注意到的是,<col>元素被一个自动添加的<colgroup>元素所包裹。

甚至如果我们这样做:

<table>   <col>   <colgroup>     <col>   </colgroup>   <tr>     <td>Cell     <td>Cell </table> 

然后:

colgroup:first-child {   background: red; } 

你可能会认为第二个单元格会变成红色,而不是第一个。因为这里的“第一个” colgroup 仅会影响第二个单元格。但在渲染的时候却发现,两列都被包裹在 colgroup 当中,因此CSS选择器会选择第一个。

<tbody>元素也是隐含的。如果你不使用任何的 tbody,thead 或 tfoot,那么整个表格的内容都会被包裹在 tbody 当中(实际上被包裹的只有表格行和其子元素, col 和 colgroup 并不会被包含)。如果你使用 thead 那么整个表格会包裹在它里面直到找到 tbody (但在我的测试下并不是这样子,thead并不会包含任何元素,不知道是否作者笔误),然后它会自动关闭 thead 标签。

你可以在CSS选择器中使用这些隐含的元素即使你没有将它写在HTML当中。但我并不建议这样做,因为这样的HTML是相当丑陋和让人迷惑的。通常也是不建议使用标签选择器进行样式设置。

使表格变为非表格元素

在一些情况下你可能会需要强制让表格不应用它的表格形式的布局行为而更像一些其他的规则元素。

这只是个通过改写单元格的 display 属性来实现的技巧:

th, td {   display: inline; } 

我们可以相当快速地去表格化一个表格:

为了安全起见,我对所有表格相关元素进行了重置。因为这个我会知道这下父元素不会对我的测试造成什么影响了。

table, thead, tbody, tfoot, tr, td, th, caption {   display: block; } 

这在响应式布局中相当地有用,因为传统的表格布局从大屏幕转移到小屏幕时需要做显著的改变以保持布局的完整。

表格可访问性

我们已经谈论过使用表格来布局以及表格的可访问性了。但假设表格已经被正确地用于表格数据了,仍然有许多值得关注的可访问性问题。

这里有几篇很好的相关文章:

斑马条纹表格

如果你不为表格单元设置背景颜色,你可以为它们的所属的表格行设置背景色,所以最简单地,你可以这样做:

tbody tr:nth-child(odd) {   background: #eee; } 

我们在选择器的 tr 前面增加了 tbody,因为你不太会希望为表格的 header 和 footer 中的表格行添加条纹。你也可以改变偶数行的背景颜色来突出它们,如果你想的话。

如果你想要支持那些不支持 :nth-child() 的浏览器(相当该死),你可以使用 JQuery 来实现。

调查似乎显示添加斑马条纹是个不错的注意。

更多