HTML的表格布局
什么时候会用到表格
此刻，表格<table>一样不再用于网页团体的规划。不外，在面临某些特定的设计，如表单输入、数据显现时，表格则大概是最适当的选中。
关于表格的直不雅印象，就是由多个单元格（cell）整洁摆列而成的元素，可以明白看出行（row）和列（column）。这可以联想到Excel，由Excel在数据处置和统计上的地位，就可以懂得网页中表格的意义。
简便来说，能直不雅感受到多个元素是以行和列的概念摆列时，用表格会让你轻松许多。如caniuse.com中利用表格的例子：
表格规划运算
使用表格很简便，但有时候表格终究为每一个格子显现的状态，大概不是你想要的。比方说某些格子显现了换行，然后整个表格就由于换行看起来十分不美妙。特别是用于数据显现的表格，宽度分配是一个很重要的话题，你大概需要为每一列格子大概显现的数据状况，对表格的总宽度做朴实。
这是由于，表格在规划上有本人的特性，它会遵照必然的道理，通过运算，肯定出它的实际规划。接下来，本文以实际的表格测试示例，商量表格是怎样运算本人的规划的。
初始声明
本文只针对利用表格最常见的办法，而不会列出所有的状况。不一样阅读器对表格的部分概念的解析有差别，但规划运算是根本一致的（假如有差别，会独自说起）。
接下来用的测试表格都会以这样的外不雅显现（内容取自零之轨迹）：
同时，表格都会设定border-collapse: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代码是：
<table class="exhibit_table">
<tr>
<th>一二</th>
<th style="width:200px;"> </th>
<th> </th>
</tr>
<tr>
<td style="width:5px;"> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td style="width:70px;"> </td>
<td>一二三四</td>
</tr>
</table>上面这个表格可以发明以下几点：
宽度定为5px的单元格，实际显现宽度是13px，这恰好是单个汉字的宽度，统一列的有汉字的单元格则以最小单元格宽度的情势摆列文字（所以，换行了）。
宽度定为200px的单元格，实际显现宽度是200px，尽管同列还有一个宽度70px的定义。
没有确切宽度定义的第3列，最后得到了表格在分配完第1列和第2列后全部的剩余宽度。
对此的推断是，存在宽度定义和不存在宽度定义的列都有的状况时：
假如单元格定义宽度小于其内容的最小摆列宽度（和不换行摆列方式相反，尽大概多行摆列在单元格内时，单元格所需的宽度），则该单元格所在的列，都会以最小摆列方式显现内容。
假如统一列中，单元格的内容宽度（不换行情势，后文这个词都是这个意思）小于该列中最大的宽度定义，则该列的实际宽度等于该宽度定义。
不存在宽度定义的列，会先由表格分配宽度给有宽度定义的列之后，再分配给它们（一样，它们之间的比例取决于内容宽度）。
最前边的没有宽度定义的可以看做状况1，这里有的列有宽度定义，有的又没有，可以看做状况2。下面是状况3，即所有的列都有宽度定义时：
对应html代码：
<table class="exhibit_table exhibit_table_with_no_padding">
<tr>
<th style="width:50px;"> </th>
<th style="width:50px;"> </th>
<th style="width:100px;"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>上面的表格中，去除了内边距，因此可以清楚地由宽度定义值，得到这3列的宽度比例是2:1:1。这里还有一个前提，就是单元格内的内容宽度不超越宽度定义值。经过测试，IE7及以下在内容超越宽度定义值和其他阅读器展现不一样。
从这个表格例子可以知道，假如所有的列都有宽度定义，而这些宽度定义的值的和小于表格的宽度，则表格会在分配完它们宽度定义值所对应的宽度后，连续把剩余宽度，依照它们的宽度比例，也分配给它们。
以上便是对主动表格规划，且表格本身是定义了牢固宽度时，3种状况的剖析。假如表格本身不定义宽度，还会有更多状况，并且会和表格的包括块（containing block，详情）有关，假如今后有适宜时机，再做计议（所谓文章篇幅有限...）。
牢固表格规划-fixed
牢固表格规划的特点是，表格的宽度规划和表格中的数据内容无关，只需要接收到表格第一行的信息，就可以肯定终究的宽度规划，并开端显示。
牢固表格规划是“内容无关”的，并且它强调“第一行”。请看下面这个表格示例：
对应html代码：
<table class="exhibit_table exhibit_table_fixed">
<tr>
<th style="width:50px;"></th>
<th>一二</th>
<th>一二三四</th>
</tr>
<tr>
<td>艾丝蒂尔·布莱特</td>
<td width="1000px;"> </td>
<td> </td>
</tr>
<tr>
<td style="width:5px;"> </td>
<td> </td>
<td> </td>
</tr>
</table>牢固表格规划的逻辑要简便许多，表述如下：
只取第一行的信息，疏忽第一行之后的所有单元格的内容，及宽度定义
在第一行中，假如单元格有宽度定义，则先分配它们所需的宽度，然后剩余的宽度均匀分配给没有宽度定义的单元格
第一行的单元格的宽度分配将决议表格的宽度规划，第一行之后的内容不会再改动规划。
还需要留意的时候，使用牢固表格规划，则必然要给表格元素定义宽度，假如它的宽度没有定义（也就是auto默许值），阅读器会改用主动表格规划。
结尾声明
与表格有关的其实还有<colgroup>、<thead>、<tfoot>、<caption>等元素，只是在最常见的用途中，并不需要用到它们。实际上，它们也在表格的规划运算的思考之内。再加上还有单元格合并的状况，你大约可以想象到表格规划运算其实是多么复杂的东西。
W3C的文档提到，表格的规划运算（主动表格规划）尚没有成为标准。关于W3C对表格规划运算的说明，请参照Table width algorithms。
结语
其实就表格规划运算道理这一点，做这样详细的推断，并没有多少有用性。只是说，在需要解决细节问题的时候，有这些信息做参照 的话，会有所帮忙，尽管这样的时机不多。
不外，可以就本文的内容，得到一个比力成心义的结论：表格定义宽度，且所有单元格都不定义宽度，那么主动规划的表格会尽大概让你的所有数据都不换行，而假如碰到换行影响美妙的状况，说明必需要精简数据或者减小边距，而不是再自行尝试重做宽度分配。
这一次做这种实测和推断，感到针对详细状况细分后再说明，会比一次性系统地完全表述，更容易懂得，或许算是语文练习？
以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相关内容请关注PHP中文网！
相关引荐：
HTML实现网页动态时钟
Html的a标签中href和onclick用途不同乃至优先级别
以上就是HTML的表格规划的具体内容，更多请关注百分百源码网其它相关文章！
