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

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

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

基本样式

你看到的大多数表格都用颜色和线条来区别表格的不同部分。边框是非常常见的。默认的,所有的单元格相互之间都有2px的空隙(通过用户代理样式表给出)

注意第一行和余下部分轻微的额外差距。这是默认的应用在和中的 border-spacing 导致他们产生了一点间隔。这不是外边距,他们没有折叠。你可以像这样来控制间隔:

table {     border-spacing: 0.5rem; } 

但更常见的做法是移除这些间隔,这个属性能够完全忽略和折叠这些间隔,像如下设置:

table {     border-collapse: collapse; } 

小小的内边距,边框并使<th>元素左对齐就能样式化一个简单的表格:

合并单元格

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

在你开始准备使用合并单元格的工作前你必须先进行一点心算。合并列相对比较简单。所有的单元格在其数量值上等价于1,如果它具有 colspan 属性,则等价于更多。合计一行中的每个单元格的值则可以得到表格行的最终值。其他的每一行的值都必须精确地等于该值,否则你将得到一个非矩形的尴尬的表格布局。(最长的表格行将会突出)

合并行是相似的,只是它难度要稍大一点并需要思维跳跃。因为列并不像行那样分组。如果一个表格元素具有 rowspan 属性,它会垂直跨越两行。这意味着它代表的单元格数得到了+1。

在你得脑袋中想象出它们可能有点难度,但我们是开发者,相信我们能做到这点。=)

实际上这些属性经常仅仅是简单地被应用,例如合并几个相关联的表头:

宽度自适应... 或包含在容器中... 或撑破容器

表格元素在其自身应该占据多宽的问题上是不同寻常的,它表现地像一个块级元素(如:<div>),如果你把一个表格放在另一个表格后面,每一个都会分解到它自己的行当中。但表格的实际宽度却仅按照它所需要的给出。

如果在表格最宽的行中文本的宽度为100px宽,则这个表格宽度为100px。如果文本的数量宽度比表格的外容器要宽,则文本将会被包裹(通过折行)起来。

然而如果文本被设置为非包裹(例如: white-space: nowrap;),表格可能会撑破容器。因为单元格也是非包裹的,所以如果内容太多,表格则会撑破容器。

两轴表格

有时候表格具有两个轴是有意义的。像一个交叉引用的情况。下面以一个乘法表为例子:

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

什么时候使用表格

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

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

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

什么时候不使用表格

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

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

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

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

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

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

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

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

CSS中有一个属性能让任何元素表现地像一个表格元素。你需要从本质上改变它们因为你需要的是个表格,并且它会从属像表格一样的资源顺序的依赖关系。我不是在做什么无聊的事,因为它有时候是有很大作用的。如果这种布局风格解决了问题并不会再顺序上造成什么影响,你应该使用它。

请避免使用内联样式,但为了便于理解,这里就破例用了:

<section style="display: table;">   <header style="display: table-row;">     <div style="display: table-cell;"></div>     <div style="display: table-cell;"></div>     <div style="display: table-cell;"></div>   </header>   <div style="display: table-row;">     <div style="display: table-cell;"></div>     <div style="display: table-cell;"></div>     <div style="display: table-cell;"></div>   </div> </section> 

这儿一个方便的技巧是,如果你不希望的话,你甚至不需要表格行元素。这样的话,所有的display: table-cell元素会作为display: table;元素的子元素并且他们都在同一个表格行当中。

你总是需要改变元素的 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>     */ 

注意这里没有<th>的值,这是因为语义的关系,<th><td>的表现实际上是相同的,所以没必要多增加这样一个值。

这里还有一个相当有趣的值display: inline-table;。记得我们前面谈论过的怪异的表格元素的宽度。表格是自适应宽度的。它就像 inline-block 元素一样。顾名思义,这个值使得它们成为一个 inline-block 元素而不会产生换行。

如果你想要了解更多的语义元素和表格风格布局,请查看Everything You Know About CSS Is Wrong!

 

我从来没有认可过这个标题因为该书建议过除了表格风格的布局其他的布局方法都是错误的。但正如我曾说过的,这种方法是非常有用的,它能在CSS中出现我感到非常开心。只是要意识到无论你使用什么样的元素来创建一个表格式的布局,它们都遵循一个相同的东西(资源顺序依赖关系)。

更多