目錄
可以使用 HTML 創(chuàng)建表格。
實(shí)例
表格
這個(gè)例子演示如何在 HTML 文檔中創(chuàng)建表格。
表格邊框
本例演示各種類型的表格邊框。
（。）
表格
表格由 標(biāo)簽來定義。每個(gè)表格均有若干行（由 標(biāo)簽定義），每行被分割為若干單元格（由
標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
在瀏覽器顯示如下：
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
表格和邊框?qū)傩?/p>
如果不定義邊框?qū)傩?strong>ie11表格邊框無法顯示，表格將不顯示邊框。有時(shí)這很有用ie11表格邊框無法顯示，但是大多數(shù)時(shí)候，我們希望顯示邊框。
使用邊框?qū)傩詠盹@示一個(gè)帶有邊框的表格：
Row 1, cell 1
Row 1, cell 2
表格的表頭
表格的表頭使用 標(biāo)簽進(jìn)行定義。
大多數(shù)瀏覽器會(huì)把表頭顯示為粗體居中的文本：
Heading
Another Heading
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
在瀏覽器顯示如下：
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
表格中的空單元格
在一些瀏覽器中，沒有內(nèi)容的表格單元顯示得不太好。如果某個(gè)單元格是空的（沒有內(nèi)容），瀏覽器可能無法顯示出這個(gè)單元格的邊框。
row 1, cell 1
row 1, cell 2
row 2, cell 2
瀏覽器可能會(huì)這樣顯示：
注意：這個(gè)空的單元格的邊框沒有被顯示出來。為了避免這種情況，在空單元格中添加一個(gè)空格占位符，就可以將邊框顯示出來。
row 1, cell 1
row 1, cell 2
row 2, cell 2
在瀏覽器中顯示如下：
row 1, cell 1
row 1, cell 2
row 2, cell 2
更多實(shí)例
沒有邊框的表格
本例演示一個(gè)沒有邊框的表格。
表格中的表頭()
本例演示如何顯示表格表頭。
空單元格
本例展示如何使用 "" 處理沒有內(nèi)容的單元格。
帶有標(biāo)題的表格
本例演示一個(gè)帶標(biāo)題 () 的表格
跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。
表格內(nèi)的標(biāo)簽
本例演示如何顯示在不同的元素內(nèi)顯示元素。
單元格邊距(Cell )
本例演示如何使用 Cell 來創(chuàng)建單元格內(nèi)容與其邊框之間的空白。
單元格間距(Cell )
本例演示如何使用 Cell 增加單元格之間的距離。
向表格添加背景顏色或背景圖像
本例演示如何向表格添加背景。
向表格單元添加背景顏色或者背景圖像
本例演示如何向一個(gè)或者更多表格單元添加背景。
在表格單元中排列內(nèi)容
本例演示如何使用 "align" 屬性排列單元格內(nèi)容,以便創(chuàng)建一個(gè)美觀的表格。
框架(frame)屬性
本例演示如何使用 "frame" 屬性來控制圍繞表格的邊框。
表格標(biāo)簽 表格描述
">
定義表格
">
定義表格標(biāo)題。
">
定義表格的表頭。
">
定義表格的行。
">
定義表格單元。
">
定義表格的頁(yè)眉。
">
定義表格的主體。
">
定義表格的頁(yè)腳。
">
定義用于表格列的屬性。
">
定義表格列的組。
一個(gè)完整的實(shí)例
Table
這個(gè)表格沒有邊框：(沒有定義邊框參數(shù))
100
200
300
400
500
600
這個(gè)表格也沒有邊框：(邊框參數(shù)寬度為0)
100
200
300
400
500
600
表頭：
姓名
電話
電話
Bill Gates
555 77 854
555 77 855
垂直的表頭：
姓名
Bill Gates
電話
555 77 854
電話
555 77 855
Some text
Some text
Some text
正如您看到的，其中一個(gè)單元沒有邊框。這是因?yàn)樗强盏摹Ｔ谠搯卧胁迦胍粋€(gè)空格后，仍然沒有邊框。
我們的技巧是在單元中插入一個(gè) no-breaking 空格。
no-breaking 空格是一個(gè)字符實(shí)體。如果您不清楚什么是字符實(shí)體，請(qǐng)閱讀關(guān)于字符實(shí)體的章節(jié)。
no-breaking 空格由和號(hào)開始 ("&")，然后是字符"nbsp"，并以分號(hào)結(jié)尾(";")。
這個(gè)表格有一個(gè)標(biāo)題，以及粗邊框：
我的標(biāo)題
100
200
300
400
500
600
橫跨兩列的單元格：
姓名
電話
Bill Gates
555 77 854
555 77 855
橫跨兩行的單元格：
姓名
Bill Gates
電話
555 77 854
555 77 855
表格內(nèi)也可以使用標(biāo)簽:
這是一個(gè)段落。
這是另一個(gè)段落。
這個(gè)單元包含一個(gè)表格：
A
B
C
D
這個(gè)單元包含一個(gè)列表：
- 蘋果
- 香蕉
- 菠蘿
HELLO
沒有 cellpadding：
cellpadding:單元格邊距（單元格內(nèi)容與其邊框之間的空白）
First
Row
Second
Row
帶有 cellpadding：
First
Row
Second
Row
沒有 cellspacing：
cellspacing:單元格間距（單元格之間的距離）
First
Row
Second
Row
帶有 cellspacing：
First
Row
Second
Row
背景顏色：
First
Row
Second
Row
背景圖像：
First
Row
Second
Row
單元格背景：
First
Row
Second
Row
消費(fèi)項(xiàng)目....
一月
二月
衣服
$241.10
$50.20
化妝品
$30.00
$44.45
食物
$730.40
$650.00
總計(jì)
$1001.50
$744.65
注釋：frame 屬性無法在 Internet Explorer 中正確地顯示。
Table with frame="box":
Month
Savings
January
$100
Table with frame="above":
Month
Savings
January
$100
Table with frame="below":
Month
Savings
January
$100
Table with frame="hsides(horizontal sides)":
Month
Savings
January
$100
Table with frame="vsides(vertical sides)":
Month
Savings
January
$100
本例涉及到的資源 .jpg
.gif