table布局歷史久遠，現在已經很少使用，但是因為table本身的一些特性，比如上下對齊，左右對齊，文字默認居中使得table布局在處理一些規范的布局時還是很有用的，另外，通過table布局也正好可以學習一下table的使用方式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .left{ background:red; /* table布局中的元素默認等分width及height，如果需要設置不同的size,可以直接使用width單獨設置，這樣會自動布局 */ /* width: 20%; */ } .right{ background:blue; } table{ width:800px; height:200px; /* border-collapse屬性設置表格的邊框是否被合並為一個單一的邊框，還是像在標准的HTML中那樣分開顯示 */ /* separate：默認值，邊框會分開 */ /* collapse: 如果可能，邊框會合並為單一的邊框 */ border-collapse: collapse; } .table{ margin-top:20px; /* 設置其他元素為table元素，這樣就可以在其他元素中使用table布局了。 */ display: table; width:800px; height:200px; } .table-row{ display: table-row; } .table-cell{時 /* middle 當前元素放置在父元素的中部， */ /* vertical-align: middle; */ display: table-cell; } </style> </head> <body> <!-- table自身帶的屬性比如左右上下對齊，文字居中顯示，使用table布局對於規范的布局很方便 --> <table> <tr> <td class="left">左</td> <td class="right">右</td> </tr> </table> <div class="table"> <div class="table-row"> <div class="left table-cell"> 左 </div> <div class="right table-cell"> 右 </div> </div> </div> </body> </html>
