HTML 在最初設計時,並沒有考慮到完善的排版功能,因此若要對 HTML 文件進行精密或複雜的排版,就要靠表格(Tables)來達成。一個簡單表格的範例如下:
上述範例的原始檔如下:
其中 tr 代表 table row,td 代表 table data,而 border=1 則代表表格邊界的寬度是一個像素(Pixel)。
表格有許多的屬性,例如:
上述範例的原始檔如下:
這些表格的屬性,可說明如下:
- ALIGN=left|center|right:決定該表格在文件中的位置是置左、置中或是置右。
- WIDTH=n|p%:決定該表格的寬度大小,可以設定絕對的大小 (n) 或是在視窗中所佔的比例 (p%)。
- BORDER[=n]:設定表格邊界的寬度。
- CELLSPACING=n:設定儲存格之間的距離。
- CELLPADDING=n:設定表格資料到儲存格之間的距離。
- BGCOLOR=#RRGGBB:設定表格的底色。
有關於 border、cellspacing、cellpadding 這三項屬性,可由下列圖示來瞭解:
我們也可以使用 <caption> 標籤來為表格加上標題,並用 <table> 標籤的 align 屬性設定表格靠左或靠右,來 例如:
上述範例的原始檔如下:
在 <td> 標籤內,我們可以使用 colspan 或 rowspan 的屬性,來合併數個儲存格,例如:
我們也可以使用 <caption> 標籤來為表格加上標題,例如:
上述範例的原始檔如下:
因此,利用上述的各種功能,我們就可以很方便的地編輯出個人的課程表,例如:
上述範例的原始檔如下:
也可以在網頁加入背景圖或背景音樂,或是在每個儲存格加上底色,以便凸顯特定直行或是特定橫列的資料,例如:
上述範例的原始檔如下:
你也可以編輯自己的履歷表,例如:
上述範例的原始檔如下:
你也可以使用背景顏色的技巧,來產生較有趣的陰影效果:
上述範例的原始檔如下:
若要使表格產生半透明的背景顏色,就要靠 CSS,範例如下:
上述範例的原始檔如下:
在上述範例中,我們利用下方css語法可以做出透明表格的效果
table{filter:Alpha(Opacity=X, FinishOpacity=Y, Style=Z)}
X = 0 ~ 100 淡化開始的透明度 (數字越高越接近原色)
Y = 0 ~ 100 淡化結束的透明度 (數字越高越接近原色)
Z = 1 ~ 3 淡化的方式
若要個別對每一個表格產生不同設定的半透明背景圖,可將 CSS 指令加在每一個表格,例如:
上述範例的原始檔如下:
以下是試驗區,你可以直接填入 HTML 的內容,按「送出測試」後,即可在新網頁看到呈現的結果。
HTML 簡介與應用