这篇文章主要介绍了HTML表格布局实际使用详解,是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中文网!
相关推荐:
Html的a标签中href和onclick用法区别以及优先级别
以上是HTML的表格布局的详细内容。更多信息请关注PHP中文网其他相关文章!