用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標簽盡量做到“語義化”。