表格的語法如下:
<table bgcolor="color" width="#"
border="#" frame="void | above | below | hsides | lhs | rhs
| vsides | box | border" rules="none | groups | rows | cols |
all" cellspacing="#" cellpadding="#" dir="ltr
| rtl" summary="text">
下表為表格內常用的標註指令:
簡單的表格例子如下:
<TABLE>
<CAPTION>表格標題</CAPTION>
<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 BORDER=n>其中n愈大外框愈粗。
以下例子我們設框線為<TABLE
BORDER=3>:
<table border="3">
<caption>表格標題</caption>
<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 CELLSPACING=n>調整表格內框線與外框線間的距離。
<TABLE CELLPADDING=n>調整表格內框線與資料內容間的距離。
這兩個指令須和BORER指令相配合才有作用。
以下例子我們設為<TABLE BORDER=3 CELLSPACING=10 CELLPADDING=10>:
<table border="3" cellpadding="10"
cellspacing="10">
<caption>表格標題</caption>
<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>
顯示結果:
表格標題
項目標題第一欄 |
項目標題第二欄 |
項目標題第三欄 |
項目內容第一列第一欄 |
項目內容第一列第二欄 |
項目內容第一列第三欄 |
項目內容第二列第一欄 |
項目內容第二列第二欄 |
項目內容第二列第三欄 |
當然我們也可在<TH>、<TD>的指令中加入對其內容控制的屬性,指令如下:
<TH ALIGN=left
| right | center VALIGN=top | middle | bottom | baseline>
<TD ALIGN=left | right | center VALIGN=top | middle | bottom | baseline>
其中ALIGN表示資料內容靠表格左、右、中位置;VALIGN表示資料內容靠表格上、中、下位置,例如:
<table border="1" cellpadding="15"
cellspacing="15" width="500" height="400">
<caption>表格標題</caption>
<tr>
<th ALIGN=left width="33%">項目標題靠左</th>
<th ALIGN=center width="33%">項目標題置中</th>
<th ALIGN=right width="33%">項目標題靠右</th>
</tr>
<tr>
<td VALIGN=top width="33%">項目內容靠上</td>
<td VALIGN=middle width="33%">項目內容置中</td>
<td VALIGN=bottom width="33%">項目內容靠下</td>
</tr>
<tr>
<td ALIGN=left VALIGN=top width="33%">項目內容靠左上</td>
<td ALIGN=center VALIGN=middle width="33%">項目內容置中</td>
<td ALIGN=right VALIGN=bottom width="33%">項目內容靠右下</td>
</tr>
</table>
顯示結果:
表格標題
項目標題靠左 |
項目標題置中 |
項目標題靠右 |
項目內容靠上 |
項目內容置中 |
項目內容靠下 |
項目內容靠左上 |
項目內容置中 |
項目內容靠右下 |
資料內容跨欄、跨列指令:
ROWSPAN=x(x視你要跨幾列而定)
COLSPAN=y(y視你要跨幾欄而定)
例子如下:
<TABLE BORDER=3 CELLSPACING=10
CELLSPADDING=10>
<CAPTION>表格標題</CAPTION>
<TR>
<TH COLSPAN=3>我是項目標題我跨三欄</TH>
</TR>
<TR>
<TD ROWSPAN=3 VALIGN=TOP>我跨三列並靠上</TD>
<TD ALIGN=CENTER COLSPAN=2>我跨兩欄並靠中</TD>
</TR>
<TR>
<TD ROWSPAN=2 VALIGN=BOTTOM>我跨二列並靠下</TD>
<TD>項目內容</TD>
</TR>
<TR>
<TD>項目內容</TD>
</TR>
</TABLE>
顯示結果:
表格標題
我是項目標題我跨三欄 |
我跨三列並靠上 |
我跨兩欄並靠中 |
我跨二列並靠下 |
項目內容 |
項目內容 |
為表格外框加上顏色:
<table bordercolor="#000099" border="3"
cellpadding="0" cellspacing="0">
<caption>表格標題</caption>
<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>
顯示結果:
表格標題
項目標題第一欄 |
項目標題第二欄 |
項目標題第三欄 |
項目內容第一列第一欄 |
項目內容第一列第二欄 |
項目內容第一列第三欄 |
項目內容第二列第一欄 |
項目內容第二列第二欄 |
項目內容第二列第三欄 |
|