HTML的表格布局

什么时候会用到表格

现在，表格

关于表格的直观印象，就是由多个单元格（cell）整齐排列而成的元素，可以明确看出行（row）和列（column）。这可以联想到Excel，由Excel在数据处理和统计上的地位，就可以理解网页中表格的意义。

简单来说，能直观感受到多个元素是以行和列的概念排列时，用表格会让你轻松很多。如caniuse.com中应用表格的例子：

它的对应html代码是：

上面这个表格可以发现以下几点：

宽度定为5px的单元格，实际呈现宽度是13px，这正好是单个汉字的宽度，同一列的有汉字的单元格则以最小单元格宽度的形式排列文字（所以，换行了）。
宽度定为200px的单元格，实际呈现宽度是200px，尽管同列还有一个宽度70px的定义。
没有确切宽度定义的第3列，最后得到了表格在分配完第1列和第2列后全部的剩余宽度。

对此的推断是，存在宽度定义和不存在宽度定义的列都有的情况时：

如果单元格定义宽度小于其内容的最小排列宽度（和不换行排列方式相反，尽可能多行排列在单元格内时，单元格所需的宽度），则该单元格所在的列，都会以最小排列方式呈现内容。
如果同一列中，单元格的内容宽度（不换行形式，后文这个词都是这个意思）小于该列中最大的宽度定义，则该列的实际宽度等于该宽度定义。
不存在宽度定义的列，会先由表格分配宽度给有宽度定义的列之后，再分配给它们（同样，它们之间的比例取决于内容宽度）。

最前边的没有宽度定义的可以看做情况1，这里有的列有宽度定义，有的又没有，可以看做情况2。下面是情况3，即所有的列都有宽度定义时：

对应html代码：

上面的表格中，去掉了内边距，因此可以清晰地由宽度定义值，得到这3列的宽度比例是2:1:1。这里还有一个条件，就是单元格内的内容宽度不超过宽度定义值。经过测试，IE7及以下在内容超过宽度定义值和其他浏览器表现不同。

从这个表格例子可以知道，如果所有的列都有宽度定义，而这些宽度定义的值的和小于表格的宽度，则表格会在分配完它们宽度定义值所对应的宽度后，继续把剩余宽度，按照它们的宽度比例，也分配给它们。

以上即是对自动表格布局，且表格本身是定义了固定宽度时，3种情况的分析。如果表格本身不定义宽度，还会有更多情况，而且会和表格的包含块（containing block，详情）有关，如果以后有合适机会，再做讨论（所谓文章篇幅有限...）。
固定表格布局-fixed

固定表格布局的特点是，表格的宽度布局和表格中的数据内容无关，只需要接收到表格第一行的信息，就可以确定最终的宽度布局，并开始显示。

固定表格布局是“内容无关”的，而且它强调“第一行”。请看下面这个表格示例：

对应html代码：

  
    
  
        
  
        
一二
  
        
一二三四
  
    
  
    
  
        
艾丝蒂尔·布莱特
  
        
 
  
        
 
  
    
  
    
  
        
 
  
        
 
  
        
 
  
    
  

固定表格布局的逻辑要简单很多，表述如下：

只取第一行的信息，无视第一行之后的所有单元格的内容，及宽度定义
在第一行中，如果单元格有宽度定义，则先分配它们所需的宽度，然后剩余的宽度平均分配给没有宽度定义的单元格
第一行的单元格的宽度分配将决定表格的宽度布局，第一行之后的内容不会再改变布局。

还需要注意的时候，使用固定表格布局，则一定要给表格元素定义宽度，如果它的宽度没有定义（也就是auto默认值），浏览器会改用自动表格布局。
结尾声明

与表格有关的其实还有、、、等元素，只是在最常见的用法中，并不需要用到它们。实际上，它们也在表格的布局计算的考虑之内。再加上还有单元格合并的情况，你大概可以想象到表格布局计算其实是多么复杂的东西。

W3C的文档提到，表格的布局计算（自动表格布局）尚没有成为规范。关于W3C对表格布局计算的说明，请参照Table width algorithms。
结语

其实就表格布局计算原理这一点，做这样细致的推断，并没有多少实用性。只是说，在需要解决细节问题的时候，有这些信息做参考的话，会有所帮助，尽管这样的机会不多。

不过，可以就本文的内容，得到一个比较有意义的结论：表格定义宽度，且所有单元格都不定义宽度，那么自动布局的表格会尽可能让你的所有数据都不换行，而如果碰到换行影响美观的情况，说明必须要精简数据或者减小边距，而不是再自行尝试重做宽度分配。

这一次做这种实测和推断，感到针对具体情况细分后再说明，会比一次性系统地完整表述，更容易理解，也许算是语文练习？

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！