html5 colgroud,深入解析HTML的table表格标签与相关的换行问题.docx

深入解析HTML的table表格标签与相关的换行问题.docx

深入解析HTML的table表格标签与相关的换行问题

何为table：

table者Html表格也，数据之载体。

下面是一个比较标准的table代码写法：

XML/HTMLCode

It; tableborder=z/0//cellspacing=/zO//cellpadding=z/Oz/w idth=//100%/zgt; nbsp;

nbsp;It;trgt;nbsp;

nbsp; nbsp: It: thgt; Monthl t; /thgt; nbs p;

nbsp;nbsp; It; thg t ;Datelt ;/t hgt;nbsp;

nbsp;It;/trgt;nbsp;

. nbsp;It; tr gt;nbsp;

? nbsp; nbsp; 11; tdgt: AUG It ;/tdgt ;nb sp;

nbsp :nbsp; It; td gt; 181t;/td gt;nbsp;

9 ? nbsp; It ;/t rgt ;nbsp;

10 ? It ;/tableg t;nbsp;

简单的HTML表格由tab le元素以及一个或多个tr、th 或td元素组成。tr元素定义表格行，th元素定义表头的 单元格，td元素定义表格单元格。border属性规定表格边 框的宽度，cellpadding规定单元边沿与其内容之间的空白, cellsp acing规定单元格之间的空白，这三个属性我们一 般手动设置为0避免浏览器差异。width属性规定表格的宽 度，因为table宽度是随内部元素的宽度撑起多少而变化, 而常用情况下我们希望table是同外部容器等宽，所以常 常默认设置100%宽度使之撑满容器。

不得不说的table-layou t: fixed属性

table-layou t:auto (默认)［fixed。

参数：

auto：默认的自动算法。布局将基于各单元格的内容。 表格在每一单元格读取计算之后才会显示出来，速度很慢。

f ixed：固定布局的算法。在这算法中，水平布局是仅 仅基于表格的宽度，表格边框的宽度，单元格间距，列的 宽度，而和表格内容无关。解析速度快。

fixed布局模型的工作步骤：

w idth属性值不是au to的所有列元素会根据width 值设置该列的宽度。

表首行中位于该列的单元格wid th,根据该单元格 宽度设置此列的宽度。如果这个单元格跨多列，则宽度在 这些列上平均分配。

在以上两步之后，如果列的宽度仍为aut o,会自动 确定其大小，使其宽度尽可能相等。此时，表的宽度设置 为表的width值或列宽度之和(取其中较大者)。如果表度度 大于其列宽总和，将二者之差除以列数，再把得到的这个 宽度增加到每一列上。

这种方法的速度很快，因为所有列宽都由表的第一行 定义。首行后所有行中的单元格都根据首行所定义的列宽 确定大小。后面这些行中的单元格不会改变列宽。这意味 着为这些单元格指定的width值都会被忽略。

一般在做复杂表格html的时候，有时候你会发现，无 论怎么调整第一行每列的wi dth,列宽还是会发生出乎于 你意料之外的变动(例如一长串英文文本，并且中间无空 格分隔的情况你要这列限定宽度，使得过长文字强制换行 且不撑破表格，而往往结果是怎么也调整不到合适的宽度), 这个时候在万般无奈之下，你可以使用ta ble-layout: fixedo 常见而又生疏的几个table标签 thead、tfoot 以及 tbody

这三个标签是所谓xhtml的产物，主要是使您有能力 对表格中的行进行分组。当您创建某个表格时，您也许希 望拥有一个标题行，一些带有数据的行，以及位于底部的 一个总计行。这种划分使浏览器有能力支持独立于表格标 题和页脚的表格正文滚动。当长的表格被打印时，表格的 表头和页脚可被打印在包含表格数据的每张页面上。个人 认为其主要用途适用于超长表格的显示优化。

thead标签表示HTML表头

表格的头部thead,可以使用单独的样式定义表头，并 且在打印时可以在分页的上部打印表头。

th ead标签表示HTML页脚

表格的页脚tf oot,可以使用单独的样式定义页脚 (脚注或表注)，并且在打印时可以在分页的下部打印页 脚。

tbody标签表示HT ML表体

浏览器显示表格时，通常是完全下载表格后，再全部 显示，所以当表格很长时，可以使用tbody分段显示。

注释：如果您使用t head、tfoot以及tbody元素，您 就必须使用全部的元素。它们的出现次序是：the ad、 tfoot、tb ody,这样浏览器就可以在收到所有数据前就可 呈现表头和页脚了。您必须在table元素内部使用这些标 签，且the ad内部必须拥有tr标签。所以书写更为标准的 table方式即如