網頁程式設計 學習紀錄 (五) 表格
包含以下六個部分：
- 建立表格 - <table>、<tr>、<td>、<th>
- 表格與儲存格格式化
- 表格標題 - <caption>元素
- 合併儲存格
- 表格的表頭、主體、與表尾 - <thead>、<tbody>、<tfoot>元素
- 值欄式表格 - <colgroup>、<col>元素
1.建立表格 - <table>、<tr>、<td>、<th>
HTML 文件中建立表格會用到以下屬性：<table>、<tr>、<td>、<th>
(1) table元素
<table> 元素用來標示表格
在HTML5 僅提供 全域屬性、事件屬性、border屬性
(2) tr 元素
<tr> 元素用來標示一列(row)
在HTML5 僅提供 全域屬性、事件屬性
(3) td 元素
<td> 元素用來在一列中標示儲存格
在HTML5 僅提供 全域屬性、事件屬性、以及下列屬性：
| 屬性 | 說明 |
| colspan = "n" | 指定某個儲存格是由幾欄合併而成 |
| rowspan = "n" | 指定某個儲存格是由幾列合併而成 |
| headers = "..." | 指定提供標頭資訊的儲存格 |
(4) th 元素
<th> 元素用來標示標題儲存格，其內容會置中並加上粗體
在HTML5 有 全域屬性、事件屬性、以及下列屬性：
| 屬性 | 說明 |
| colspan = "n" | 指定某個儲存格是由幾欄合併而成 |
| rowspan = "n" | 指定某個儲存格是由幾列合併而成 |
| headers = "..." | 指定提供標頭資訊的儲存格 |
| scope = "{row,col,rowgroup,colgroup}" | 指定目前的標頭儲存格提供了那些儲存格的標頭資訊 |
範例.建立表格
依照下列步驟建立表格：
- 在HTML <body> 元素中加入 <table> 元素、將border設為 1(若無設置則預設為沒有框線、即為透明表格)
- 在 <table>元素中加入4個<tr>元素(表示此表格有4列)
- 在表格第1列加入3個<th>元素、後面3列加入3個<td>元素(th為標題列，td為欄位，表示每一列有3欄)
- 最後在每個<th>、<td>中輸入各個儲存格的內容
以下為範例程式碼：
<!DOCTYPE html> <html> <head> <title>範例表格</title> </head> <body> <table border="1"> <tr> <th>第一欄標題</th> <th>第二欄標題</th> <th>第三欄標題</th> </tr> <tr> <td>第一列第一欄內容</td> <td>第一列第二欄內容</td> <td>第一列第三欄內容</td> </tr> <tr> <td>第二列第一欄內容</td> <td>第二列第二欄內容</td> <td>第二列第三欄內容</td> </tr> <tr> <td>第三列第一欄內容</td> <td>第三列第二欄內容</td> <td>第三列第三欄內容</td> </tr> </table> </body> </html>
2.表格與儲存格格式化
HTML4.01 已將這些涉及表格儲存格外觀的屬性標示為 建議勿用
HTML5 已不再標示這些屬性。
但依然偶爾會使用到，所以會稍加介紹。
(1) 表格的背景色彩與圖片
<table>元素之中：
bgcolor 屬性：指定表格的背景色彩
background屬性 ：指定表格的背景圖片
(2) 表格的寬度、框線色彩、儲存格墊充、儲存格間距
<table>元素之中：
| 屬性 | 說明 |
| width = "n" | 指定表格的寬度 |
| bordercolor = "color|#rrggbb" | 指定表格的框線色彩 |
| cellpadding = "n" | 指定儲存格墊充 |
| cellspacing = "n" | 指定儲存格間距 |
(3) 表格的對齊方式
<table>元素之中：
align屬性提供：left(靠左)、center(置中)、right(靠右)
※這裡會改動的是整個<table>的位置，而不是裡面的儲存格內容
(4) 儲存格的對齊方式
儲存格元素之中有水平與重質兩個方向
<tr>、<td>、<th>元素中的<align>、<valign>屬性：
align屬性提供：left(靠左)、center(置中)、right(靠右)
valign屬性提供：top(靠上)、middle(置中)、bottom(靠下)
(5) 儲存格的的背景色彩與圖片
儲存格之中，可以使用<tr>元素的 bgcolor指定背景色彩
<td>、<th>元素的 bgcolor、background指定背景色彩、圖片
<table>元素之中：
bgcolor 屬性：指定表格的背景色彩
background屬性 ：指定表格的背景圖片
3.表格標題 - <caption>元素
caption 用來指定表格標題，該標題可以是文字或圖片
align屬性提供：left(靠左)、center(置中)、right(靠右)，指定表格標題的位置
4.合併儲存格
儲存格的合併涉及<td>、<th>元素的 colspan 和rowspan屬性
colspan = "n" : 合併同一列的n個儲存格
rowspan = "n": 合併同一欄的n個儲存格
以下為範例程式碼：
1.尚未合併
<!DOCTYPE html> <html> <head> <title>合併儲存格</title> </head> <body> <table border="1"> <tr> <th> </th> <th>標題一</th> <th>標題二</th> <th>標題三</th> <th>標題四</th> </tr> <tr> <td>第一</td> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>第二</td> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> </table> </body> </html>
2.合併欄
<!DOCTYPE html> <html> <head> <title>合併儲存格</title> </head> <body> <table border="1"> <tr> <th rowspan="2"> </th> <!-- 設定第一欄合併第二欄的儲存格 --> <th> </th> <th> </th> <th> </th> <th> </th> </tr> <tr> <!-- 刪除此欄 --> <th>標題一</th> <th>標題二</th> <th>標題三</th> <th>標題四</th> </tr> <tr> <td>第一</td> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>第二</td> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> </table> </body> </html>
3.合併列
<!DOCTYPE html> <html> <head> <title>合併儲存格</title> </head> <body> <table border="1"> <tr> <th rowspan="2"> </th> <!-- 設定第一欄合併第二欄的儲存格 --> <th colspan="2">標題一和二</th> <th colspan="2">標題三和四</th> <!-- 刪除此欄 --> <!-- 刪除此欄 --> </tr> <tr> <!-- 刪除此欄 --> <th>標題一</th> <th>標題二</th> <th>標題三</th> <th>標題四</th> </tr> <tr> <td>第一</td> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>第二</td> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> </table> </body> </html>
5.表格的表頭、主體、與表尾 - <thead>、<tbody>、<tfoot>元素
當表格超過一頁時，通常會重複顯示表頭、表尾
表頭和表格標題是不一樣的，表格標題放在表格外面，表頭則在表格第一行
使用<thead>、<tbody>、<tfoot>指定表格的表頭、主體、表尾
可使用的屬性：
align = "{left,right,center,justify,char}"：指定水平對齊方式(靠左、靠右、置中、左右對齊、對齊指定字元)
valign = "{top,middle,bottom,baseline}"：指定垂直對齊方式(靠上、中央、靠下、基準線)
char = "..."：指定儲存格要對齊的字元
charoff = "..."：指定某列儲存格要對齊的字元是從左邊數來第幾個
6.值欄式表格 - <colgroup>、<col>元素
<colgroup>、<col>元素用來針對直欄來指定格式
<colgroup>：
用來針對表格的直欄做分組，然後指定各組的格式
其屬性有：align、valign、char、charoff、bgcolor、width、span
<col>：
用來指定一整欄的格式，必須與<colgroup>一起使用，且沒有結束標籤
以下為範例：
<!DOCTYPE html> <html> <head> <title>colgroup應用</title> </head> <body> <table border="1"> <colgroup span="3" bgcolor = "#ffffb3"> <!-- 指定前三組的顏色 --> </colgroup> <colgroup span="2" > <!-- 指定後兩組 --> <col bgcolor = "#d9eed9"> <!-- 指定該欄顏色 --> <col width="300"> <!-- 指定該欄寬度 --> </colgroup> <tr> <th>第一欄標題</th> <th>第二欄標題</th> <th>第三欄標題</th> <th>第四欄標題</th> <th>第五欄標題</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> <td>1-5</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> <td>2-5</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> <td>3-5</td> </tr> </table> </body> </html>
留言列表
NAS (1)