HTML表格布局实际使用详解
作者：梁砫
字体：[ ] 来源：ACGTOFE 时间：07-28 17:48:03
这篇文章主要介绍了HTML表格布局实际使用详解,是HTML入门学习中的基础知识,需要的朋友可以参考下
什么时候会用到表格
现在，表格&table&一般不再用于网页整体的布局。不过，在面对某些特定的设计，如表单输入、数据呈现时，表格则可能是最恰当的选择。
关于表格的直观印象，就是由多个单元格（cell）整齐排列而成的元素，可以明确看出行（row）和列（column）。这可以联想到Excel，由Excel在数据处理和统计上的地位，就可以理解网页中表格的意义。
简单来说，能直观感受到多个元素是以行和列的概念排列时，用表格会让你轻松很多。如中应用表格的例子：
表格布局计算
使用表格很简单，但有时候表格最终为每一个格子呈现的状态，可能不是你想要的。比如说某些格子出现了换行，然后整个表格就因为换行看起来十分不美观。尤其是用于数据呈现的表格，宽度分配是一个很重要的话题，你可能需要为每一列格子可能呈现的数据情况，对表格的总宽度做精打细算。
这是因为，表格在布局上有自己的特性，它会遵循一定的原理，通过计算，确定出它的实际布局。接下来，本文以实际的表格测试示例，探讨表格是如何计算自己的布局的。初始声明
本文只针对应用表格最常见的方法，而不会列出所有的情况。不同浏览器对表格的部分概念的解析有差异，但布局计算是基本一致的（如果有差异，会单独提及）。
接下来用的测试表格都会以这样的外观呈现（内容取自零之轨迹）：
同时，表格都会设置border-collapse:和border-spacing:0;。这也是应用表格的最常用做法，Normalize.css把这部分用作了初始化定义。两种算法
定义在&table&元素上的css属性table-layout，将决定表格在布局计算时应用的算法。它有两种值，auto和fixed。在通常情况下，都使用默认值auto。
这两种算法的差异在于表格的宽度布局是否与表格中的数据内容有关。本文会分别讨论在这两种取值时，表格的布局计算原理。自动表格布局-auto
自动表格布局的特点是，表格的宽度布局与表格中的所有数据内容有关，它需要在获取所有表格内容后才能确定最终的宽度布局，然后再一起显示出来。
如此看来，要点就是&内容相关&了。如果表格定义了固定宽度（这里是500px），而所有的单元格都不定义宽度（只讨论css定义宽度），会如何呢？来看结果：
上面这个表格中，空白的部分是写了&空格。经过比较，可以发现以下几点：
&&& 第2列和第3列宽度相同。&&& 第1列的宽度和后面任意一列的宽度比似乎是2:1。&&& 加上边框和内边距，所有列的宽度总合，等于表格定义的宽度。
每个单元格都没有定义宽度，所以宽度布局完全由具体的内容数据（文本信息）决定的。如何解释这样的结果呢？可以先直观地推测这样的逻辑：
&&& 第1步，从每一列中选取文字内容最多（理解为不换行的情况下，文本所占据的宽度最宽）的，作为&代表&。&&& 第2步，比较各列的&代表&的宽度，然后按照它们的宽度比例关系，为它们分配表格的总宽度，包括边框和内边距。
参照上面的逻辑，再来反观一下前面的表格，是不是挺有一些道理？注意，前面说宽度比&似乎&是2:1，这个会是？来看看去掉内边距的版本：
用前端调试工具具体看一下上面的单元格的宽度，你会发现这个表格和之前不同，比例已经非常接近2:1（是的，还有的这一小点是因为边框，但是没有边框就没法区分列了）。
可见，在分析宽度比例关系的时候，是会把内容宽度和内边距，以及边框都考虑在内的。这也说明，不是衡量文字的数目，而是衡量文字在不换行状态所能占据的宽度（这里的2:1来源于中文汉字是等宽的）。使用内边距自然只是为了做出更美观的表格 :) 。
有宽度定义的时候，又会怎样呢？下面是一个部分单元格有宽度定义的表格：
它的对应html代码是：
&class=&exhibit_table&&&
&&&&&&&&一二&&
&&&&&&&&&style=&width:200&&&&
&&&&&&&&&&&
&&&&&&&&&style=&width:5&&&&
&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&style=&width:70&&&&
&&&&&&&&一二三四&&
上面这个表格可以发现以下几点：
&&& 宽度定为5px的单元格，实际呈现宽度是13px，这正好是单个汉字的宽度，同一列的有汉字的单元格则以最小单元格宽度的形式排列文字（所以，换行了）。&&& 宽度定为200px的单元格，实际呈现宽度是200px，尽管同列还有一个宽度70px的定义。&&& 没有确切宽度定义的第3列，最后得到了表格在分配完第1列和第2列后全部的剩余宽度。
对此的推断是，存在宽度定义和不存在宽度定义的列都有的情况时：
&&& 如果单元格定义宽度小于其内容的最小排列宽度（和不换行排列方式相反，尽可能多行排列在单元格内时，单元格所需的宽度），则该单元格所在的列，都会以最小排列方式呈现内容。&&& 如果同一列中，单元格的内容宽度（不换行形式，后文这个词都是这个意思）小于该列中最大的宽度定义，则该列的实际宽度等于该宽度定义。&&& 不存在宽度定义的列，会先由表格分配宽度给有宽度定义的列之后，再分配给它们（同样，它们之间的比例取决于内容宽度）。
最前边的没有宽度定义的可以看做情况1，这里有的列有宽度定义，有的又没有，可以看做情况2。下面是情况3，即所有的列都有宽度定义时：
对应html代码：
&class=&exhibit_table&exhibit_table_with_no_padding&&&
&&&&&&&&&style=&width:50&&&&
&&&&&&&&&style=&width:50&&&&
&&&&&&&&&style=&width:100&&&&
&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&
上面的表格中，去掉了内边距，因此可以清晰地由宽度定义值，得到这3列的宽度比例是2:1:1。这里还有一个条件，就是单元格内的内容宽度不超过宽度定义值。经过测试，IE7及以下在内容超过宽度定义值和其他浏览器表现不同。
从这个表格例子可以知道，如果所有的列都有宽度定义，而这些宽度定义的值的和小于表格的宽度，则表格会在分配完它们宽度定义值所对应的宽度后，继续把剩余宽度，按照它们的宽度比例，也分配给它们。
以上即是对自动表格布局，且表格本身是定义了固定宽度时，3种情况的分析。如果表格本身不定义宽度，还会有更多情况，而且会和表格的包含块（containing block，详情）有关，如果以后有合适机会，再做讨论（所谓文章篇幅有限...）。固定表格布局-fixed
固定表格布局的特点是，表格的宽度布局和表格中的数据内容无关，只需要接收到表格第一行的信息，就可以确定最终的宽度布局，并开始显示。
固定表格布局是&内容无关&的，而且它强调&第一行&。请看下面这个表格示例：
对应html代码：
&class=&exhibit_table&exhibit_table_fixed&&&
&&&&&&&&&style=&width:50&&&
&&&&&&&&一二&&
&&&&&&&&一二三四&&
&&&&&&&&艾丝蒂尔&布莱特&&
&&&&&&&&&width=&1000&&&&
&&&&&&&&&&&
&&&&&&&&&style=&width:5&&&&
&&&&&&&&&&&
&&&&&&&&&&&
固定表格布局的逻辑要简单很多，表述如下：
&&& 只取第一行的信息，无视第一行之后的所有单元格的内容，及宽度定义&&& 在第一行中，如果单元格有宽度定义，则先分配它们所需的宽度，然后剩余的宽度平均分配给没有宽度定义的单元格&&& 第一行的单元格的宽度分配将决定表格的宽度布局，第一行之后的内容不会再改变布局。
还需要注意的时候，使用固定表格布局，则一定要给表格元素定义宽度，如果它的宽度没有定义（也就是auto默认值），浏览器会改用自动表格布局。结尾声明
与表格有关的其实还有&colgroup&、&thead&、&tfoot&、&caption&等元素，只是在最常见的用法中，并不需要用到它们。实际上，它们也在表格的布局计算的考虑之内。再加上还有单元格合并的情况，你大概可以想象到表格布局计算其实是多么复杂的东西。
W3C的文档提到，表格的布局计算（自动表格布局）尚没有成为规范。关于W3C对表格布局计算的说明，请参照Table width algorithms。结语
其实就表格布局计算原理这一点，做这样细致的推断，并没有多少实用性。只是说，在需要解决细节问题的时候，有这些信息做参考的话，会有所帮助，尽管这样的机会不多。
不过，可以就本文的内容，得到一个比较有意义的结论：表格定义宽度，且所有单元格都不定义宽度，那么自动布局的表格会尽可能让你的所有数据都不换行，而如果碰到换行影响美观的情况，说明必须要精简数据或者减小边距，而不是再自行尝试重做宽度分配。
这一次做这种实测和推断，感到针对具体情况细分后再说明，会比一次性系统地完整表述，更容易理解，也许算是语文练习？
大家感兴趣的内容
12345678910
最近更新的内容2011年5月 VB大版内专家分月排行榜第三2011年4月 VB大版内专家分月排行榜第三
2011年5月 VB大版内专家分月排行榜第一2011年4月 VB大版内专家分月排行榜第一2011年3月 VB大版内专家分月排行榜第一2011年2月 VB大版内专家分月排行榜第一2011年1月 VB大版内专家分月排行榜第一2010年12月 VB大版内专家分月排行榜第一2010年11月 VB大版内专家分月排行榜第一2002年2月 VB大版内专家分月排行榜第一2002年1月 VB大版内专家分月排行榜第一
2002年3月 VB大版内专家分月排行榜第三
2010年12月 VB大版内专家分月排行榜第二2010年11月 VB大版内专家分月排行榜第二2009年7月 VB大版内专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。1365人去过这里,
3条目的地点评
虽然具体印象不深了，但我的记忆是好喜欢这呀~ 白天很悠闲，晚上有夜市。在午餐的地方看到老外轻车熟路的点餐，好自在...
有家大超市可以采购吃喝。我们定的那家酒店离市区好远。
短暂的停留，极像我们的小县城，但干净不混乱
沙滩真是很不错 租的四轮敞篷吉普帅呆了
这个名字没有美奈来得让人充满想象。
麻雀虽小五脏俱全
穷游酒店推荐
酒店免费退
25个行程提到
价格比同星级平均水平低71%
同等级酒店中评价No.1
73个行程提到
7个行程提到
价格比同星级平均水平低34%, 评分比同星级平均水平高1%
同等级酒店中评价No.1
同等级酒店中评价No.2
Airbnb爱彼迎特色住宿
10分 ( 3 )
穷游折扣优选
藩切推荐行程
藩切火车站
这个城市暂时还没有高质量游记，来做第一位贡献者吧~
DAY 1 【前期各种计划和预定】【起 始】每逢放假过节，对于苦逼的上班族来说，硬是挤也要出去耍啊，对于国内的各种看人看车，还是选择国外吧，相比较人还是比较少的，选择越南也是朋友无意的一句话，说越南很美，所以就这样搜了搜机票，不是很贵，立马就定下了。【确定行程】越南是一个狭长的国家，海岸线非常的长，恶狠狠的把中南半岛的东边海全占上了。越南北部与中国接壤，与中国的关系源远流长，是东南亚受中国文化影响
一百个人心中有一百个哈姆雷特，然而去越南“穿越”的人不胜枚举。当然在每个人的心中，越南的形象也是不一样的。或许是又穷又破的小国家；或许是3w元就可以买到一个越南姑娘做新娘，还包Chu（算敏感词么，表河蟹吖），跑了还包赔；或许是越战，要是老一辈收这地儿，也许就叫“越南省”；或许是乡村重金属组合---HKT、可怕的越南版《还珠格格》等雷剧；或许是和我一样觉得越南是一个内涵丰富之国，越南越美。山川湖海，
十一假期，照例还是要出去走走的，只是一休升初三了，学习紧张，就没带他一起去。目的地有几个选择，缅甸或东南亚的其他地方，一查下来，只有越南的机票最便宜，我4月中旬出票，港龙航空，香港转机，上海至胡志明市往返，1800+，非常令人满意的价格。因为时间只有7天，买了越南航空的两程国内段机票，胡志明-岘港、岘港-大叻，一人400+RMB，超级便宜。除了我和一休爸，另外纠集了2个同事，一共四人。旅行险，购买
【前言】此刻，我正坐在西贡的星巴克里敲着键盘。这是第一次还在旅途中，就修了大部份的图and准备开始码字。越南，一个念了三年的地方，终在今年高强度的工作下，犒劳+抽疯的买了这8月雨季的机票。下半年年假已不多，留给越南的只能是请3天假加周末，只能短行。加上还是一次先买机票后招小伙伴的行程，可左来右去始终凑不了，唯有独行。也是因为独行+短行，特意带了电脑~方便无聊的时候有图修~方便无聊的时候有字码~所以
2015年3月我们自由行先后去了越南（胡志明市、美奈、大叻、芽庄、会安、岘港、顺化、河内、下龙湾）和老挝（琅勃拉邦、万荣、万象）由于先生在琅勃拉邦发生意外事故回国后急于就医没有发表游记。想到我们的经验教训或许对别人有帮助还是写出来吧！想告诉同类人——勇敢地走出去，没有什么大不了的欢迎关注：花甲夫妇在路上——走遍兰卡北中南16天及亚航滞留吉隆坡1天/thread
护照只有48页，但未知的世界却无限辽阔，等待我们去经历。我始终坚信，身体和灵魂，始终有一个在路上。序
写于开篇最初是从杜拉斯还有安妮宝贝的文字里，对西贡，对芽庄，对大叻略知一二。记忆里的一段文字，是《蔷薇岛屿》里，安与苏在大叻的一段生活。记忆里的场景，是《情人》里的芽庄，以及《三轮车夫》，《青木瓜滋味》，《恋恋三季》里的片段场景。就这样，我开始计划着一定要去一次越南，计划着，计划着最后终于实现了
这篇游记是我的的第三篇游记攻略，前两篇分别是柬埔寨和泰国，有需要的穷游er可以点击下面链接：【消失之美·吴哥】暹粒全方位图文攻略+游记（2万多字+300多张配图）（完）/thread-.html【多彩之美·泰国】无敌哥哥与菜鸟弟妹游泰国（清迈、沙美岛、曼谷九日干货分享）完结 /thread-1034861-
故事2014年的秋天，我们坐在已经环绕欧亚大陆快一圈的房车上，即将结束已经进行了七个多月的旅行。因为这趟环欧亚之旅，从国内出发，穿过了中东，西亚，欧洲，北亚，再加上之前一起旅行过的越南，尼泊尔，算起来我和夹子已经携手走过了二十几个国家。那时我们在一起刚过三年，一起徒步过喜马拉雅，畅游过地中海，行驶了上万公里的公路旅行，穿越了浩瀚的西伯利亚森林；也一起经历过生活的细细碎碎，柴米油盐的点点滴滴。不敢说
暂时没有关于这个城市的问题，提出你的问题，在这里让我们大家帮助大家~
暂时没有穷游er结伴去这里，发帖找个旅伴吧~
暂时没有好友点评过这里，去关注更多点评达人吧~
藩切点评TOP5
去过这里的穷游er还去过
热门旅游目的地
相关旅游目的地
藩切旅游攻略
/phan-thiet/}