什麼是表格?
表格就是把資料排成「行」和「列」,像這樣:
| 星期一 | 星期二 | 星期三 |
|---|---|---|
| 國文 | 數學 | 英文 |
| 體育 | 音樂 | 美術 |
這就是一個簡單的「課表」!接下來教你怎麼做。
1. <table> - 表格的大盒子
是什麼: 告訴瀏覽器「這裡要做一個表格」,所有表格內容都要放在裡面。
怎麼用:
<table>
這裡放表格內容
</table>
小提醒: 就像蓋房子要先有地基,做表格要先有
<table>!
2. <tr> - 表格的一行 (Table Row)
是什麼: 一條橫的「行」,像課表的第一行、第二行。
怎麼用:
<table>
<tr>第一行的內容</tr>
<tr>第二行的內容</tr>
</table>
小提醒: tr = Table Row (表格的行),想像一排座位!
3. <th> - 表頭欄位 (Table Header)
是什麼: 表格最上面的「標題」,像「星期一」「星期二」,會自動變粗體。
怎麼用:
<table>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
</table>
| 星期一 | 星期二 | 星期三 |
|---|
4. <td> - 一般欄位 (Table Data)
是什麼: 表格裡的「格子」,放資料用的。
怎麼用:
<table>
<tr>
<th>星期一</th>
<th>星期二</th>
</tr>
<tr>
<td>國文</td>
<td>數學</td>
</tr>
</table>
| 星期一 | 星期二 |
|---|---|
| 國文 | 數學 |
5. <thead> - 表格的頭部區域
是什麼: 把表頭包起來,讓表格結構更清楚。
怎麼用:
<table>
<thead>
<tr>
<th>科目</th>
<th>分數</th>
</tr>
</thead>
</table>
小提醒: 就像書有「目錄」,表格有
<thead> 表頭!
6. <tbody> - 表格的內容區域
是什麼: 把表格的主要內容包起來。
怎麼用:
<table>
<thead>
<tr>
<th>科目</th>
<th>分數</th>
</tr>
</thead>
<tbody>
<tr>
<td>國文</td>
<td>90</td>
</tr>
<tr>
<td>數學</td>
<td>85</td>
</tr>
</tbody>
</table>
| 科目 | 分數 |
|---|---|
| 國文 | 90 |
| 數學 | 85 |
7. <tfoot> - 表格的底部區域
是什麼: 表格最下面的「總結」,像「總分」「平均」。
怎麼用:
<table>
<thead>
<tr><th>科目</th><th>分數</th></tr>
</thead>
<tbody>
<tr><td>國文</td><td>90</td></tr>
<tr><td>數學</td><td>85</td></tr>
</tbody>
<tfoot>
<tr>
<td>總分</td>
<td>175</td>
</tr>
</tfoot>
</table>
| 科目 | 分數 |
|---|---|
| 國文 | 90 |
| 數學 | 85 |
| 總分 | 175 |
8. <caption> - 表格標題
是什麼: 給表格取個名字,會顯示在表格上方。
怎麼用:
<table>
<caption>小明的成績單</caption>
<tr>
<th>科目</th>
<th>分數</th>
</tr>
<tr>
<td>國文</td>
<td>90</td>
</tr>
</table>
| 科目 | 分數 |
|---|---|
| 國文 | 90 |
9. colspan - 合併欄位(橫向)
是什麼: 讓一個格子「橫跨」好幾欄。
怎麼用:
<table>
<tr>
<th colspan="2">本週課表</th>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
</tr>
</table>
| 本週課表 | |
|---|---|
| 星期一 | 星期二 |
小提醒: colspan="2" 表示「跨 2 欄」!
10. rowspan - 合併欄位(縱向)
是什麼: 讓一個格子「垂直跨」好幾行。
怎麼用:
<table>
<tr>
<td rowspan="2">數學</td>
<td>代數</td>
</tr>
<tr>
<td>幾何</td>
</tr>
</table>
| 數學 | 代數 |
| 幾何 |
小提醒: rowspan="2" 表示「跨 2 行」!
完整範例:做一個課表!
<table>
<caption>我的課表</caption>
<thead>
<tr>
<th>時間</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
</thead>
<tbody>
<tr>
<td>08:00</td>
<td>國文</td>
<td>數學</td>
<td>英文</td>
</tr>
<tr>
<td>09:00</td>
<td>體育</td>
<td>音樂</td>
<td>美術</td>
</tr>
</tbody>
</table>
| 時間 | 星期一 | 星期二 | 星期三 |
|---|---|---|---|
| 08:00 | 國文 | 數學 | 英文 |
| 09:00 | 體育 | 音樂 | 美術 |
快速小抄
<table>- 表格大盒子<tr>- 一行<th>- 表頭(粗體)<td>- 一般格子<thead>- 表頭區域<tbody>- 內容區域<tfoot>- 底部區域<caption>- 表格標題colspan- 橫向合併rowspan- 縱向合併