Chap 06 HTML使用表格

6.1  建立表格 
表格是網頁排版佈局不可缺乏的一個工具，可否熟練地運用表格將直接影響到網頁佈局的好壞。
6.1.1 表格的基本構成 table、tr、td
表格由行、列和單元格3部分組成，通常經過3個標記來建立，分別是表格標記table、行標記tr和單元格標記td。表格的個彙總屬性都要在表格的開始標記<table>和</table>之間纔有效。
行：表格中的水平間隔。
列：表格中的垂直間隔。
單元格：表格中行與列相交所產生的區域。
語法：
<table>
<tr>
<td>第1列單元格1內的文字</td>
<td>第1列單元格2內的文字</td>
</tr>
<tr>
<td>第2列單元格1內的文字</td>
<td>第2列單元格2內的文字</td>
</tr>
</table>

6.1.2 設置表格的標題caption
可以使用<caption>設置標題單元格，表格的標題通常位於整個表格的第1行，一個<table>表格只能含有一個表格標題。
語法:
<caption>表格的標題</caption>

6.1.3 表頭th
表格的表頭<th>是<td>單元格的一種變體，實質上還是一種單元格。它通常位於第一行和第一列，用來代表這一行或列的內容類別。在通常狀況下， 瀏覽器會以粗體和居中的樣式顯示<th>元素中的內容。                                                  
語法：
<table>
<tr>
<th>80</th>
……
</tr>
<tr>
<td>單元格內的內容</td>
<td>單元格內的內容</td>
</tr>
</table>
說明：
<th>元素的起始標記必須有，可是結尾標記是可選的。

6.2 表格基本屬性
6.2.1 表格高度height
weight屬性用以設置表格的寬度。如若不指定表格寬度，瀏覽器會根據表格內容的多少自動調整寬度。表格寬度的值能夠是像素值，也能夠爲百分比。
語法：
<table width="表格寬度">

6.2.2  表格高度height
語法：
<table height="表格高度">
表格高度的值能夠是像素值，也能夠爲百分比。

6.2.3 表格對齊方式
可使用表格的align屬性來設置表格的對齊方式。
語法:
<table align="對齊方式">
align參數：
left：整個表格在瀏覽器頁面中左對齊。
center：整個表格在瀏覽器頁面中居中對齊。
right:整個表格在瀏覽器頁面中右對齊。

6.3 表格的邊框
6.3.1 表格邊框寬度border
默認狀況下若是不指定border屬性，則瀏覽器將不顯示錶格邊框。
語法：
<table border="邊框寬度">
說明： 只有設置border值不爲0，在網頁中才能顯示出表格的邊框。

6.3.2 表格邊框顏色bordercolor
默認狀況下表格邊框顏色是灰色的，可使用bordercolor設置邊框顏色。可是設置邊框顏色的前提是邊框的寬度不能爲0，不然沒法顯示出邊框的顏色。
語法：
<table border="邊框寬度" bordercolor="邊框顏色">
說明：邊框寬度值不能爲0，邊框顏色爲16進制的顏色值。

6.3.3 內框寬度cellspacing 
表格的內框寬度屬性cellspacing用於設置表格內每一個單元格之間的間距。
語法：
<table cellspacing="內框寬度值">
說明：內框寬度的單位是像素。

6.3.4 表格內文字與邊框間距cellpadding
在默認狀況下，單元格里的內容會緊貼着表格的邊框，可以使用cellpadding來設置單元格邊框與單元格里的內容之間的距離。
語法：
<table cellpadding="文字與邊框間距值">
說明：間距值以像素爲單位，根據須要設置，但不能過大。

6.4 表格背景
6.4.1 表格背景顏色bgcolor
表格的背景顏色屬性bgcolor是針對整個表格的、bgcolor定義的顏色能夠被行、列或單元格所定義的顏色所覆蓋。
語法：
<table bgcolor="背景顏色">

6.4.2 表格背景圖像
語法：
<table background="背景圖像地址">
說明：背景圖像地址能夠爲相對地址，也能夠爲絕對地址。

6.5 表格的行屬性
不只能夠對錶格總體設置相關屬性，還能夠對單獨的一行單元格設置相關屬性。

6.5.1 高度控制height
語法：
<tr height="行的高度">

6.5.2 邊框顏色bordercolor
語法：
<tr bordercolor="邊框的顏色">

6.5.3 行背景bgcolor、background
行的bgcolor或background屬性僅做用於當前行。這裏設置的bgcolor顏色能夠覆蓋<table>的bgcolor或background屬性，不過會被單元格定義的背景顏色所覆蓋。
語法：
<tr bgcolor="行的背景顏色">
說明:默認設置爲透明色，即和文檔背景顏色相同。

6.5.4  行文字的水平對齊方式
<tr>的align屬性用來控制表格當前行的水平對齊方式。它不受表格總體對齊方式的影響，卻可以被單元格的對齊方式所覆蓋。
語法：
<tr align="水平對齊方式值">

6.5.5 行文字的垂直對齊方式valign
<tr>的valign用來控制表格對當前行的垂直對齊方式。垂直對齊方式有3種，分別是top、middle和bottom，對應：行文字頂端、居中、底部對齊三種對齊方式。
語法：
<tr valign="垂直對齊方式">

6.6 單元格屬性 
單元格是表格中最基本的單位。<td>單元格所有包含在行<tr>中，一個行裏能夠自由任意多個單元格。能夠自定義設置單元格的各項屬性，這些樣式將覆蓋<table>和<tr>已經定義的樣式。

6.6.1 單元格大小width、height
默認狀況下，單元格的寬度和高度會根據內容自動調整，也能夠經過width、height設置單元格的寬度和高度。
語法：
<td width="單元格寬度" height="單元格高度">

6.6.2 水平跨度colspan
在設計表格時，有時須要將兩個或更多的相鄰單元格合併成一個單元格。
語法：
<td colspan="跨度的列數">
舉例：<td colspan="2" align="center" >2016年最流行的四大款式</td>

6.6.3 垂直跨度rowspan
單元格除了能夠在水平方向上跨列，還能夠在垂直方向上跨列。
語法：
<td rowspan="跨列的行數">

6.6.4 對齊方式align、valign
語法：
<td align="水平對齊方式" valign="垂直對齊方式">
align取值：left/right/center     valign取值:top/middle/bottom

6.6.5 單元格的背景色
語法：
<td bgcolor="背景顏色">

6.6.6單元格的邊框顏色
語法：
<td bordercolor="邊框顏色">

6.6.7 單元格的亮邊框bordercolorlight
單元格的亮邊框就是單元格邊框向光的部分。經過bordercolorlight能夠設置單元格亮邊框的顏色。
語法：
<td bordercolorlight="亮邊框的顏色">

6.6.8 單元格的暗邊框bordercolordark
單元格暗邊框就是單元格邊框背光的部分。經過bordercolordark能夠設置單元格暗邊框的顏色。
語法：
<td bordercolordark="暗邊框的顏色">

6.6.9 單元格的背景圖像background
語法：
<td background="背景圖像地址">

6.7 表格的結構
6.7.1 表格的表首標記<thead>
<thead>用於定義表格最上端表首的樣式，能夠設置背景顏色、文字對齊方式、文字的垂直對齊方式等。
語法：
<thead bgcolor="背景顏色" align="對齊方式">
說明：在<thead>標記內還能夠包含<td>、<th>和<tr>標記，而一個表元素中只能有一個<thead>標記。

6.7.2 表格的表主體標記<tbody>
<tbody>用於統一設計表主體部分的樣式。
語法：
<tbody bgcolor="背景煙色" align="對齊方式">
……
</tbody>
說明：一個表元素中只能有一個<tbody>標記。

6.7.3 表格的表尾標記<tfoot>
tfoot用於定義表格的表尾樣式。
語法：
<tfoot bgcolor="背景煙色" align="對齊方式">
……
</tfoot>
說明：一個表元素中只能有一個<tfoot>標記。