html 标记语言 table介绍

2015-01-09 0 By admin

<table> 就是表示表格的标签,它主要有 summary 属性,用来表示当前表格的内容概要。主要是用来给屏幕阅读器和视觉有障碍的人用的。至于其他属性,都不推荐使用。

一、table 的渲染过程

当浏览器遇到 table 的时候,解析渲染的步骤如下:
1、确保 summary 发挥作用。每个 table 都应该提供这样一个属性来让视觉障碍阅读器可以获取相关信息。
2、如果 <caption> 标签定义了,渲染这个标题。
3、如果表单定义了头部(header)和尾部(footer),那么先渲染头部,再渲染尾部。因为头部和尾部通常包含重要的信息,所以需要先渲染解析。例如,如果表单的“客户端”不是浏览器,而是打印机这类的,当表格太长的时候,一张纸打印不开,就需要分开。这时候虽然表格分开了,比较智能先进的打印机,会在每一页的上面插入表格头,下面插入表格尾部。
4、计算表单中的列数。表格的行数当然就等于表格中 <tr> 标签的数量了。
5、通过 column group 声明来划分列组。
6、渲染单元格,一行一行的渲染在 表格头 和 表格尾 之间,并且通过 CSS 的相关声明加上样式。

二、caption 标签

<caption> 标签的含义是当前表格的标题,通常是 summary 属性的更浓缩版。
它位于 <table> 结构里面的最顶端,因为按照上面的解析渲染步骤可知,这个标签需要优先解析。

三、thead、tfoot、tbody 标签

这三个标签比较类似,放在一起说。其中比较常用到的就是 <tbody> ,但另外两个也是不可或缺的。

四、thead 标签

表示表格的头部相关信息。如果是一份旅游出行名单的话,通常就是 编号、姓名、联系电话和地址等。用来表示当前列的内容是什么。

五、tfoot 标签

表示表格的底部信息。如果是一份旅游出行名单的话,就是一些 签名、领队联系人、日期 等等信息。

六、tbody 标签

表示表格的主体信息内容,如果是一份旅游出行名单的话,那内容就是一行一行的个人信息。
tfoot 要放在 tbody 结构的上面,因为:
<tfoot> 中往往携带比较重要的信息,需要优先让客户端接收处理,为了避免 <tbody> 内容太多导致长时间无法加载 <tfoot> 信息,所以在结构上放在上面。
但是浏览器在渲染的时候,还是会将 tfoot 的内容放在 tbody 的下面。

七、tr 标签

<tr> 标签表示一行。包裹在里面的单元格处于一行。

八、th、td 标签

这两个标签就是承载信息的单元格,它们有以下常用的属性:

九、th 标签

<th> 标签保存的内容,是当前列或者当前行的“头部说明”信息。通常在 <thead> 结构中的单元格,就要用到 <th> 来实现。如果是一个二维表格,在 <tbody> 中,左数第一个单元格保存的往往是当前行中的“头部说明”,也要使用该标签。

十、td 标签

<td> 标签就是最普通的单元格,用来保存各种表格中需要的信息。
table 的 HTML 结构和相关属性,基本就上面那些,很多已经被废弃或者不推荐使用。其中单元格的属性 rowspan 和 colspan 用起来稍微复杂一些。