HTML基礎2(表格)

標籤：跨行   log   tags   http   not   列表   技術分享   other   html基礎   

HTML 表格

• HTML 映像
• HTML 列表

你可以使用 HTML 建立表格。

執行個體

表格

這個例子示範如何在 HTML 文檔中建立表格。

表格邊框

本例示範各種類型的表格邊框。

（可以在本頁底端找到更多執行個體。）

表格

表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割為若干儲存格（由 <td> 標籤定義）。字母 td 指表格式資料（table data），即資料儲存格的內容。資料儲存格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

在瀏覽器顯示如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格和邊框屬性

如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。

使用邊框屬性來顯示一個帶有邊框的表格：

<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>

表格的表頭

表格的表頭使用 <th> 標籤進行定義。

大多數瀏覽器會把表頭顯示為粗體置中的文本：

<table border="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

在瀏覽器顯示如下：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格中的空儲存格

在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個儲存格是空的（沒有內容），瀏覽器可能無法顯示出這個儲存格的邊框。

<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td></td><td>row 2, cell 2</td></tr></table>

瀏覽器可能會這樣顯示：

注意：這個空的儲存格的邊框沒有被顯示出來。為了避免這種情況，在空儲存格中添加一個空格預留位置，就可以將邊框顯示出來。

<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>&nbsp;</td><td>row 2, cell 2</td></tr></table>

在瀏覽器中顯示如下：

row 1, cell 1	row 1, cell 2
	row 2, cell 2

更多執行個體

沒有邊框的表格

本例示範一個沒有邊框的表格。

表格中的表頭(Heading)

本例示範如何顯示表格表頭。

空儲存格

本例展示如何使用 "&nbsp;" 處理沒有內容的儲存格。

帶有標題的表格

本例示範一個帶標題 (caption) 的表格

 

跨行或跨列的表格儲存格

本例示範如何定義跨行或跨列的表格儲存格。

 

表格內的標籤

本例示範如何顯示在不同的元素內顯示元素。

儲存格邊距(Cell padding)

本例示範如何使用 Cellpadding 來建立儲存格內容與其邊框之間的空白。

 

儲存格間距(Cellspacing)

本例示範如何使用 Cellspacing 增加儲存格之間的距離。

 

向表格添加背景顏色或背景映像

本例示範如何向表格添加背景。

 

向表格單元添加背景顏色或者背景映像

本例示範如何向一個或者更多表格單元添加背景。

 

 

在表格單元中排列內容

本例示範如何使用 "align" 屬性排列儲存格內容,以便建立一個美觀的表格。

 

架構(frame)屬性

本例示範如何使用 "frame" 屬性來控制圍繞表格的邊框。

 

表格標籤

表格	描述
<table>	定義表格
<caption>	定義表格標題。
<th>	定義表格的表頭。
<tr>	定義表格的行。
<td>	定義表格單元。
<thead>	定義表格的頁首。
<tbody>	定義表格的主體。
<tfoot>	定義表格的頁尾。
<col>	定義用於表格列的屬性。
<colgroup>	定義表格列的組。

HTML基礎2(表格)