当我们进行浮动布局时，会发现存在着非浮动元素与浮动元素的底部难以对齐的情况，这就是浮动布局的缺陷。因此，过去的前端工作者曾利用<table>以实现“表格布局”。因为表格中同一行的单元格行高总是一致的，所以“表格布局”可以避免“浮动布局”时出现的“底部对不齐”情况，下面是经典的利用<table>实现“双栏布局”的框架：
<table>
<tr>
<td>
<!--左侧栏内容-->
</td>
<td>
<!--右侧栏内容-->
</td>
</tr>
</table>
但是随着HTML5的到来，HTML标签越来越强调“语义化”，即合理使用HTML标记以及其特有的属性去格式化文档内容。因此，利用<table>来实现“表格布局”是不推荐的，因为此时<table>中的内容并不是一个真的“表格”，不符合“语义化”的追求。那么，在追求语义化的时代，该如何实现传统的“表格布局”呢？那就是借助CSS来实现。
利用CSS来实现“表格布局”很简单，第一步是把传统<table>布局中的<table>、<tr>、<td>改为合适的、符合“语义化”的标签，比如说上面的“双栏布局”改成这样：
<main>
<section>
<aside>
<!--左侧栏内容-->
</aside>
<article>
<!--右侧栏内容-->
</article>
</section>
</main>
然后为这些标签添加对应的display属性：
<main style="display:table">
<section style="display:table-row">
<aside style="display:table-cell">
<!--左侧栏内容-->
</aside>
<article style="display:table-cell">
<!--右侧栏内容-->
</article>
</section>
</main>
其实将上述代码与传统<table>布局的代码一对比，可以看出，变化之处就是：
替换掉<table>的<main>有了一个“display:table”样式
替换掉<tr>的<section>有了一个“display:table-row”样式
替换掉<td>的<aside>和<article>分别有了一个“display:table-cell”样式。
用CSS来替代<table>进行“表格布局”的思路是基本一致的，只是进一步将页面的结构与表现分离开来，这样做最大的好处就是可以使HTML标签尽量做到“语义化”。
原文地址：https://www.cnblogs.com/shixizhi/p/8319298.html