2.18 表格
語意
即表格之意。
<table>
:表格標籤。
<tr>
:table row 的縮寫。
<td>
:table data 的縮寫。
<th>
:table heading 的縮寫。
<thead>
:table head 的縮寫。
<tfoot>
:table foot 的縮寫。
<tbody>
:table body 的縮寫。
說明
撰寫表格時,預設是不會有各欄的框線。
結構
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
按照定義,撰寫的順序,<thead>
先寫,緊接著 <tbody>
,再來才是 <tfoot>
。
範例
<table>
<thead>
<tr>
<th>標題一</th>
<th>標題二</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一列第一欄</td>
<td>第一列第二欄</td>
</tr>
<tr>
<td>第二列第一欄</td>
<td>第二列第二欄</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tfoot 第一欄</td>
<td>tfoot 第二欄</td>
</tr>
</tfoot>
</table>
結果呈現:
rowspan 與 colspan 合併欄位
rowspan:以「列(橫)」的方式來算,合併幾個欄位。
colspan:以「行(直)」的方式來算,合併幾個欄位。
<table>
<tbody>
<tr>
<td>第一列第一欄</td>
<td>第一列第二欄</td>
</tr>
<tr>
<td>第二列第一欄</td>
<td>第二列第二欄</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td rowspan="2">第一列第一欄</td>
<td>第一列第二欄</td>
</tr>
<tr>
<td>第二列第二欄</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td colspan="2">第一列第一欄</td>
</tr>
<tr>
<td>第二列第一欄</td>
<td>第二列第二欄</td>
</tr>
</tbody>
</table>