web前端基礎：HTML表格

表格簡述

表格是在製作網頁的重要武器。諸如讓自己的頁面有底色、底圖
之類的修飾，只能通過表格來實現。表格是一個可自定義的容器，因
而它就是我們用以實現頁面構設的利器。
把表格稱作容器緣於表格的裝載特性。表格是用於裝載數據的，
與我們現實中所看到和理解的表格非常一致。表格不僅僅只能裝載數
據，它還被廣泛地應用於網頁的佈局，這與表格可以將其所在區域劃
分爲行和列即諸多單元格密切相關。頁面佈局將因使用了表格而可以
隨心所欲地排版。
在 HTML 裏，表格有表頭、表體、單元格、行、列等等概念，通
過學習、領會和實踐，是能夠逐漸掌握的。
◆表格標籤基本代碼構成表達式
以下是一個完整的表格標籤代碼框架，爲了能夠一目瞭然，各元
素尚未引入它們的屬性：

<table>
	<tbody>
		<tr>
			<td>內容</td>
		</tr>
	</tbody>
</table>

◆認識基本表格
一個表由＜table＞開始， ＜/table＞結束，表的內容由 ＜tr
＞,＜th＞和＜td＞定義。＜tr＞說明表的一個行，表有多少行就有多
少個＜tr＞；＜th＞說明表的列數和相應欄目的名 稱，有多少個欄
就有多少個＜th＞；＜td＞則填充由＜tr＞和 ＜th＞組成的表格。
表格重要的基本標記不多，但每個標記都有很多的屬性，所以還
是從表格的外觀(即瀏覽器中顯示的表格的樣式)來了解最基本的屬
性。
表格的最基本標記爲＜table＞、＜tr＞、＜td＞，可以先樹立這
樣一個概念：描述整個表格的屬性標記放在＜table＞裏，描述單元
格的屬性標記放在＜tr＞、＜td＞裏。
◆表格標籤基代本碼解析：
<table>：表格的起始符。任意一個表格的開始都必須以它開頭，
且必須有終止符。
<tbody>：表體的起始符。緊跟在<table>之後，表示表體開始。
必須有結尾符，放在</table>之前。避免導致代碼出錯。
<tr>：tr 的作用是規定表格的行，其中，t 是 table，r 是 row（行）。
有多少組 tr，這張表格就有多少行。<tr>緊跟在<tbody>之後。必
須有終止符。
<td>：td 的作用是規定表格的列，t 是 table，d 可理解爲 down
（向下）。有多少組 td，這張表格就有多少列。第一個<td>緊跟在
<tr>之後。終止符爲</td>。td 與 tr 配合構成單元格。</td>、</tr>、</tbody>、</table>這些都是相應元素的終止符，表示相應元素所規範的內容結束。必須注意它們的排列順序，不能有錯。
從表格的代碼框架分析得出：表格標籤裏，所有元素都成對出現，
而這些元素是按照從大到小的順序從外往裏層層包裹的。table 最大，
它佔在起始和終結的位置，tbody 是老二，tr 是老三，td 最小，它
在最裏層。
◆表格標籤常用屬性與參數設置：

屬性	值	描述
width	pixels、%	規定表格的寬度
align	left、center、right	表格相對周圍元素的對齊方式
border	pixels	規定表格邊框的寬度
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	表格的背景顏色
cellpadding	pixels、%	單元邊沿與其內容之間的空白
cellspacing	pixels、%	單元格之間的空白
frame	屬性值	規定外側邊框的那個部分是可見的
rules	屬性值	規定內側邊框的哪個部分是可見的

屬性	值	描述
frame	viod	不顯示外側邊框。
	above	顯示上部的外側邊框。
	below	顯示下部是外側邊框。
	hsides	顯示上部和下部的外側邊框。
	vsides	顯示左邊和右邊的外側邊框。
	lhs	顯示左邊的外側邊框
	rhs	顯示右邊的外側邊框。
	box	在所有四個邊上顯示外側邊框。
	border	在所有四個邊上顯示外側邊框。

屬性	值	描述
rules	none	沒有線條。
	groups	位於行組和列組之間的線條。
	rows	位於行之間的線條。
	cols	位於列之間的線條。
	all	位於行和列之間的線條。

1、border：表格邊框線寬度。用於指定在邊框外圍添加的那些
不同樣式的線段參數。
例如：border=1，表示表格邊框的粗細爲 1 個像素（默認值），
參數爲 0 時表示沒有邊框線。

2、cellspacing：單元格間距。用於指定單元格之間的距離參數，
當一個表格有多個單元格時，各單元格的距離就是 cellspacing 指定
的參數值了，如若表格只有一個單元格，那麼，這個單元格與表格上、
下、左、右邊邊框的距離也是 cellspacing。
例如：cellSpacing=10；這裏的數字 10，是指 10px。

3、cellpadding：單元格邊距，也可叫做襯距。用於指定該單元
格里的內容與 cellspacing 區域的距離參數。
例如：cellpadding=5 ；這裏的數字 5，是指 5px。則表示單
元格里的內容與表格周邊邊框的距離。

4、width：表格的寬度。取值從 0 開始，默認以像素爲單位，與
顯示器的分辨率的像素是一致的。例如：width=“650”。
在設置表格的寬度時要充分考慮顯示分辨率問題，如果表格設置
的像素寬度太大，那麼，得出的效果將導致 IE 的橫向滾動條出現，
只有通過滑動它才能看到表格最右邊的內容。width 的取值還可以使
用百分比，例如：width=“100%”，這種賦值法有個好處：表格的寬
度將根據可顯示的寬度來自我調整寬度。

5、height：表格的高度，取值方法同 width。提示：如果不是
特別需要，不用設置表格的高度，系統會根據表格的內容自動設置高
度。所謂特別的需要，是指一些特殊的情形下，需要表格的高度精確，
比如，當我們通過表格的背景來發一張圖片時，如果表格的高度不精
確定義，圖片就不可能完整或完美地顯示。

6、bgcolor：表格的背景色。取值方法舉例：bgcolor=#ff0000
或 bgcolor=red。單元格也可有此屬性，如果設置了表格的背
景色，又設置表格單元格的背景色，得出的效果將是值得試試的，這
種情況主要用於多單元格的表格。

7、background：表格的背景圖。其值爲一個有效的圖片地址。

也有此屬性。

8、bordercolor：表格的邊框顏色，當 border 值不爲 0 時設置
此值有效。取值同 bgcolor。

9、bordercolorlight：亮邊框顏色，當 border 值不爲 0 時設置
此值有效。亮邊框指表格的左邊和上邊的邊框。

10、bordercolordark：暗邊框顏色，當 border 值不爲 0 時設
置有效。暗邊框指表格的右邊和下邊的邊框。

11、border-style：邊框線樣式，表達方式爲：
style=“border-style: groove;”

12、align：表格的對齊方式，值有 left（左對齊，默認）、center
（居中）以及 right（右對齊）。
align 定義的是表格自身的位置，這是一個很有用的屬性，強烈
建議使用它來規定表格的對齊方式，儘量不要使用<p align=?>表格
</p>、<div align=?>表格</div>和<center>表格</center>之類
的標籤來規定表格的位置，因爲這麼做將導致添加許多廢碼！此外，
當表格的寬度設置爲 100%，或者，表格的寬度設置成了佔滿它所在
的容器的寬度，沒有必要定義 align 屬性。
★單元格屬性設置
從表格的整體外觀上看，單元格是表格的基本構成單元，一張表
格至少要有一個單元格。單元格由共同組成，
但在一組裏，可以擁有多組，有多少組 td 該表格就有多
少列；同樣，一張表格可以擁有多組 tr，表格有多少組 tr 就有多少
行。顯而易見，構成表格最小單元的 td，它的屬性設置是不可忽視
的。
單元格的屬性設置主要體現在裏，除了在上面學到的bgcolor 等之外，還有許多屬性需要掌握，令人高興的是，很多屬性的設置方法都是和

屬性設置一樣的，如 width、height、bordercolor 等。對於 width，在運用時要特別注意。好的習慣是，如果是一個單元格的表格，假設在<table>裏設置了其寬度，那麼，就不必再設置<td>的寬度了，因爲這是多餘的，如果再另行這麼設置：<td width="100%">，顯然只是增加了代碼量，它沒有任何作用——當有了表格寬度，單元格的寬度會自動佔滿表格的寬度。但應引起重視的是：在多列表格里，<td>的寬度就應該設置，如若不設置，系統會自動按各單元格里的內容的佔位情況自行分配寬度，效果是可想而知的。
單元格的 bordercolor 設置有些講究，主要用於實現單像素的表格邊框——要實現這種效果，要求表格的 border 爲 1，且<table>裏設置了 bordercolor 顏色值，cellpadding 和 cellspacing 都設置爲 0，然後將<td>的bordercolor 顏色值設置爲與<td>的背景色相一致。
單元格的最爲重要的屬性應該爲 align 和 valign，align 規範單元格里的內容的水平對齊方式，valign 則規定垂直方向的對齊方式——請特別注意：它們規定的對齊方式是單元格里面的內容，而不象表格裏的 align 那樣定義自身的位置！
align 取值方法和前面介紹的一樣，valign 的取值方法主要有：left
（左對齊）、middle（居中）、top（靠頂）、bottom（靠底）等。
<tr>標籤屬性：

屬性	值	描述
align	Left、center、right、justify、char	行內容的水平對齊
valign	top、middle、bottom、baseline	行內容的垂直對齊
bgcolor	•rgb(x,x,x)•#xxxxxx•colorname	行的背景顏色。

<td>和<th>標籤屬性

屬性	值	描述
align	Left、center、right、justify、char	單元格內容的水平對齊
valign	top、middle、bottom、baseline	單元格內容的垂直對齊
bgcolor	•rgb(x,x,x) •#xxxxxx •colorname	單元格的背景顏色。
width	•%•pixels	單元格的寬度
height	•%•pixels	單元格的高度

<thead>、<tbody>和<tfoot>標籤屬性

屬性	值	描述
align	Left、center、right、justify、char	水平對齊
valign	top、middle、bottom、baseline	垂直對齊

帶表頭的表格

<table>
	<tr>
		<th>…</th>   <!– 表格頭，內容居中、加粗顯示-->
		…
	</tr>
	<tr>
		<td>…</td>
		…
	</tr>
	…
</table>

帶標題的表格

<table>
	<caption>…</caption>    <!– 表格標題，居中顯示-->
	<tr>
		<th>…</th>
		…
	</tr>
	<tr>
		<td>…</td>
		…
	</tr>
	…
</table>

帶結構的表格

表格劃分三部分：表頭、主體、腳註
• thead：表格的頭 （放表格的表頭）
• tbody：表格的主體 （放數據本體）
• tfoot：表格的腳 （放表格的腳註）

<table>
	<caption>…</caption>
	<thead>
		<tr>
			<th>表頭</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>主體</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>腳註</td>
		</tr>
	</tfoot>
</table>