超文字標記語言/表格

表格用於呈現表格資料。它們可以插入頁面上的任何位置，甚至可以在其他表格中插入。我們將看一下建立一個基本表格，然後向其中新增許多標籤，以便我們可以看到結果是什麼。這裡最重要的是實驗。建立表格時最實用的標籤是 <table> - 表格，<tr> - 表格行，<td> - 表格資料，以及 <th> - 表格標題。

最小表格

讓我們先看一個快速示例

 <table>
 <tr><th>Food</th><th>Price</th></tr>
 <tr><td>Bread</td><td>$2.99</td></tr>
 <tr><td>Milk</td><td>$1.40</td></tr>
 </table>

每個表格都以 <table> 標籤開頭，並以 </table> 標籤結尾。在表格標籤中，您可以定義表格的屬性，您將在後面看到。

表格包含行，每行都以 <tr> 表格行標籤開頭，並可選地以 </tr> 標籤結尾。行必須在表格內。

行包含單元格，每個單元格都以 <td> 表格資料標籤開頭，並可選地以 </td> 標籤結尾。單元格必須在行內。

如果您將表格單元格放在行外，或者忘記關閉單元格、行或表格，則會產生不可預測的結果。原本應該在表格中的文字可能會出現在表格外的意外位置。最糟糕的是，整個表格內容將不會顯示。

例如，在 IE 和 Firefox 中

• 行外的單元格被視為在相關垂直位置的單獨行中
• 所有在單元格之外的內容，無論是否在行內，都放在整個表格之前，按照其出現的順序；IE 將每個專案放在新行上；Firefox 不會，但在某些情況下會在專案之間放置一個空格。

如果省略可選的 </td> 和 </tr>，則以上內容指的是第一行之前的內容，以及第一行之前的行中的第一個元素之前的內容。請注意，</table> 是必需的；如果忘記它，所有後續內容都將被視為最後一行的最後一個單元格的一部分，即使是其他表格也是如此。

任務 - 建立表格

1. 開啟您的 default.htm 並將其另存為 table.htm 到相應的資料夾中
2. 在文件的 body 中建立此 HTML 程式碼

 <table>
 <tr><th>Food</th><th>Price</th></tr>
 <tr><td>Bread</td><td>$2.99</td></tr>
 <tr><td>Milk</td><td>$1.40</td></tr>
 </table>

1. 儲存檔案並在瀏覽器中檢視它。

結果是

食物	價格
麵包	$2.99
牛奶	$1.40

它看起來不太像一個表格，但我們很快就會新增更多內容。

注意：此表格由兩行組成（檢視兩個 <tr> 標籤），並且每行內有兩個資料條目（兩個 <td> 標籤）

您可以將表格與電子表格進行比較。這個表格有兩行兩列，共 4 個包含資料的單元格。（2 行 x 2 列 = 4 個單元格）

標題和標題

讓我們從一個快速示例開始

<table>
<caption>Formulas and Results</caption>
<tr><th>Formula</th><th>Result</th></tr>
<tr><td>1 + 1</td><td>2</td></tr>
<tr><td>3 * 5</td><td>15</td></tr>
</table>

標題 用於定義或描述表格的內容。它們是可選的。

要向表格新增標題，請在開啟的 <table> 標籤後輸入 <caption> 元素，並在元素中新增標題的文字，如下所示。

<table>
<caption>Formulas and Results</caption>
...
</table>

標題通常顯示在表格邊框外，位於頂部。標題的確切外觀和位置取決於 CSS 樣式。

表格 標題 是一種定義表格列內容的方法。它們通常僅用於第一個 <tr>，表格行。

我們使用 <th> 而不是 <td> 來表示單元格。

預設情況下，表格標題中的文字以粗體顯示並居中。

語法是：<tr><th>文字</th><th>文字</th></tr>

任務 - 表格標題和標題

1. 開啟您的 table.html 檔案
2. 向表格新增您自己的標題
3. 檢視結果
4. 為表格新增表格標題 ITEMS 和 $ PRICE
5. 檢視結果

邊框

表格周圍的邊框是可選的：有時它們有助於定義表格，有時表格沒有邊框看起來更好。

但是，在建立表格時開啟邊框是一個非常好的主意，因為它使表格更容易處理。完成表格後，您可以刪除邊框。

此表格的邊框寬度為 1 畫素。

此表格的邊框寬度為 5 畫素。

預設值為 0（即無邊框）。

邊框是表格標籤的屬性。語法是

<table border=X> 其中 X 是邊框大小（以畫素為單位）。

您還可以指定邊框顏色，儘管這僅是 Internet Explorer 標籤。語法是

<table bordercolor="#000000">

請注意，不建議使用 HTML 指定邊框顏色 - 使用 CSS 來實現這一目的要好得多。

任務 - 在表格周圍建立邊框

1. 開啟您的 table.htm 檔案。
2. 在 <table> 標籤中，新增 border="2"
   即 <table border="2">。
3. 儲存檔案並檢視它。
4. 更改邊框的大小（例如，嘗試 0、10，並嘗試一個很大的數字）。
5. 在操作過程中檢視結果。

您是否注意到只有外邊框變大了？

高度和寬度

預設情況下，表格的大小與其輸入的資料一樣大。

我們可以更改表格的整體高度和寬度，使其達到我們想要的大小。

可以以絕對畫素或以螢幕大小的相對百分比來指定大小。

語法是：<table height=??? width=???> 其中 ??? 是以畫素或百分比為單位的大小。

還可以控制單個表格單元格或行的尺寸。

例如 <tr height="80"> <td width="50%">

可以混合使用絕對高度和寬度以及相對高度和寬度。

請注意，您可以透過更改填充來使用 CSS 完成相同的事情。

任務 - 定義表格的大小

1. 開啟您的 table.htm 檔案。
2. 在 <table border="2"> 標籤中，我們將新增高度和寬度
   例如 <table border="2" height=200 width=300>
3. 儲存檔案然後檢視它。調整瀏覽器視窗的大小，觀察發生的情況 - 表格大小保持不變。
4. 嘗試更改度量並再次檢視檔案。
5. 現在用百分比替換畫素度量
   例如 <table border="2" height="40%" width="50%">
6. 儲存檔案然後檢視它。調整瀏覽器視窗的大小，觀察發生的情況 - 這次表格會隨著視窗大小的調整而改變大小。

單元格間距和單元格填充

單元格填充和單元格間距之間的區別

單元格間距是表格單元格之間的畫素數。

單元格填充是單元格內部的畫素空間。即資訊與表格單元格邊框之間的距離。

這兩個選項都是 <table> 標籤的屬性

例如 <table border="1" cellspacing="0" cellpadding="0">

注意：兩者的預設值為 2

任務 - 單元格間距和填充

1. 開啟您的 table.htm 檔案。確保您的表格設定了較大的高度和寬度（例如 300x200） - 否則您將看不到單元格填充和單元格間距的效果。
2. 嘗試更改表格邊框、單元格間距和單元格填充的大小。嘗試 0、1、5、10 等的不同組合。
3. 每次檢視結果

表格單元格的對齊

表格單元格內容的預設對齊方式是左對齊和垂直居中。

如果您想更改單元格的對齊方式，則必須對每個單元格單獨進行。align 命令包含在 <td> 標籤中。您還可以透過在 <tr> 標籤中指定對齊方式來更改整行的對齊方式

水平對齊
語法
<td align="位置"> 其中 位置 是 left、center 或 right
或
<tr align="位置"> 其中 位置 是 left、center 或 right

垂直對齊
語法
<td valign="位置"> 其中 位置 是 top、middle 或 bottom
或
<tr valign="位置"> 其中 位置 是 top、middle 或 bottom

您還可以在表格行標籤和表格標籤中包含 align 和 valign 命令。

注意：在 <table> 標籤中包含 <code>align="left"</code> 或 <code>align="right"</code> 不會對齊表格內容。相反，它會在頁面上對齊整個表格。即，它使表格外的文字圍繞表格環繞。

任務 - 表格單元格的對齊

1. 開啟您的 table.htm 檔案
2. 更改表格單元格的對齊方式，使其看起來像

麵包 $2.99 牛奶 $1.40

或

麵包 $2.99 牛奶 $1.40

1. 嘗試其他垂直和水平對齊方式。
2. 每次檢視結果

行跨度和列跨度

每一行必須具有相同數量的表格資料，有時表格資料必須跨越多個列或行。在這種情況下，將使用 colspan 和/或 rowspan 標籤 - 在這些標籤設定為數字的情況下。

			<-- 此行有三個 表格資料
			<-- 此行有兩個。第一個使用 colspan="2"
			<-- 此行有三個表格資料，但其中一個跨越兩行，因為它使用了 rowspan="2"
			<-- 此行只有兩個表格資料，因為它的第一個被佔用。

語法

• <td colspan=X> 其中 X 是單元格跨越的列數。
• <td rowspan=X> 其中 X 是單元格跨越的行數。

任務 - 行跨度和列跨度

1. 開啟您的 table.htm 檔案。
2. 嘗試讓一個表格單元格跨越多行。
3. 嘗試讓一個表格單元格跨越多列。
4. 每次檢視結果。

背景顏色和影像

可以為每個表格單元格（或行或表格）提供不同的背景顏色。

語法

<td bgcolor="colour">
<tr bgcolor="colour">
<table bgcolor="colour">

其中顏色是顏色名稱或十六進位制程式碼。

注意：表格背景顏色僅在版本 3 及更高版本的瀏覽器中顯示，並且可能無法正確列印。

注意：不建議使用 HTML 指定背景顏色 - 使用 層疊樣式表 完成此目的要好得多。

背景影像 是對單元格、行或完整表格的外觀進行的另一種修改。同樣，這些影像僅在版本 3 及更高版本的瀏覽器中顯示，並且可能無法正確列印。

語法

<td background="filename">
<tr background="filename">
<table background="filename">

其中 filename 是背景影像的路徑和檔名。

注意：不建議使用 HTML 指定背景影像 - 使用 CSS 完成此目的要好得多。

任務 - 背景顏色和影像

1. 開啟您的 table.htm 檔案。
2. 嘗試更改表格單元格、表格行和表格本身的背景顏色。
3. 將背景影像新增到表格單元格、表格行和表格本身。
4. 每次檢視結果。

列組

要為表格列指定給定格式，可以使用 <col> 和 <colgroup> 標籤。這些標籤位於表格的頂部，並指定給定列的預設格式。

對於 <col> 標籤，第一個例項指示第一列的格式，第二個指示第二列的格式，依此類推。<colgroup> 的工作方式類似，但還包括 span 標籤以涵蓋多個列。

<table>
 <caption>Project Completion</caption>
 <colgroup>
  <col span="3" style="background-color:red">
  <col style="background-color:yellow">
  <col span="2" style="background-color:green">
 </colgroup>
 <tr><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th></tr>
 <tr><td>3%</td><td>17%</td><td>40%</td><td>55%</td><td>86%</td><td>100%</td></tr>
</table>

濫用表格

在 CSS 流行之前，表格通常被誤用來製作頁面佈局。雖然你可能會看到以這種方式設計的舊網站，但現在使用表格代替 CSS 被認為是不好的做法。

考慮何時使用表格，何時不使用表格。例如，單列表格幾乎總是最好實現為列表。

總結

在本模組中，你將學習如何

• 建立和自定義 HTML 表格，
• 控制它們的尺寸和外觀，
• 向表格新增標題，
• 控制表格內容的對齊方式，
• 表格標籤的各種屬性。