HTML中表格布局的示例分析
这篇文章主要为大家展示了HTML中表格布局的示例分析,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“HTML中表格布局的示例分析”这篇文章吧。
创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、成都网站制作、光山网络推广、重庆小程序开发、光山网络营销、光山企业策划、光山品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联建站为所有大学生创业者提供光山建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com
html是什么
html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。
什么时候会用到表格
现在,表格
一二 | ||
---|---|---|
一二三四 |
上面这个表格可以发现以下几点:
宽度定为5px的单元格,实际呈现宽度是13px,这正好是单个汉字的宽度,同一列的有汉字的单元格则以最小单元格宽度的形式排列文字(所以,换行了)。
宽度定为200px的单元格,实际呈现宽度是200px,尽管同列还有一个宽度70px的定义。
没有确切宽度定义的第3列,最后得到了表格在分配完第1列和第2列后全部的剩余宽度。
对此的推断是,存在宽度定义和不存在宽度定义的列都有的情况时:
如果单元格定义宽度小于其内容的最小排列宽度(和不换行排列方式相反,尽可能多行排列在单元格内时,单元格所需的宽度),则该单元格所在的列,都会以最小排列方式呈现内容。
如果同一列中,单元格的内容宽度(不换行形式,后文这个词都是这个意思)小于该列中最大的宽度定义,则该列的实际宽度等于该宽度定义。
不存在宽度定义的列,会先由表格分配宽度给有宽度定义的列之后,再分配给它们(同样,它们之间的比例取决于内容宽度)。
最前边的没有宽度定义的可以看做情况1,这里有的列有宽度定义,有的又没有,可以看做情况2。下面是情况3,即所有的列都有宽度定义时:
对应html代码:
上面的表格中,去掉了内边距,因此可以清晰地由宽度定义值,得到这3列的宽度比例是2:1:1。这里还有一个条件,就是单元格内的内容宽度不超过宽度定义值。经过测试,IE7及以下在内容超过宽度定义值和其他浏览器表现不同。
从这个表格例子可以知道,如果所有的列都有宽度定义,而这些宽度定义的值的和小于表格的宽度,则表格会在分配完它们宽度定义值所对应的宽度后,继续把剩余宽度,按照它们的宽度比例,也分配给它们。
以上即是对自动表格布局,且表格本身是定义了固定宽度时,3种情况的分析。如果表格本身不定义宽度,还会有更多情况,而且会和表格的包含块(containing block,详情)有关,如果以后有合适机会,再做讨论(所谓文章篇幅有限...)。
固定表格布局-fixed
固定表格布局的特点是,表格的宽度布局和表格中的数据内容无关,只需要接收到表格第一行的信息,就可以确定最终的宽度布局,并开始显示。
固定表格布局是“内容无关”的,而且它强调“第一行”。请看下面这个表格示例:
对应html代码:
一二 | 一二三四 | |
---|---|---|
艾丝蒂尔·布莱特 | ||
固定表格布局的逻辑要简单很多,表述如下:
只取第一行的信息,无视第一行之后的所有单元格的内容,及宽度定义
在第一行中,如果单元格有宽度定义,则先分配它们所需的宽度,然后剩余的宽度平均分配给没有宽度定义的单元格
第一行的单元格的宽度分配将决定表格的宽度布局,第一行之后的内容不会再改变布局。
还需要注意的时候,使用固定表格布局,则一定要给表格元素定义宽度,如果它的宽度没有定义(也就是auto默认值),浏览器会改用自动表格布局。
以上就是关于“HTML中表格布局的示例分析”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注创新互联行业资讯频道。
标题名称:HTML中表格布局的示例分析
分享路径:http://myzitong.com/article/iihjgc.html