CSS佈局-table表格佈局
阿新 • • 發佈：2020-07-12
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"> <metahttp-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>