3-2 嚙踝蕭嚙踝蕭 (Tables)

HTML 在最初設計時,並沒有考慮到完善的排版功能,因此若要對 HTML 文件進行精密或複雜的排版,就要靠表格(Tables)來達成。一個簡單表格的範例如下:

Example(table01.htm):

上述範例的原始檔如下:

原始檔(table01.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>    
	<TITLE> 表格:基本表格 </TITLE>
</HEAD>
<BODY>

<table border=1>
<tr>
<td>第 1 列、第 1 行</td>
<td>第 1 列、第 2 行</td>
<td>第 1 列、第 3 行</td>
</tr>
<tr>
<td>第 2 列、第 1 行</td>
<td>第 2 列、第 2 行</td>
<td>第 2 列、第 3 行</td>
</tr>
</table>

</BODY>
</HTML>

其中 tr 代表 table row,td 代表 table data,而 border=1 則代表表格邊界的寬度是一個像素(Pixel)。

Hint
通常我們以「列」代表「橫列」,「行」代表「直行」。

表格有許多的屬性,例如:

Example(table02.htm):

上述範例的原始檔如下:

原始檔(table02.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>    
	<TITLE> 表格:設定表格的屬性 </TITLE>
</HEAD>
<BODY>

<table border=4 align=center width=60% bgcolor=yellow cellspacing=5 cellpadding=6>
<tr>
<td>第 1 列、第 1 行</td>
<td>第 1 列、第 2 行</td>
<td>第 1 列、第 3 行</td>
</tr>
<tr>
<td>第 2 列、第 1 行</td>
<td>第 2 列、第 2 行</td>
<td>第 2 列、第 3 行</td>
</tr>
</table>

</BODY>
</HTML>

這些表格的屬性,可說明如下:

有關於 border、cellspacing、cellpadding 這三項屬性,可由下列圖示來瞭解:

我們也可以使用 <caption> 標籤來為表格加上標題,並用 <table> 標籤的 align 屬性設定表格靠左或靠右,來 例如:

Example(table03.htm):

上述範例的原始檔如下:

原始檔(table03.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>    
	<TITLE> 表格:設定表格的標題 </TITLE>
</HEAD>
<BODY>

<table align=left border=3>
<caption align="top">標題在上方,表格靠左</caption>
<tr>
<td>第 1 列、第 1 行</td>
<td>第 1 列、第 2 行</td>
</tr>
<tr>
<td>第 2 列、第 1 行</td>
<td>第 2 列、第 2 行</td>
</tr>
</table>

<table align=right border=3>
<caption align="bottom">標題在下方,表格靠右</caption>
<tr>
<td>第 1 列、第 1 行</td>
<td>第 1 列、第 2 行</td>
</tr>
<tr>
<td>第 2 列、第 1 行</td>
<td>第 2 列、第 2 行</td>
</tr>
</table>

</BODY>
</HTML>

在 <td> 標籤內,我們可以使用 colspan 或 rowspan 的屬性,來合併數個儲存格,例如: 我們也可以使用 <caption> 標籤來為表格加上標題,例如:

Example(table04.htm):

上述範例的原始檔如下:

原始檔(table04.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>    
	<TITLE> 表格:合併數個儲存格 </TITLE>
</HEAD>
<BODY>

<table BORDER="2" align=center>
<caption>標題:合併儲存格</caption>
<tr>
	<td>1</td>
	<td rowspan="2">上下兩格<br>合成一格</td>
	<td>3</td>
</tr>
<tr>
	<td>4</td>
	<td>6</td>
</tr>
<tr>
	<td colspan=3>左右三格合成一格</td></tr>
</table>

</BODY>
</HTML>

因此,利用上述的各種功能,我們就可以很方便的地編輯出個人的課程表,例如:

Example(tableSchedule01.htm):

上述範例的原始檔如下:

原始檔(tableSchedule01.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>
    <TITLE> TABLE 範例程式 </TITLE>
</HEAD>

<BODY>
<CENTER>
<TABLE BORDER=3 CELLPADDING=3>
<CAPTION>日課表</CAPTION>
<TR>
<TH>  星期<BR>時間  <TH>一<TH>二<TH>;三<TH>四<TH>五<TH>六
<TR>
<TH>8:20<BR>|<BR>9:10
<TD>  <BR>  <BR>   
<TD>  <BR>  <BR>   
<TD ROWSPAN=2 ALIGN=CENTER>網路<BR>應用
<TD>  <BR>  <BR>   
<TD ROWSPAN=2 ALIGN=CENTER>網路<BR>應用
<TD ROWSPAN=3 ALIGN=CENTER>作業<BR>系統
<TR>
<TH>9:15<BR>|<BR>10:05
<TD>  <BR>  <BR>   
<TD ROWSPAN=3 ALIGN=CENTER>高等<BR>程式<BR>設計
<TD>  <BR>  <BR>   
<TR>
<TH>10:15<BR>|<BR>11:05
<TD ALIGN=CENTER>網路<BR>應用
<TD>  <BR>  <BR>   
<TD>  <BR>  <BR>   
<TD>  <BR>  <BR>   
<TR>
<TH>11:10<BR>|<BR>12:00
<TD ALIGN=CENTER>網路<BR>應用
<TD>  <BR>  <BR>   
<TD>  <BR>  <BR>   
<TD>  <BR>  <BR>   
<TD>  <BR>  <BR>   
</TABLE>
</CENTER>

</BODY>
</HTML>

也可以在網頁加入背景圖或背景音樂,或是在每個儲存格加上底色,以便凸顯特定直行或是特定橫列的資料,例如:

Example(tableSchedule02.htm):

上述範例的原始檔如下:

原始檔(tableSchedule02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
<title>Weekly Schedule of Roger</title>
<style> td {font-family: "標楷體", "helvetica,arial", "Tahoma";}</style>
</head>

<body background="multimedia/paper.jpg">
<center>
<h3>
<font size=+2>W</font>EEKLY
<font size=+2>S</font>CHEDULE:
<font size=+2>F</font>all 2001
</h3>
<address>
<a href="/jang">張智星 (Jyh-Shing Roger Jang)</a>
</address>
</center>

<p>
<center>
  <table border=4>
    <tr align=center bgcolor="cyan">
       <td width=100 bgcolor="gray"><br></td>
       <td width=100>Mon.&nbsp;</td>
       <td width=100>Tue.&nbsp;</td>
       <td width=100>Wed.&nbsp;</td>
       <td width=100>Thu.&nbsp;</td>
       <td width=100>Fri.&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>8:00~8:50</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>9:00~9:50</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>音訊處理與辨識 (224)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>音訊處理與辨識 (224)&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>10:10~11:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>離散數學 (132)&nbsp;</td>
       <td width=100>俊毅&nbsp;</td>
       <td width=100>音訊處理與辨識 (224)&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>11:10~12:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>離散數學 (132)&nbsp;</td>
       <td width=100>銘鈞&nbsp;</td>
       <td width=100>離散數學 (132)&nbsp;</td>
    <tr align=center bgcolor=yellow>
       <td width=100 bgcolor=white>12:00~13:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>13:10~14:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>永森&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>MIR meeting (447)&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>14:10~15:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>MIR meeting (447)&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>15:10~16:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>系務會議 (447)</td>
       <td width=100>雯妮&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>16:10~17:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>玄松&nbsp;</td>
       <td width=100>系務會議 (447)</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>17:10~18:00</td>
       <td width=100>CWeb Meeting (Taipei)&nbsp;</td>
       <td width=100>政源&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>18:10~19:00</td>
       <td width=100>&nbsp;</td>
       <td width=100>語音合成會議(739)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>19:10~20:00</td>
       <td width=100>&nbsp;</td>
       <td width=100>語音合成會議(739)&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>20:10~21:00</td>
       <td width=100>網球<br>(室內球場)&nbsp;</td>
       <td width=100>&nbsp</td>
       <td width=100>&nbsp;</td>
       <td width=100>網球<br>(室內球場)&nbsp;</td>
       <td width=100>&nbsp;</td>
    <tr align=center>
       <td width=100 bgcolor=white>21:10~22:00</td>
       <td width=100>網球<br>(室內球場)&nbsp;</td>
       <td width=100>&nbsp</td>
       <td width=100>&nbsp;</td>
       <td width=100>網球<br>(室內球場)&nbsp;</td>
       <td width=100>&nbsp;</td>
  </table>
</center>

<hr>
<script language="JavaScript">
document.write("Last updated on " + document.lastModified + ".")
</script>

</body>
</html>

你也可以編輯自己的履歷表,例如:

Example(tableResume.htm):

上述範例的原始檔如下:

原始檔(tableResume.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
    <title> TABLE 範例程式 </title>
</head>
   <center>
<table BORDER="5">
<caption><big>履  歷  表<big></caption>
<tr><td WIDTH="60"><td WIDTH="60"><td WIDTH="60"><td WIDTH="60"><td WIDTH="60"><td WIDTH="60"><td WIDTH="60"><td WIDTH="60">
<tr><td COLSPAN="3">姓名: 亂馬<td COLSPAN="3">性別: 忽男忽女<td COLSPAN="2" ROWSPAN="3"><img SRC="multimedia/CAT-WALKING-KITY.GIF" WIDTH="112" HEIGHT="115">
<tr><td COLSPAN="6">身份證: xxxxxxxxxx
<tr><td COLSPAN="6">住址: xxxxxxxxxxxxxxxxxxxxxx
<tr>
<td COLSPAN="4">
專長:<br>
<ul>
<li>男變女
<li>女變男
<li>倉頡輸入法每分鐘200字
</ul>
<td COLSPAN="4">
經歷:<br>
<ul>
<li>xx工商專校工友
<li>xx工廠經理
<li>xx公司董事長
</u>
</table>
</center>
</body>
</html>

你也可以使用背景顏色的技巧,來產生較有趣的陰影效果:

Example(tableShadow.htm):

上述範例的原始檔如下:

原始檔(tableShadow.htm):(灰色區域按兩下即可拷貝)
<html>
<body>

border=0 的表格:
<table border=0 cellspacing=0 cellpadding=2 align=center>
<tr>
<td width=3 height=5 bgcolor=blue><td bgcolor=blue><td width=3>
<tr>
<td bgcolor=blue><td bgcolor=blue><font color=white size=6>有陰影的圖塊</font><td bgcolor=gray>
<tr>
<td height=5><td bgcolor=gray><td bgcolor=gray>
</table>

border=1 的表格:
<table border=1 cellspacing=0 cellpadding=2 align=center>
<tr>
<td width=3 height=5 bgcolor=blue><td bgcolor=blue><td width=3>
<tr>
<td bgcolor=blue><td bgcolor=blue><font color=white size=6>有陰影的圖塊</font><td bgcolor=gray>
<tr>
<td height=5><td bgcolor=gray><td bgcolor=gray>
</table>

</body>
</html>

Hint
在上述範例中,我們只要將 border 設定成 1,就可以很快看出來原先表格的儲存格,這個方法常被用在反解(reverse engineering)別人網頁的排版技巧。

若要使表格產生半透明的背景顏色,就要靠 CSS,範例如下:

Example(tableTransparentBgColor01.htm):

上述範例的原始檔如下:

原始檔(tableTransparentBgColor01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>    
<title>表格:設定半透明的背景顏色</title>
<style>
table{filter:Alpha(Opacity=60, FinishOpacity=60, Style=1)}
</style>
</head>
<body background="multimedia/bio_back.jpg">

<p>本表格使用 table{filter:Alpha(Opacity=60, FinishOpacity=60, Style=1)},所以可已呈現半透明的表格背景顏色:<br>
<table border=1 align=center width=60% bgcolor=#98AFDE>
<tr><td>第 1 列、第 1 行<td>第 1 列、第 2 行<td>第 1 列、第 3 行</td>
<tr><td>第 2 列、第 1 行<td>第 2 列、第 2 行<td>第 2 列、第 3 行</td>
<tr><td>第 3 列、第 1 行<td>第 3 列、第 2 行<td>第 3 列、第 3 行</td>
</table>
<p>
<table align=center width=60% bgcolor=#98AFDE>
<tr><td align=center>This is the text within a table!
</table>

</body>
</html>

在上述範例中,我們利用下方css語法可以做出透明表格的效果

table{filter:Alpha(Opacity=X, FinishOpacity=Y, Style=Z)} X = 0 ~ 100 淡化開始的透明度 (數字越高越接近原色) Y = 0 ~ 100 淡化結束的透明度 (數字越高越接近原色) Z = 1 ~ 3 淡化的方式 若要個別對每一個表格產生不同設定的半透明背景圖,可將 CSS 指令加在每一個表格,例如:

Example(tableTransparentBgColor02.htm):

上述範例的原始檔如下:

原始檔(tableTransparentBgColor02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>    
<title>表格:設定半透明的背景顏色</title>
</head>
<body background="multimedia/bio_back.jpg">

<p>本表格使用 style="filter:Alpha(Opacity=60, FinishOpacity=60, Style=1)":<br>
<table style="filter:Alpha(Opacity=60, FinishOpacity=60, Style=1)" border=1 align=center width=60% bgcolor=#98AFDE>
<tr><td>第 1 列、第 1 行<td>第 1 列、第 2 行<td>第 1 列、第 3 行</td>
<tr><td>第 2 列、第 1 行<td>第 2 列、第 2 行<td>第 2 列、第 3 行</td>
<tr><td>第 3 列、第 1 行<td>第 3 列、第 2 行<td>第 3 列、第 3 行</td>
</table>

<p>本表格使用 style="filter:Alpha(Opacity=80, FinishOpacity=20, Style=1)":<br>
<table style="filter:Alpha(Opacity=80, FinishOpacity=20, Style=1)" border=1 align=center width=60% bgcolor=#98AFDE>
<tr><td>第 1 列、第 1 行<td>第 1 列、第 2 行<td>第 1 列、第 3 行</td>
<tr><td>第 2 列、第 1 行<td>第 2 列、第 2 行<td>第 2 列、第 3 行</td>
<tr><td>第 3 列、第 1 行<td>第 3 列、第 2 行<td>第 3 列、第 3 行</td>
</table>

<p>本表格使用 style="filter:Alpha(Opacity=20, FinishOpacity=80, Style=1)":<br>
<table style="filter:Alpha(Opacity=20, FinishOpacity=80, Style=1)" border=1 align=center width=60% bgcolor=#98AFDE>
<tr><td>第 1 列、第 1 行<td>第 1 列、第 2 行<td>第 1 列、第 3 行</td>
<tr><td>第 2 列、第 1 行<td>第 2 列、第 2 行<td>第 2 列、第 3 行</td>
<tr><td>第 3 列、第 1 行<td>第 3 列、第 2 行<td>第 3 列、第 3 行</td>
</table>

<p>本表格使用 style="filter:Alpha(Opacity=20, FinishOpacity=80, Style=2)":<br>
<table style="filter:Alpha(Opacity=20, FinishOpacity=80, Style=2)" border=1 align=center width=60% bgcolor=#98AFDE>
<tr><td>第 1 列、第 1 行<td>第 1 列、第 2 行<td>第 1 列、第 3 行</td>
<tr><td>第 2 列、第 1 行<td>第 2 列、第 2 行<td>第 2 列、第 3 行</td>
<tr><td>第 3 列、第 1 行<td>第 3 列、第 2 行<td>第 3 列、第 3 行</td>
</table>

</body>
</html>

以下是試驗區,你可以直接填入 HTML 的內容,按「送出測試」後,即可在新網頁看到呈現的結果。

Example(htmlTestTable.htm):


HTML 簡介與應用