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

2020-04-17 08:28:16易采站长站整理

何为table:
table者Html表格也,数据之载体。
下面是一个比较标准的table代码写法:

XML/HTML Code复制内容到剪贴板

<table border="0" cellspacing="0" cellpadding="0" width="100%">  
  <tr>  
    <th>Month</th>  
    <th>Date</th>  
  </tr>  
  <tr>  
    <td>AUG</td>  
    <td>18</td>  
  </tr>  
</table>  

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

不得不说的table-layout:fixed属性
table-layout: auto(默认)|fixed。
参数:
auto:默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来,速度很慢。
fixed:固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。 解析速度快。
fixed布局模型的工作步骤:
1.width属性值不是auto的所有列元素会根据width值设置该列的宽度。
2.表首行中位于该列的单元格width,根据该单元格宽度设置此列的宽度。如果这个单元格跨多列,则宽度在这些列上平均分配。
3.在以上两步之后,如果列的宽度仍为auto,会自动确定其大小,使其宽度尽可能相等。此时,表的宽度设置为表的width值或列宽度之和(取其中较大者)。如果表度度大于其列宽总和,将二者之差除以列数,再把得到的这个宽度增加到每一列上。
这种方法的速度很快,因为所有列宽都由表的第一行定义。首行后所有行中的单元格都根据首行所定义的列宽确定大小。后面这些行中的单元格不会改变列宽。这意味着为这些单元格指定的width值都会被忽略。
一般在做复杂表格html的时候,有时候你会发现,无论怎么调整第一行每列的width,列宽还是会发生出乎于你意料之外的变动(例如一长串英文文本,并且中间无空格分隔的情况你要这列限定宽度,使得过长文字强制换行且不撑破表格,而往往结果是怎么也调整不到合适的宽度),这个时候在万般无奈之下,你可以使用table-layout:fixed。