本文介紹CSS表格的概念。若有興趣了解HTML表格，可點選HTML表格介紹。
CSS表格的基本概念
*以HTML標記和CSS指令，把各區塊內容（例如#main和#sidebar）放置在不同的單元格設置中，使其形成網頁佈局。
*表格的基本架構：本文中，我以橫列（row）、直行（column）、單元格（cell）來稱呼。
*CSS表格的設置名稱：table、table-row、table-cell。
*每個單元格里的內容，要以HTML「塊元素」的形式存在，例如<p></p>或<div></div>。
以下示範把網頁分成#main和#sidebar兩大區塊，放在一個CSS表格中（也就是一個橫列中包含著兩行）。
*此表格只有一列，當中有兩行/兩單元格，左單元格放#main的內容，右單元格放#sidebar的內容。
*基本做法：
1) 在.html文件的<body></body>區域，使用<div>標記，來設置main和sidebar的結構，並且設定id。
2) 在.html文件的<head></head>區域，以<style></style>指定CSS表格樣式。
*詳細步驟：
1. 在.html文件的<body></body>區域，為整個表格區域設置一個標記<div id="tableContainer"></div>（設定id是為了方便CSS樣式設置）。
2. 為橫列設置一個<div id="tableRow"></div>。
3. 本範例的橫列中含有兩個單元格（也就是兩直行或兩欄的意思），並設置各自的id（即<div id="main"></div>和<div id="sidebar"></div>）。
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
</head>
<body>
<div id="tableContainer">
<div id="tableRow">
<div id="main"><p>Main單元格的內容在此</p></div>
<div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
</div>
</div>
</body>
</html>
4. 接下來，在<head></head>區域，以<style></style>指定CSS表格樣式，分別指定CSS表格、橫列和單元格。（本文的後半部會提供另一種標示方式，也就是把CSS樣式指令直接放在HTML標記中。）此處我將main和sidebar兩單元格各自設置了背景顏色，以方便查看網頁呈現效果。
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
<style type="text/css">
div#tableContainer {
display: table;
}
div#tableRow {
display: table-row;
}
div#main {
display: table-cell;
background-color: #dddddd;
}
div#sidebar {
display: table-cell;
background-color: #aaaaaa;
}
</style>
</head>
<body>
<div id="tableContainer">
<div id="tableRow">
<div id="main"><p>Main單元格的內容在此</p></div>
<div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
</div>
</div>
</body>
</html>
修改後，重新加載網頁，看看有什麼變化。是否sidebar的內容出現在右邊，而且左右兩個單元格是一樣大的。
5. 對這個CSS表格，我們可以增加各種樣式設定，使版面更美觀。請自行測試各種設定的效果。
border-spacing是單元格虛擬邊框之間的距離。
vertical-align是垂直對齊方式，此處選擇讓單元格內容向上對齊（top）。
Padding單元格內容與單元格邊緣的距離，又稱為內邊距。
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
<style type="text/css">
div#tableContainer {
display: table;
border-spacing: 10px;
}
div#tableRow {
display: table-row;
}
div#main {
display: table-cell;
background-color: #dddddd;
vertical-align: top;
width: 70%;
padding: 20px;
}
div#sidebar {
display: table-cell;
background-color: #aaaaaa;
vertical-align: top;
padding: 20px;
}
</style>
</head>
<body>
<div id="tableContainer">
<div id="tableRow">
<div id="main"><p>Main單元格的內容在此</p></div>
<div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
</div>
</div>
</body>
</html>
以上只是最基本的設定。請試著調整瀏覽器視窗的寬度，看頁面的呈現是否理想？CSS表格的設置大致成形了！未來要設置兩欄或三欄的頁面佈局，就可以考慮使用CSS表格。
把CSS樣式指令直接放在HTML標記中
如果因為某些緣故無法或不方便直接修改<head></head>區域、無法或不方便修改.css文件，也可以把相關指令直接寫在HTML標記當中。以下將上面範例改為在HTML文件中設定。（id的設定可以省略，此處保留以便和前面的指令對照。）
<div id="tableContainer" style="display: table; border-spacing: 10px;">
<div id="tableRow" style="display: table-row;">
<div id="main" style="display: table-cell; background-color: #dddddd; vertical-align: top; width: 70%; padding: 20px;"><p>Main單元格的內容在此</p></div>
<div id="sidebar" style="display: table-cell; background-color: #aaaaaa; vertical-align: top; padding: 20px;"><p>Sidebar單元格的內容在此</p></div>
</div>
</div>
效果如下：
Main單元格的內容在此
沒有留言:
張貼留言