9.1 使用屬性
在 HTML 中對表格進行樣式設計可以有多種方式。其中之一是直接在表格標籤和元素中使用屬性。雖然現代網頁開發者通常更喜歡使用 CSS 來設計樣式，但了解 HTML 屬性對於基本樣式設計還是很有幫助的。
表格的基本屬性
屬性 border
定義表格邊框的厚度。通常以像素為單位指定值。
HTML
<table border="1">
<tr>
<th>名字</th>
<th>評分</th>
</tr>
<tr>
<td>伊凡</td>
<td>91</td>
</tr>
<tr>
<td>瑪麗亞</td>
<td>94</td>
</tr>
<tr>
<td>妮娜</td>
<td>89</td>
</tr>
</table>
屬性 cellpadding：
定義單元格的內邊距（單元格內部邊界的空隙）。
HTML
<table cellpadding="10">
<tr>
<th>名字</th>
<th>評分</th>
</tr>
<tr>
<td>伊凡</td>
<td>91</td>
</tr>
<tr>
<td>瑪麗亞</td>
<td>94</td>
</tr>
<tr>
<td>妮娜</td>
<td>89</td>
</tr>
</table>
屬性 cellspacing：
定義單元格之間的距離。
HTML
<table cellspacing="5">
<tr>
<th>名字</th>
<th>評分</th>
</tr>
<tr>
<td>伊凡</td>
<td>91</td>
</tr>
<tr>
<td>瑪麗亞</td>
<td>94</td>
</tr>
<tr>
<td>妮娜</td>
<td>89</td>
</tr>
</table>
屬性 width 和 height:
定義表格的寬度和高度。這些屬性也可以在 <td> 和 <th> 標籤中使用來設置單元格的尺寸。
HTML
<table style="text-align: left;" width="100%" height="200">
<tr>
<th width="50%">名字</th>
<th width="25%">項目</th>
<th width="25%">城市</th>
</tr>
<tr>
<td>愛麗絲</td>
<td>25</td>
<td>巴黎</td>
</tr>
</table>
屬性 align:
定義表格在頁面上的對齊方式（left, right, center）。
HTML
<table align="center">
<tr>
<th>名字</th>
<th>評分</th>
</tr>
<tr>
<td>伊凡</td>
<td>91</td>
</tr>
<tr>
<td>瑪麗亞</td>
<td>94</td>
</tr>
<tr>
<td>妮娜</td>
<td>89</td>
</tr>
</table>
屬性 bgcolor:
定義表格或單元格的背景顏色。
HTML
<table bgcolor="#f0f0f0">
<tr>
<th>名字</th>
<th>評分</th>
</tr>
<tr>
<td>伊凡</td>
<td>91</td>
</tr>
<tr>
<td>瑪麗亞</td>
<td>94</td>
</tr>
<tr>
<td>妮娜</td>
<td>89</td>
</tr>
</table>
9.2 表格單元格的屬性
表格單元格的屬性
屬性 colspan:
合併單元格橫向。
HTML
<td colspan="2">合併的單元格</td>
屬性 rowspan:
合併單元格縱向。
HTML
<td rowspan="2">合併的單元格</td>
屬性 align:
定義單元格內容的水平對齊方式（left, right, center）。
HTML
<td align="center">居中的文字</td>
屬性 valign:
定義單元格內容的垂直對齊方式（top, middle, bottom）。
HTML
<td valign="top">靠上邊界的文字</td>
屬性 bgcolor:
定義單元格的背景顏色。
HTML
<td bgcolor="#ffcc00">有色背景</td>
9.3 完整示例
具有屬性樣式的完整表格示例：
HTML
<table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
<caption>學生名單及其評分</caption>
<thead bgcolor="#c0c0c0">
<tr>
<th align="left">名字</th>
<th align="center">年齡</th>
<th align="right">城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>伊凡</td>
<td align="center">30</td>
<td align="right">倫敦</td>
</tr>
<tr>
<td colspan="2" align="center">瑪麗亞和彼得</td>
<td align="right">利物浦</td>
</tr>
<tr>
<td rowspan="2" valign="middle">安娜</td>
<td>25</td>
<td>曼徹斯特</td>
</tr>
<tr>
<td>27</td>
<td>利茲</td>
</tr>
</tbody>
<tfoot>
<td colspan="3" align="center">表格結束</td>
</tfoot>
</table>
示例說明
border="1": 設置表格邊框為1像素厚cellpadding="10": 設置所有表格單元格內邊距為10像素cellspacing="5": 設置表格單元格之間的距離為5像素width="80%": 設置表格寬度為父元素寬度的80%align="center": 將表格居中在頁面上bgcolor="#e0e0e0": 設置表格的背景顏色<caption>: 添加表格標題-
<thead>和<tbody>: 將表格標題和內容分組。標題的背景顏色使用bgcolor="#c0c0c0"設置 <th>和<td>: 用於定義標題和數據單元格<align>和<valign>: 定義單元格內容的水平和垂直對齊方式<colspan>和<rowspan>: 橫向和縱向合併單元格
GO TO FULL VERSION