《Head first HTML與CSS 第二版》讀書筆記 第十三章 表格和列表

一、表格

HTML表格元素<table><tr><th><td>一塊兒用來建立一個表格。

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

<tr>表示一行。

<td>表示一個單元格。

<th>用來表示行或列表頭的單元格。

<caption>元素提供表格的額外信息（至關於表格的標題）。默認的，表頭在表格的上方。table的CSS屬性caption-side指定caption的位置，下面的代碼將caption移動的表格下部：

table {
	caption-side:	bottom;
}

對於表格的每一個單元格，有內邊距和邊框，可是沒有外邊距。相對的table有一個border-spacing的CSS屬性定義整個表格每一個單元格共同的外邊距。

也能夠定義垂直和水平方向上的外邊距，例如：

border-spacing: 10px 30px;

將border-collapse的CSS屬性設置爲collapse，能夠使單元格之間沒有邊框間距。瀏覽器會忽略表格上設置的全部邊框間距。另外還會把兩個邊框合併成一個邊框。

 

爲表格設置間隔顏色的兩種實現方法：

（1）定義一個類，爲其設置背景顏色，在須要的表格行<tr>指定其歸屬這個類；

（2）使用僞類nth-child，表示一個元素相對於它兄弟元素的數字順序：

tr:nth-child(2n+1){
	background-color: #fcba7a;
}

這段代碼指定奇數tr的背景顏色。能夠使用n指定簡單的表達式。還能夠使用odd或even表示奇數或偶數元素。

 

使用td的rowspan屬性能夠指定一個單元格佔多少行，colspan指定一個單元格佔多少列。相應的要刪除其佔據位置的行或列。

 

二、列表

li的list-style-type的CSS屬性控制項目符號，默認的值是disc，可選的有circle、square、none。

對於有序列表能夠控制項目序號：decimal十進制數，upper-alpha大寫字母，lower-alpha小寫字母，upper-roman大寫羅馬數字，lower-roman小寫羅馬數字。

list-style-image屬性將項目符號變爲圖像。

list-style-position屬性控制文本回繞。值爲inside表示文本會在標記下回繞，outside表示文本自己迴繞。