如图，这样的样式该如何排版呢？
可能会有人这样排版：最外层一个div，里面有2个子div，然后每个子div中又有5个行级元素：
<div>
<div class="first">
<spam>xxx</span>
<spam>xxx</span>
<spam>xxx</span>
<spam>xxx</span>
<spam>xxx</span>
</div>
<div class="second">
<spam>xxx</span>
<spam>xxx</span>
<spam>xxx</span>
<spam>xxx</span>
<spam>xxx</span>
</div>
</div>这样会有一个什么问题呢？由于每一个span中的内容是不确定的，有的内容长，有的内容短，那么就无法保证每一列都是对其的。也就是说，我们想要在同一列的元素是相同的宽度，一列中任意一个元素变长，整个列内的元素宽度都会变长，这样才能保证每一列都保持整齐。如果采用上述，只能每一行都单独给span元素设置不同的margin，来保证每一列排列整齐，这还是在内容不再发生变化的前提下，如果日后内容再发生变化，又要重新调整margin值，维护性太差。
所以！总结，一旦遇到需要每一列排列整齐的，不要多想，使用表格table！
但使用table，并不是很顺手，因为会发现，有些table元素设置padding和margin没有鸟用。
首先来说说，table、tr和td这3个元素标签。
| 元素/是否支持 | margin | padding |
| table | 有效 | 视情况而定 |
| tr | 无效 | 有padding区但无效 |
| td | 无效 | 有效 |
解释一下：table相当于一个容器，margin当然有效。但其padding要看情况了。
table有一个属性，叫做border-collapse，默认的值是separate，就是说每一个td都是独立的，各自有各自的边框，互不重叠，td与table之间有距离，如图：
这个时候，table元素的paddnig属性是有效的（当然有效，你看现在每一个td和table不也有间距吗，这个间距就是padding了。）
但如果设置table的border-collapse属性为collapse，即每个td都紧挨着，且和table之间没空隙，如图：
此时，table元素的paddnig属性就无效了（当然咯，你设置合并了，td和table之间本来就无缝隙了，你再设置padding当然无效了。）
tr的padding，设置tr的padding后，我们审查元素，确实能看到设置的padding区，但是完全不影响，td的内容还是可以在tr的padding区显示，所以这里，大家可以认为，tr的padding也是无效的。
现在问题就是，有效的我们可以设置，那无效的我们怎么设置呢？
①table的padding
刚才说了，想要设置table的padding，可以默认table的属性border-collapse为separate，这样就能设置padding了。
然而，这样每一个td就分开了。实际上，现在很多框架，默认的border-collapse已经是collapse，因为没有任何一个表格，想要每个单元格分开那种丑陋的效果（看上面那个分开的表格）。那怎么办呢？拿最上面的效果图来说，可以在table外套一层div，将table需要的padding值，改成外层div的padding值，效果是一样的，如图：
<div style="padding"0 20px;">
<table>
内容
</table>
</div>table的padding使用外层div的padding代替。
②tr的margin和padding
表格就是一行接着一行展示数据和参数，所以，行与行（tr和tr）之间有必要空一段距离显示吗？显然，是没必要的。所以，tr的margin无效，不用管，因为我们根本不用设置tr的margin。
tr的padding，设置tr的padding对布局无影响，如果真的需要tr的padding，其实tr的padding不也相当于table的padding吗？而table的padding，刚才不是说了，相当于外层div的padding吗？所以，我们看表格时，都是看的table的有效区，无效边白区都是靠外层div设置padding的。
总结，tr不要设置任何的margin和padding，只是起到换行作用的元素，没其他任何作用。
③td的margin
一旦设置了border-collapse的属性为collapse，也就是说我们希望td的无间隙，即margin为0的。所以，没必要设置td的margin。
全部总结一下，table的每个单元格肯定是紧挨着的，而不是separate的。如果你用的是框架，则默认值一定是border-collapse：collapse。如果你没采用任何框架，记得将border-collapse设置为collapse。
一旦设置为collapse后，意味着我们希望table是没padding的，td是没margin的。此外，tr是不需要设置任何margin和padding的。则剩下的只有table的padding和td的padding。td的padding能直接设置，table的padding则采用套外层div设置。