表格的用途是能夠簡潔而有條理地呈現資料性內容（例如數據），使讀者可以快速地掌握資料的脈絡。適當地使用表格來呈現資料，可以提高網頁內容的可讀性，增進讀者的理解。
相對於HTML表格是為了有條理的展現數據或文字內容而存在，CSS（層疊樣式表）作為網頁樣式設計的總領導，提供了另一種表格架構（簡稱CSS表格）。CSS表格的主要用途是，以表格的概念來設置網頁頁面的佈局與框架。現下的網頁樣式，常見兩欄（two column）、三欄（three column）的樣式，像這種多個欄框的樣式，就可以透過CSS表格來實現。可以想見，這樣的「表格」主要用途就不是羅列數據資料了。
HTML表格的基本標記方式
首先說明表格的概念。在日常中文的表述裡，我們常常會把行和列的說法混用，這有時會造成溝通上的誤解。本文為了表意清晰，一律使用橫列（row）、直行/欄(column)、單元格(cell)來說明。
HTML表格的特色在於，每一個直行和橫列，以及每一個單元格，都必須標記清楚，才能井然有序地呈現資料。這導致表格的標記乍看之下會很複雜。嗯，只能說，習慣了就好。
演示步驟3-1：
HTML表格的最外層是<table></table>這一對標記。在<table></table>標記內部，須按照由上往下的順序，填寫橫列標記<tr></tr>。此處的tr是table row的意思。表格有幾個橫列，就填入幾對橫列標記（tr）。
表格製作中：填入橫列標記（tr）
<table border="1"> #屬性border="1"指定了表格框線的粗細度
<tr>
</tr>
<tr>
</tr>
</table>
演示步驟3-2：
在每對<tr></tr>標記內部，須按照由左而右的順序，填寫單元格標記<td></td>。此處的td是table description的意思。一個橫列裡有幾個單元格，就填入幾對單元格標記。換句話說，填入幾個單元格，就代表表格有幾個「直行」。
表格製作中：在橫列標記（tr）內，填入單元格（td）標記。此範例設定每列有三個單元格。
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
演示步驟3-3：
在單元格標記<td></td>中間，填入表格資料，也就是表格的主體！
表格製作中：在單元格標記（td）內，填入表格內容
<table border="1">
<tr>
<td>北部</td>
<td>中部</td>
<td>南部</td>
</tr>
<tr>
<td>5</td>
<td>9</td>
<td>11</td>
</tr>
</table>
步驟3-3完成後的表格呈現效果：
| 北部 | 中部 | 南部 |
| 5 | 9 | 11 |
HTML表格的標記變化
可以為HTML表格加上表格標題<caption></caption>，以及表格標頭<th></th>，也就是table heading。<th></th>的使用方式其實和<tr></tr>相近，作為標頭它適合用在表格的最上橫列，或是最左直行，效果是可以讓單元格內容加粗顯示。
********表格示例：<caption>和<th>用法
<table border="1">
<caption>此處填入表格的標題</caption>
<tr>
<th>此處為標題1</th>
<th>此處為標題2</th>
<th>此處為標題3</th>
</tr>
<tr>
<td>內容1a</td>
<td>內容2a</td>
<td>內容3a</td>
</tr>
<tr>
<td>內容1b</td>
<td>內容2b</td>
<td>內容3b</td>
</tr>
</table>
表格呈現效果：
| 此處為標題1 | 此處為標題2 | 此處為標題3 |
|---|---|---|
| 內容1a | 內容2a | 內容3a |
| 內容1b | 內容2b | 內容3b |
基本規則：
*即便某個單元格的內容是空白的，也要寫出<td></td>標記來代表該單元格。
*<th>和<td>的差別在於，前者是默認為標題的加粗字。
*有時候我們會需要把表格中的單元格合併，例如把兩個單元格合併為一個，設置的方式如下。
********表格示例：單元格跨列合併
此處演示的是，將最左側上下相鄰的兩個單元格合併，使用的是<rowspan="2">的標記。
<table border="1">
<tr>
<td rowspan="2">內容1a</td>
<td>內容2a</td>
<td>內容3a</td>
</tr>
<tr>
#因第一行已經合併，此處被合併的單元格略過不寫
<td>內容2b</td>
<td>內容3b</td>
</tr>
</table>
表格呈現效果：
| 內容1a | 內容2a | 內容3a |
| 內容2b | 內容3b |
********表格示例：單元格跨行合併
此處演示的是，將第二橫列的第一和第二個單元格合併，使用的是<colspan="2">的標記。
<table border="1">
<tr>
<td>內容1a</td>
<td>內容2a</td>
<td>內容3a</td>
</tr>
<tr>
<td colspan="2">內容1b</td>
#因兩個單元格合併，第二個單元格略過不寫
<td>內容3b</td>
</tr>
</table>
表格呈現效果：
| 內容1a | 內容2a | 內容3a |
| 內容1b | 內容3b | |
HTML表格加上CSS樣式設置
由上面的範例可看到，最基本的HTML表格看起來並不是太美觀，如果想要調整它的樣式，必須加上CSS指令。加入CSS指令有兩種方式，一種是在.css文件中，針對表格的樣式進行設置，例如框線border、外邊距margin、內邊距padding、字型font-family、標題位置caption-side等。如果沒有辦法直接修改.css文件，則可以在<table>、<tr>、<td>等HTML表格的標記中，以屬性style=""的方式加上CSS指令。
常用指令：
margin: 表格邊框與網頁邊緣的距離，可以用像素（px）或百分比（%）來標示，也可以設為auto
border: 表格邊框的樣式和顏色
caption-side: 表格標題的位置
border-spacing: 單元格邊框之間的距離
border-collapse: 把單元格邊框之間的距離定為0
padding: 內邊距，也就是單元格文字與單元格框線的距離
text-align: 文字水平對齊方式，可以是left或center或right
********在.css文件中設置表格樣式
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-spacing: 10px 30px 10px 30px;
border-collapse: collapse;
}
caption {
font-style: italic;
padding-top: 8px;
padding-bottom: 8px;
}
td, th {
border: think dotted gray;
padding: 5px;
}
********在HTML表格標記中加入CSS指令
在HTML表格的標記中加入CSS指令是最直觀的做法。不過它的缺點是，必須逐個表格加入設置，比較瑣碎，而且容易造成不統一的樣式。（如果是在.css文件中設置，就可以控制整個網站網頁中的表格，修改起來也比較簡便快速。）
<table border="1" style="margin-left: auto; margin-right: auto; border: thin solid black; caption-side: top; border-collapse: collapse;">
<caption style="padding: 8px; color: brown; font-style: italic;">此處填入表格的標題</caption>
<tr>
<th style="padding: 5px; width: 150px;">此處為標題1</th>
<th style="padding: 5px;">此處為標題2</th>
<th style="padding: 5px;">此處為標題3</th>
</tr>
<tr style="text-align: center;">
<td style="padding: 5px;">內容1a</td>
<td style="padding: 5px;">內容2a</td>
<td style="padding: 5px;">內容3a</td>
</tr>
<tr>
<td style="padding: 5px;">內容1b</td>
<td style="padding: 5px;">內容2b</td>
<td style="padding: 5px;">內容3b</td>
</tr>
</table>
樣式設置效果：
| 此處為標題1 | 此處為標題2 | 此處為標題3 |
|---|---|---|
| 內容1a | 內容2a | 內容3a |
| 內容1b | 內容2b | 內容3b |
效果說明：
*在<table>中設置margin-left: auto; 以及margin-right: auto;，可以讓表格置中。
*在<th>或<td>中設置width: 150px;，可以指定單元格的寬度（每一個直行只要設置第一個的寬度就可以了。）
*在<tr>中設置text-align: center;，就可以把整個橫列的單元格設置為文字居中。
沒有留言:
張貼留言