table的使用以及其内padding、margin的实现

如图，这样的样式该如何排版呢？

可能会有人这样排版：最外层一个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设置。