前言

這一章的內容主要是處理 HTML 中的 tabular data,可以分為三個部分：

1. 如何在 HTML 中建立表格
2. 如何在 CSS 中 style 表格
3. 如何在 CSS 中 style HTML‘ lists

Creating a table with HTML 使用<table><tr><tb>和<th>

表格中，包括了row，colom,cell還有表頭。在 HTML 中，是通過以 row 的方式來 specify 表格的，然後一行中的 cell 的數量決定了列的數量。
在程式碼中，表格以<table>

<table>
<caption>
    The cities I have visited on my 
    Segway'n USA travels
</caption>
    <tr>
        <th>City</th>
        <th>Date</th>
        <th>Temprature</th>
        <th>Altitude</th>
        <th>Population</th>
        <th>Diner Rating</th>
    </tr>

其中的 用於標明題注，預設位置在表格的上方，可以在 CSS 中更改其位置。

How to style the table

在進行 style 之前，需要先知道 ,的工作原理：它們具有 box model 的特性，同樣具有 content,padding 和 border，但是有一點不同的是，它沒有 margin 這個 property，取而代之的是 border-spacing 這個數值。

border-collapse

如果想要使得兩個 border 合併，可以使 borer-spaing的 value 為 0px; 也可以採用另外一個property,它的名字叫做 border-collapse,
可以這樣設定：
table{
border-collapse:collapse;
}

如何設定表格中行的顏色，如何設定對齊

這個可以採用定義 class 的方法來解決，對於設定行的顏色，有一個更好的設定的辦法，那就是利用一個 psedo-class ，它的名字叫做 nth-child。
child 的含義是 HTML 中包含在一個元素中的元素，nth-child 這個引數用來表示 the numerical order of an element in relation to its siblings elements.
比如，想要使得表格中的奇數行或者偶數行變成不同的顏色，可以這樣：
tr:nth-child(odd){
background-color:#fcba7a;
}
中的 nth-child(odd)寫成 nth-child(2n+1)的格式。

rowspan,colspan 引數

如果有相同的資訊，可以將兩行資訊合併成一行，這裡就會用到 rowspan 引數，其設定的方法如下：

當設定了之後，那麼在下一個 元素中的對應的 元素的位置就不需要進行任何的設定了。
同樣，對於列來說，也有 colspan 引數

在表格中巢狀表格

可以在<td>中間巢狀<table>

關於 CSS 中的 list

關於 list ，可以對中的 markers 進行設定，設定的引數有：

• list-type-style:對於 ol 和 ul 有不同的引數，ul 有disc,circle,square和none,對於 ul 有decimal,upper-alpha,lower-alpha,upper-roman,lower-roman,其用於設定 built-in marker.
• list-type-image:url(images/backpack.gif")用來設定一個圖片作為專案符號
• list-style-positon:有兩個引數，inside 和 outside,用於文字換行的時候，文字是換在專案符號下面還是換在文字的下面。