製作表格

製作表格

Written by Wanding on 12 August 2020
透過表格可以把資料進行分類、比較、加減運算，讓內容更清楚表達，閱讀者也更容易解讀。 表格在網頁中經常被使用，是很重要的標籤使用。

表格的原始碼寫法

<table>
<tr>
 <th></th> <th></th> <th></th> 
</tr>
<tr>
 <td></td> <td></td> <td></td>
</tr>
<tr>
 <td></td> <td></td> <td></td>
</tr>
</table>

<table>標籤

這組標籤是製作表格的基本元素。標籤內所有內容，都會在包在<table>和</tablet>包圍起來。預設是沒有框線，若須要框線，可以border來定義。如下寫法 
<table border="1px">

<tr></tr>橫列標籤

這組標籤是用來定義橫列，一組<tr></tr>代表一列，中間的欄位內容會包含在這組標籤之中。

<th></th>欄位標題標籤

這組標籤是用來定義欄位標題的名稱，預設的文字格式為靠左，而且以粗體顯示，一組<th></th>定義一個欄位，若有三個欄位就需有三組。

<td></td>欄位容標籤

這組標籤是用來定義欄位內容，預設的文字格式為靠左，一組<td></td>定義一個欄位容，若有三個欄位內容就需有三組。

<caption></caption>為表格加上標題

這組標題標籤必須放置於<table<和<tr>之間。

左右欄位合併colspan

當有左右兩個欄位合併成一個欄位時，就需要在標籤中間加入colspan，並給它一個"2"的值。如下寫法 
<th colspan="2">

上下欄位合併rowlspan

當有上下三個欄位合併成一個欄位時，就需要在標籤中間加入rowspan，並給它一個"3"的值。如下寫法 
<td rowspan="3">

常用的表格屬性

屬性 用途 寫法
border 設定表格的框線 <table border="1px"></table>
width 設定表格或欄位的寬度，可用百分比或像素來表示 <th width="30%"></th>
height 設定表格尺寸的高度，可用百分比或像素來表示 <table height="300px"></table>
cellspacing 欄位格線水平的寬度，以像素為單位 <table cellspacing="10px"></table>
cellpadding 欄位中上下兩條欄線的距離，以像素為單位 <table cellpadding="5px"></table>
align 表格內文字水平對齊方式，屬性有left、center、right <th align="center"></th>
valign 表格內文字垂直對齊屬性，屬性有top、midddle、bottom <th valign="bottom"></th>
background 設定表格的背景圖片 <table background="img/beauty.jpg"></table>
bgcolor 設定表格的背景顏色，<th><td>亦可用 <th bgcolor="#bbddf6"></th>
nowrap 文字太多超過欄位寬度不自動換行，會自動隱藏 <td nowrap></td>

回目錄頁