9 walker studio-9w個人設計工作室
Google
.網頁設計接案業務
.加入GForce手機娛樂聯盟

.基礎HTML教學
.CSS樣式表教學
.基礎JAVASCRIPT教學
.JAVASCRIPT收集
.自製ASP程式下載
.色彩英文名對照
.16進位色碼對照一
.16進位色碼對照二
.可愛包子動畫圖庫
.MSN表情小圖示下載
.9W2U-1024X768桌布下載

.GForce付費手機遊戲
.免費遊戲房
.免費線上遊戲房
.免費檔案報報
.免費資源報報
.網站漫遊報報
.多國語言字母發音表

因網友留言內容
含成人色情內容
討論區即時停止運作
不便之處敬請見諒
● LOGO交換登錄
● 和我們連絡

 友站及其它連結
刑事警察局網際網路資訊站
591租屋網站
反毒害大聯盟
台灣認養地圖
KTzone日記, 論壇
::S.H.E 青春組織國際後援會::
基礎HTML教學
Hyper Markup Language

01 HTML簡介 10 分割畫面(Frameset)
02 HTML文件的基本架構及指令 11 超鏈結(Hyper Link)
03 製作第一份HTML文件 12 拋錨(Anchor)
04 網頁背景(Background) 13 表單(Form)
05 控制標題字元大小及字型指令 14 跑馬燈Internet Exploer專用
06 使用CSS控制字元屬性 15 文字編排
07 表格的運用(Table) 16 Meta 指令運用
08 清單(List) 17 標註指令列表
09 加入圖片
18 其他

07、表格的運用(Table)
表格的語法如下:
<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 定義表格標題
border 設定外框尺寸
cellpadding 設定內容與內邊的距離
cellspacing 設定表格內框線與外框線間的距離
bgcolor 設定背景顏色
bordercolor 設定邊框顏色
bordercolorlight 設定暗面邊界顏色
background 設定整個表格之背景使用圖檔
bordercolordark 設定光面邊界顏色
tr 定義行
td 定義內容
width 定義表格寬度
high 定義表格高度
rowspan 設定跨列數
align 設定資料內容置於表格左、右、中位置
valign 設定資料內容置於表格上、中、下位置
colspan 設定跨欄數

簡單的表格例子如下:
<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>


顯示結果:

表格標題
項目標題第一欄 項目標題第二欄 項目標題第三欄
項目內容第一列第一欄 項目內容第一列第二欄 項目內容第一列第三欄
項目內容第二列第一欄 項目內容第二列第二欄 項目內容第二列第三欄

表格內的底色語法如下:
<TH>或<TD>TAG中加上如bgcolor="#rrggbb"的敘述,例如:
<table border="1" width="308" align="center">
<tr>
<th bgcolor="#CC6699">這裡是TH BGCOLOR="#6666FF"的顏色</th>
</tr>
<tr>
<td bgcolor="#6666FF">這裡是TD BGCOLOR="#6666FF"的顏色</td>
</tr>
</table>


顯示結果:

這裡是TH BGCOLOR="#6666FF"的顏色
這裡是TD BGCOLOR="#6666FF"的顏色




表格內的底圖語法如下:
<TABLE>加上如background="圖檔位址"的敘述,例如:
<table border="1" width="401" align="left" background="http://www.9w2u.com/htmlbook/Book.gif" height="250" bordercolor="#333333">
<tr>
<th><div align="center"><font size="5" color="#3300FF">TEST</font></div></th>
<th><div align="center"><font size="5" color="#3300FF">TEST</font></div></th>
<th><div align="center"><font size="5" color="#3300FF">TEST</font></div></th>
</tr>
<tr>
<td><div align="center"><font color="#00FF00"><i><font size="5">TEST</font></i></font></div></td>
<td><div align="center"><font color="#00FF00"><i><font size="5">TEST</font></i></font></div></td>
<td><div align="center"><font color="#00FF00"><i><font size="5">TEST</font></i></font></div></td>
</tr>
</table>


顯示結果:

TEST
TEST
TEST
TEST
TEST
TEST





本站內容屬私人所有 請勿任易轉載 如須轉載 請通知本站
本站所鏈結標題及鍊結內容 皆歸原權利人所有
網站內容如有任何侵權 亦請通知本站刪除 謝謝!

Power by 9 Walker Studio
本站內容屬私人所有 請勿任易轉載 如須轉載請通知本站