<HeadFirst_HTML與CSS> O’REILLY_Chap.13_表格與更多列表

本部落格的FollowMeReading系列初衷是線上的讀書筆記. 為方便後期查閱, 故寫成部落格形式, 使用關鍵字查詢便可以快讀的找到相關的內容.

FollowMeReading系列所選的書籍一般選自O’REILLY或Apress出版社, 儘量保證筆記內容的權威性.

FollowMeReading系列的部落格標題格式為: <書名> 出版社章節數章節名, 方便大家在紙質版書籍中查詢.

FollowMeReading系列博文中的內容大部分是原文, 非原文部分前面將有’博主’字樣提醒.

感謝<HeadFirst_HTML與CSS>作者 Eric Freeman & Elisabeth Robson
感謝<HeadFirst_HTML與CSS>翻譯 徐陽 丁小峰

本部落格由@scott編寫. 若轉載此文章, 請註明出處和作者

正文

原文

BULLTE POINTS(要點):

• HTMl表格用來建立表格資料結構.

• HTML表格元素 <table> , <tr> , <th> , <td> 一起用來建立一個表格.

• <table> 元素定義幷包圍整個表格.

• 表格使用 <tr> 元素按行定義.

• 每行包含一個或多個數據單元格, 分別用 <td> 元素定義.

• 使用 <th> 元素表示作為行或列表頭的資料單元格.

• 表格採用格狀佈局. 每行對應HTML中的一個<tr>......</tr> 行, 每列對應行中的<td>.....</td> 內容.

• 可以用 <caption> 元素提供關於表格的額外資訊.

• 表格有邊框間距, 也就是單元格之間的間距.

• 表格資料單元格還可以有內邊距和邊框.

• 就像能夠控制元素的內邊距, 邊框和外邊距一樣, 可以用CSS控制表格單元格的內邊距, 邊框和邊框間距.

• border-collapse 是針對表格的一個特殊的CSS屬性, 允許將單元格邊框合併為一個邊框, 讓外觀更簡潔.

• 可以用 text-align 和 vertical-align CSS屬性改變表格單元格中資料的對齊方式.

• 可以用 background-color 屬性為表格增加顏色. 可以為整個表格, 各行或者單個的資料單元格增加背景顏色.

• 使用CSS nth-child 偽類可以為表格隔行增加背景顏色.

• 如果一個數據單元格沒有資料, <td> 元素中不放置任何內容. 不過, 需要使用一個 <td>......</td> 元素維持表格的對齊.

• 如果你的資料單元格需要跨多行或多列, 可以使用 <td> 元素的 rowspan 或 colspan 屬性.

• 可以在表格中巢狀表格, 將 <table> 元素及其所有內容放在一個數據單元格中.

• 表格應當用於表示表格資料, 而不是建立頁面佈局. 另一方面, 可以使用CSS表格顯示建立多欄頁面佈局.

• 與所有其他元素一樣, 可以用CSS指定列表的樣式. 有幾個特定於列表的CSS屬性, 如 list-style-type 和 list-style-image.

• list-style-type 允許改變列表中使用的列表標記型別.

• list-style-image 允許指定列表標記影象.