學習隨筆——表格——2020.11.12

學習隨筆——表格——2020.11.12

（一）表格的基本元素

• table表格標籤
• tr：表格的行（tr是table row（表格行）的縮寫
• td：單元格（td是“table data（表格資料）的縮寫
• 資料單元格：包括文字，圖片，列表，段落，表單，水平線，表格等等

<table>...........表格開始標籤
	<tr>.....行開始標記
		<td></td>單元格標記
	</tr>.....行結束標記
	<tr>
		<td></td>
	</tr>
</table>.........表格結束標記

（二）表格的其他元素
1.表頭標籤th

• th：表頭單元格（th是table head的縮寫，大多瀏覽器會把表頭顯示為粗體居中的文字
• 表頭單元格標記，是特殊的單元格，文字會自動加粗，居中，它的用法是取代的位置即可
• 放在第一行，就是列表頭
• 放在每一行的第一列，就是行表頭

2.<caption></caption>定義表格標題
3.<thead></thead>定義表格的行表頭。該標籤用於組合HTML表格的表頭內容
4.<tbody></tbody>定義表格的主體，即單元格
5.<tfoot></tfoot>定義表格的頁尾（腳註，表注）
tbody可以有多個，thead和tfoot只能有一個

（三）表格元素及其屬性
1.table的基本屬性

• width，height 寬高(單位是畫素或%)
• align 對齊——left,center,right
• border 外邊框
• bordercolor 外邊框顏色
• bgcolor 背景色
• background 背景圖片
• cellspacing 單元格間距（預設2）
• cellspacing 表格邊框與內容的間距 （預設0）
• style = “border-collapse:collapse;”

2.行標籤tr的屬性

• height 高（單位是畫素或%）
• align 水平對齊——left/center/right
• bgcolor 背景色
• valign 垂直對齊——top/middle/bottom

3.單元格td的屬性

• width:高（單位是畫素或%）
• height：寬（單位是畫素或%）
• align：水平對齊——left/center/right
• valign垂直對齊——top/middle/bottom
• bgcolor 背景色
• background 背景圖片
• colspan跨列（column）
• rowspan跨行（row）

（四）表格的應用案例

1. 普通表格的製作
2. 表格巢狀
3. 表格的行合併和列合併