用CSS实现“表格布局”

　　当我们进行浮动布局时，会发现存在着非浮动元素与浮动元素的底部难以对齐的情况，这就是浮动布局的缺陷。因此，过去的前端工作者曾利用<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标签尽量做到“语义化”。