HTML 中建立表格需使用 <table>
標籤,並搭配 <tr>
、<th>
、<td>
等標籤來呈現每一列與每一格的資料。
範例:
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>18</td>
<td>台北</td>
</tr>
<tr>
<td>小華</td>
<td>20</td>
<td>高雄</td>
</tr>
</tbody>
</table>
標籤說明
- 表格的開始<table>與結束</table>
- tr 列(row)
- th 存放表格標題的儲存格
- td 存放資料的儲存格(column)
- thead,tbody,tfoot 群組化儲存格
- caption 表格標題
- colspan,rowspan 儲存格的合併
表格邊框與寬度
預設的表格不會顯示邊框,我們可以用 border
屬性或 CSS 來加上:
<table border="1" width="100%">
<!-- 表格內容 -->
</table>
不過會建議邊框跟寬度都是讓 css 調整會比較好。
合併儲存格技巧(colspan、rowspan)
有時候我們會希望讓某個儲存格橫跨多欄或多列,可以用 colspan
與 rowspan
屬性來達成。
橫向合併欄位(colspan):
<tr>
<td colspan="2">合併了兩欄</td>
</tr>
直向合併列(rowspan):
<tr>
<td rowspan="2">合併兩列</td>
<td>第一列</td>
</tr>
<tr>
<td>第二列</td>
</tr>