表格在網站應用中(zhōng)非常廣泛,可以方便靈活的排版,很多動态大(dà)型網站也都是借助表格排版,表格可以把相互關聯的信息元素集中(zhōng)定位,使浏覽頁面的人一(yī)目了然.所以說要制作好網頁,就要學好表格
7-1 定義表格的基本語法
在html文檔中(zhōng)，表格是通過<table>,<th>,<tr>,<td>标簽來完成的，如下(xià)表所示：
表格标記 标 簽 描 述
<table>...</table> 用于定義一(yī)個表格開(kāi)始和結束
<th>...</th> 定義表頭單元格。表格中(zhōng)的文字将以粗體(tǐ)顯示，在表格中(zhōng)也可以不用此标簽，<th>标簽必須放(fàng)在<tr>标簽内
<tr>...</tr> 定義一(yī)行标簽，一(yī)組行标簽内可以建立多組由<td>或<th>标簽所定義的單元格
<td>...</td> 定義單元格标簽，一(yī)組<td>标簽将将建立一(yī)個單元格，<td>标簽必須放(fàng)在<tr>标簽内
在一(yī)個最基本的表格中(zhōng)，必須包含一(yī)組<table>标簽，一(yī)組标簽<tr>和一(yī)組<td>标簽或<th>。
實例：7-1.html
<HEAD>
<TITLE>一(yī)個簡單的表格</TITLE>
</HEAD>
<BODY>
<center>
<table>
<tr>
<td>第1行中(zhōng)的第1列</td>
<td>第1行中(zhōng)的第2列</td>
<td>第1行中(zhōng)的第3列</td>
</tr>
<tr>
<td>第2行中(zhōng)的第1列</td>
<td>第2行中(zhōng)的第2列</td>
<td>第2行中(zhōng)的第3列</td>
</tr>
</table>
</center>
</BODY>
</HTML>
7-2（1)表格<table>标簽的屬性
表格标簽<table>有很多屬性，最常用的屬性有：
<table>标簽的屬性 屬 性 描 述
width 表格的寬度
height 表格的高度
align 表格在頁面的水平擺放(fàng)位置
background 表格的背景圖片
bgcolor 表格的背景顔色
border 表格邊框的寬度（以像素爲單位）
bordercolor 表格邊框顔色
bordercolorlight 表格邊框明亮部分(fēn)的顔色
bordercolordark 表格邊框昏暗部分(fēn)的顔色
cellspacing 單元格之間的間距
cellpadding 單元格内容與單元格邊界之間的空白(bái)距離(lí)的大(dà)小(xiǎo)
實例：7-2-1.html
<html>
<head>
<title>無标題文檔</title>
</head>
<body>
<table border=10 bordercolor="#006803" align="center" bgcolor="#DDFFDD" width=500 height="200"bordercolorlight="#FFFFCC" bordercolordark="#660000" background="../../imge/b0024.gif" cellspacing="2" cellpadding="8">
<tr>
<td>第1行中(zhōng)的第1列</td>
<td>第1行中(zhōng)的第2列</td>
<td>第1行中(zhōng)的第3列</td>
</tr>
<tr>
<td>第2行中(zhōng)的第1列</td>
<td>第2行中(zhōng)的第2列</td>
<td>第2行中(zhōng)的第3列</td>
</tr>
</table>
</body>
</html>
7-2（2） 表格的邊框顯示狀态 frame
表格的邊框分(fēn)别有上邊框、下(xià)邊框、左邊框、右邊框。這四個邊框都可以設置爲顯示或隐藏狀态
語法格式：<table frame="邊框顯示值">
表格邊框顯示狀态frame的值的設定
frame的值 描 述
box 顯示整個表格邊框
void 不顯示表格邊框
hsides 隻顯示表格的上下(xià)邊框
vsides 隻顯示表格的左右邊框
alove 隻顯示表格的上邊框
below 隻顯示表格的下(xià)邊框
lhs 隻顯示表格的左邊框
rhs 隻顯示表格的右邊框
實例：7-2-2.html
<HTML>
<HEAD>
<TITLE>表格邊框的顯示狀态</TITLE>
</HEAD>
<BODY >
<TABLE border=6 bgcolor="#FFFFCC" frame="hsides" bordercolor="#9900FF" width="400" height="160">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年齡</TH>
<TH>專業</TH>
</TR>
<TR>
<TD>卡卡</TD>
<TD>男</TD>
<TD>50</TD>
<TD>計算機</TD>
</TR>
</TABLE>
</BODY>
</HTML>
7-4（3） 設置分(fēn)隔線的顯示狀态 rules
語法格式：<table rules="值">
分(fēn)隔線的顯示狀态rules的值的設定
rules的值 描 述
all 顯示所有分(fēn)隔線
groups 隻顯示組與組的分(fēn)隔線
rows 隻顯示行與行的分(fēn)隔線
cols 隻顯示列與列的分(fēn)隔線
none 所有分(fēn)隔線都不顯示
實例:7-2-3.html
<html>
<head>
<title>無标題文檔</title>
</head>
<body>
<TABLE border=6 bgcolor="#FFFFCC" rules="cols" bordercolor="#9900FF" width="400" height="160" align="center">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年齡</TH>
<TH>專業</TH>
</TR>
<TR>
<TD>笨笨貓</TD>
<TD>女</TD>
<TD>99</TD>
<TD>計算機</TD>
</TR>
</TABLE><p>
<TABLE border=6 bgcolor="#FFFFCC" rules="rows" bordercolor="#9900FF" width="400" height="160" align="center">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年齡</TH>
<TH>專業</TH>
</TR>
<TR>
<TD>笨笨貓</TD>
<TD>女</TD>
<TD>99</TD>
<TD>計算機</TD>
</TR>
</TABLE>
</body>
</html>
7-3 表格行的設定
表格是按行和列（單元格）組成的，一(yī)個表格有幾行組成就要有幾個行标簽<tr>，行标簽用它的屬性值來修飾，屬性都是可選的。
<tr>标簽的屬性
屬 性 描 述
align 行内容的水平對齊
valign 行内容的垂直對齊
bgcolor 行的背景顔色
bordercolo 行的邊框顔色
bordercolorlight 行的亮邊框顔色
bordercolordark 行的暗邊框顔色
<TR> 的參數設定（常用）：
<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">
實例：7-3.html
<HTML>
<HEAD>
<TITLE>表格行的控制</TITLE>
</HEAD>
<BODY>
<TABLE border=1 align="center" width="80%" height="150">
<TR ALIGN="CENTER">
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>年 齡</TH>
<TH>專 業</TH>
</TR>
<TR ALIGN=CENTER bordercolor="#336600" bgcolor="#C1FFC1">
<TD>咚 咚</TD>
<TD>男</TD>
<TD>18</TD>
<TD>學 生(shēng)</TD>
</tr>
<tr align=center height=50 bordercolor=navy bgcolor="#86B8E1" valign=bottom bordercolorlight="#E1F0FD" bordercolordark="#002346">
<TD>楠 楠</TD>
<TD>女</TD>
<TD>17</TD>
<TD>學 生(shēng)</TD>
</TR>
</TABLE>
</BODY>
</HTML>
7-4 單元格的設定
<th>和<td>都是插入單元格的标簽，這兩個标簽必須嵌套在<tr>标簽内。是成對出現的。<th>用于表頭标簽，表頭标簽一(yī)般位于首行或首列，标簽之間的内容就是位于該單元格内的标題内容，其中(zhōng)的文字以粗體(tǐ)居中(zhōng)顯示。數據标簽<td>就是該單元格中(zhōng)的具體(tǐ)數據内容,<th>和<td>标簽的屬性都是一(yī)樣的，屬性設定如下(xià)：
<th>和<td>的屬性
屬 性 描 述
width/height 單元格的寬和高，接受絕對值（如 80）及相對值（如 80%）。
colspan 單元格向右打通的欄數
rowspan 單元格向下(xià)打通的列數
align 單元格内字畫等的擺放(fàng)貼，位置（水平），可選值爲： left, center, right。
valign 單元格内字畫等的擺放(fàng)貼 位置（垂直），可選值爲： top, middle, bottom。
bgcolor 單元格的底色
bordercolor 單元格邊框顔色
bordercolorlight 單元格邊框向光部分(fēn)的顔色
bordercolordark 單元格邊框背光部分(fēn)的顔色
background 單元格 背景圖片
<TD> 的參數設定格式：
例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">
實例：7-4.html
<HTML>
<HEAD>
<TITLE>單元格的設定</TITLE>
</HEAD>
<BODY>
<TABLE border=1 align="center" height="150" width="80%">
<TR>
<TH width=70 bgcolor="#FFCC00">姓 名</TH>
<TH bgcolor="#FFCCFF">性 别</TH>
<TH background="../../imge/b0024.gif">年 齡</TH>
<TH background="../../imge/aki-5.gif">專 業</TH>
</TR>
<TR>
<TD bordercolor=red align="left">笨笨貓</TD>
<TD bordercolorlight="#FFCCFF" bordercolordark="#FF0000" align="center">女</TD>
<TD bgcolor="#FFFFCC" valign="bottom" align="center">18</TD>
<TD bgcolor="#CCFFFF" align="right">學生(shēng)</TD>
</TR>
</TABLE>
</BODY>
</HTML>
7-5 設定跨多行多列單元格
要創建跨多行、多列的單元格，隻需在<TH>或<TD>中(zhōng)加入ROWSPAN或COLSPAN屬性的屬性值，默認值爲1。表明了表格中(zhōng)要跨越的行或列的個數。
跨多列的語法： <th colspan=#> <td colspan=#>
colspan表示跨越的列數，例如colspan=2表示這一(yī)格的寬度爲兩個列的寬度。
跨多行的語法： <th rowspan=#> <td rowspan=#>
rowspan所要表示的意義是指跨越的行數，例如rowspan=2就表示這一(yī)格跨越表格兩個行的高度。
實例：7-5.html
<html>
<head>
<title>跨多行跨多列的單元格</title>
</head>
<body>
<center>
<table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">
<TR ALIGN=center>
<TH colspan=3> 學生(shēng)基本信息</TH>
<TH colspan=2>成 績</TH>
</TR>
<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>專 業</TH>
<TH>課 程</TH>
<TH>分(fēn) 數</TH>
</TR>
<TR ALIGN=center>
<TD>咚 咚</TD>
<TD>男</TD>
<TD rowspan=2>計算機</TD><TD rowspan=2>程序設計</TD>
<TD>68</TD>
</TR>
<TR ALIGN=center>
<TD>喃 喃</TD>
<TD>女</TD>
<TD>89</TD>
</TR>
</table>
</body>
</html>
7-6 表格的分(fēn)組
7-6-1 表格的行分(fēn)組<thead>/<tbody>/<tfoot>
html文檔的表格按行分(fēn)組是由表頭标簽<thead>、表格主體(tǐ)标簽<tbody>和尾注标簽<tfoot>三個部分(fēn)組成的。其中(zhōng)尾注标簽很少用。<thead>标簽是成對标簽，其标簽内是由表頭标簽标識的表頭元素。<tbody>标簽用于規定表格主體(tǐ)部分(fēn)的元素。<thead>和<tbody>标簽的屬性和<th><td>标簽是一(yī)樣的。
實例：7-6-1.html
<html>
<head>
<title>表格按行分(fēn)組</title>
</head>
<body>
<center>
<table border=3 width=60% align="center" height="150">
<thead bgcolor="#CCFFCC">
<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>專 業</TH>
</TR>
</thead>
<tbody bgcolor="#448FBD">
<TR ALIGN=center>
<TD>咚 咚</TD><TD>男</TD><TD>計算機</TD>
</TR>
<TR ALIGN=center>
<TD>喃 喃</TD><TD>女</TD><TD>園 林</TD>
</TR>
</tbody>
</table>
</body>
</html>
7-6-2 表格按列分(fēn)組<colgroup>
html使用<colgroup>标簽來将表格分(fēn)組。
語法格式：<colgroup span="數值" align="參數">
說明：<colgroup>标簽有兩個屬性，span和align, 他們都是可選的。span屬性的值是數字，表示該組包含的列數，默認值爲1。align屬性用以規定該組所跨列中(zhōng)所有單元格中(zhōng)内容在水平方向上的位置。該屬性的值爲left,center,right之一(yī)。它們表示單元格的内容是左對齊，水平居中(zhōng)還是右對齊。
實例：7-6-2.html
<html>
<head>
<title>表格按列分(fēn)組</title>
</head>
<center>
<table border=10 width=80% height="160" align="center" bordercolorlight="#CCCCFF" bordercolordark="#9900FF">
<tr>
<th>姓名</th><th>性别</th><th>專業</th><th>分(fēn)數</th>
</tr>
<colgroup span=2 align=center>
<colgroup align =left>
<colgroup align=right>
<tr>
<td>咚 咚</td><td>男</td><td>計算機</td><td>79</td>
</tr>
<tr>
<td>喃 喃</td><td>女</td><td>園 林</td><td>90</td>
</tr>
<tr>
<td>依 依</td><td>女</td><td>微波通信</td><td>76<td>
</tr>
</table>
</body>
</html>
7-6-3 表格的行列分(fēn)組
實例：7-6-3.html
<HTML>
<HEAD>
<TITLE>同時進行行列分(fēn)組</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900FF">
<THEAD bgcolor="#FFFFCC">
<TR><TH>姓名</TH><TH>性别</TH><TH>專業</TH><TH>分(fēn)數</TH>
<TR>
</THEAD>
<COLGROUP SPAN=2 ALIGN=CENTER>
<COLGROUP ALIGN=LEFT>
<COLGROUP ALIGN=RIGHT>
<TBODY bgcolor="#FFCCFF">
<TR>
<TD>咚 咚</TD><TD>男</TD><TD>計算機</TD><TD>85</TD>
</TR>
<TR>
<TD>喃 喃</TD><TD>女</TD><TD>園 林</TD><TD>94</TD>
</TR>
<TR>
<TD>依 依</TD><TD>女</TD><TD>微波通信</TD><TD>87</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
7-7 表格的标題标簽<caption>
表格标題的位置，可由ALIGN屬性和VALIGN屬性來設置，ALIGN屬性設置标題位于文檔的左，中(zhōng)，右。 VALIGN屬性設置标題位于表格的上方和表格的下(xià)方。下(xià)面爲表格标題位置的設置格式。
語法格式：
<caption align="值" valign="值" >表哥标題</caption>
<caption>應放(fàng)在<table>标簽内，在表格行标簽<tr>标簽之前。
<caption>标簽的默認屬性是标題位于表格的上方中(zhōng)間位置。
實例：7-7.html
<html>
<head>
<title>表格的标題标簽</title>
</head>
<body>
<center>
<table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">
<caption>學生(shēng)信息表</caption>
<TR ALIGN=center>
<TH colspan=3> 學生(shēng)基本信息</TH>
<TH colspan=2>成 績</TH>
</TR>
<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>專 業</TH>
<TH>課 程</TH>
<TH>分(fēn) 數</TH>
</TR>
<TR ALIGN=center>
<TD>咚 咚</TD>
<TD>男</TD>
<TD rowspan=2>計算機</TD><TD rowspan=2>程序設計</TD>
<TD>68</TD>
</TR>
<TR ALIGN=center>
<TD>喃 喃</TD>
<TD>女</TD>
<TD>89</TD>
</TR>
</body>
</html>
7-8 表格的嵌套
在html頁面中(zhōng)，使用表格排版是通過嵌套來完成的，即一(yī)個表格内部可以嵌套另一(yī)個表格，用表格來排版頁面的思路是：由總表格規劃整體(tǐ)的結構，由嵌套的表格負責各個子欄目的排版，并插入到表格的相應位置，這樣就可以使頁面的各個部分(fēn)有條不紊，互不沖突，看上去(qù)清晰整潔。在實際做網頁時一(yī)般不顯示邊框,邊框的顯示可根據自己的愛好來設定。在實例中(zhōng)爲了讓大(dà)家能夠看清楚，都設置了有邊框。
實例7-8.html
<html>
<head>
<title>表格嵌套</title>
</head>
<body bgcolor="#555555" text="#FFFFFF">
<table width="560" border="3" cellspacing="1" cellpadding="1" align="center">
<tr>
<td width="100" height="69">網頁标志(zhì)</td>
<td colspan="2"><div align="center">廣告條</div></td>
</tr>
<tr>
<td height="330"><table width="100" height="321" border="3" align="center" cellpadding="1" cellspacing="1">
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td height="90">内容六</td>
</tr>
</table></td>
<td width="275"><table width="275" height="325" border="3" cellpadding="1" cellspacing="1">
<tr>
<td width="263">内容一(yī)</td>
</tr>
<tr>
<td>内容二</td>
</tr>
</table></td>
<td width="163"><table width="157" height="320" border="3" cellpadding="1" cellspacing="1" align="center">
<tr>
<td width="136" height="94">内容三</td>
</tr>
<tr>
<td height="62">内容四</td>
</tr>
<tr>
<td height="160">内容五</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
7-1 定義表格的基本語法
在html文檔中(zhōng)，表格是通過<table>,<th>,<tr>,<td>标簽來完成的，如下(xià)表所示：
表格标記 标 簽 描 述
<table>...</table> 用于定義一(yī)個表格開(kāi)始和結束
<th>...</th> 定義表頭單元格。表格中(zhōng)的文字将以粗體(tǐ)顯示，在表格中(zhōng)也可以不用此标簽，<th>标簽必須放(fàng)在<tr>标簽内
<tr>...</tr> 定義一(yī)行标簽，一(yī)組行标簽内可以建立多組由<td>或<th>标簽所定義的單元格
<td>...</td> 定義單元格标簽，一(yī)組<td>标簽将将建立一(yī)個單元格，<td>标簽必須放(fàng)在<tr>标簽内
在一(yī)個最基本的表格中(zhōng)，必須包含一(yī)組<table>标簽，一(yī)組标簽<tr>和一(yī)組<td>标簽或<th>。
實例：7-1.html
<HEAD>
<TITLE>一(yī)個簡單的表格</TITLE>
</HEAD>
<BODY>
<center>
<table>
<tr>
<td>第1行中(zhōng)的第1列</td>
<td>第1行中(zhōng)的第2列</td>
<td>第1行中(zhōng)的第3列</td>
</tr>
<tr>
<td>第2行中(zhōng)的第1列</td>
<td>第2行中(zhōng)的第2列</td>
<td>第2行中(zhōng)的第3列</td>
</tr>
</table>
</center>
</BODY>
</HTML>
7-2（1)表格<table>标簽的屬性
表格标簽<table>有很多屬性，最常用的屬性有：
<table>标簽的屬性 屬 性 描 述
width 表格的寬度
height 表格的高度
align 表格在頁面的水平擺放(fàng)位置
background 表格的背景圖片
bgcolor 表格的背景顔色
border 表格邊框的寬度（以像素爲單位）
bordercolor 表格邊框顔色
bordercolorlight 表格邊框明亮部分(fēn)的顔色
bordercolordark 表格邊框昏暗部分(fēn)的顔色
cellspacing 單元格之間的間距
cellpadding 單元格内容與單元格邊界之間的空白(bái)距離(lí)的大(dà)小(xiǎo)
實例：7-2-1.html
<html>
<head>
<title>無标題文檔</title>
</head>
<body>
<table border=10 bordercolor="#006803" align="center" bgcolor="#DDFFDD" width=500 height="200"bordercolorlight="#FFFFCC" bordercolordark="#660000" background="../../imge/b0024.gif" cellspacing="2" cellpadding="8">
<tr>
<td>第1行中(zhōng)的第1列</td>
<td>第1行中(zhōng)的第2列</td>
<td>第1行中(zhōng)的第3列</td>
</tr>
<tr>
<td>第2行中(zhōng)的第1列</td>
<td>第2行中(zhōng)的第2列</td>
<td>第2行中(zhōng)的第3列</td>
</tr>
</table>
</body>
</html>
7-2（2） 表格的邊框顯示狀态 frame
表格的邊框分(fēn)别有上邊框、下(xià)邊框、左邊框、右邊框。這四個邊框都可以設置爲顯示或隐藏狀态
語法格式：<table frame="邊框顯示值">
表格邊框顯示狀态frame的值的設定
frame的值 描 述
box 顯示整個表格邊框
void 不顯示表格邊框
hsides 隻顯示表格的上下(xià)邊框
vsides 隻顯示表格的左右邊框
alove 隻顯示表格的上邊框
below 隻顯示表格的下(xià)邊框
lhs 隻顯示表格的左邊框
rhs 隻顯示表格的右邊框
實例：7-2-2.html
<HTML>
<HEAD>
<TITLE>表格邊框的顯示狀态</TITLE>
</HEAD>
<BODY >
<TABLE border=6 bgcolor="#FFFFCC" frame="hsides" bordercolor="#9900FF" width="400" height="160">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年齡</TH>
<TH>專業</TH>
</TR>
<TR>
<TD>卡卡</TD>
<TD>男</TD>
<TD>50</TD>
<TD>計算機</TD>
</TR>
</TABLE>
</BODY>
</HTML>
7-4（3） 設置分(fēn)隔線的顯示狀态 rules
語法格式：<table rules="值">
分(fēn)隔線的顯示狀态rules的值的設定
rules的值 描 述
all 顯示所有分(fēn)隔線
groups 隻顯示組與組的分(fēn)隔線
rows 隻顯示行與行的分(fēn)隔線
cols 隻顯示列與列的分(fēn)隔線
none 所有分(fēn)隔線都不顯示
實例:7-2-3.html
<html>
<head>
<title>無标題文檔</title>
</head>
<body>
<TABLE border=6 bgcolor="#FFFFCC" rules="cols" bordercolor="#9900FF" width="400" height="160" align="center">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年齡</TH>
<TH>專業</TH>
</TR>
<TR>
<TD>笨笨貓</TD>
<TD>女</TD>
<TD>99</TD>
<TD>計算機</TD>
</TR>
</TABLE><p>
<TABLE border=6 bgcolor="#FFFFCC" rules="rows" bordercolor="#9900FF" width="400" height="160" align="center">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年齡</TH>
<TH>專業</TH>
</TR>
<TR>
<TD>笨笨貓</TD>
<TD>女</TD>
<TD>99</TD>
<TD>計算機</TD>
</TR>
</TABLE>
</body>
</html>
7-3 表格行的設定
表格是按行和列（單元格）組成的，一(yī)個表格有幾行組成就要有幾個行标簽<tr>，行标簽用它的屬性值來修飾，屬性都是可選的。
<tr>标簽的屬性
屬 性 描 述
align 行内容的水平對齊
valign 行内容的垂直對齊
bgcolor 行的背景顔色
bordercolo 行的邊框顔色
bordercolorlight 行的亮邊框顔色
bordercolordark 行的暗邊框顔色
<TR> 的參數設定（常用）：
<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">
實例：7-3.html
<HTML>
<HEAD>
<TITLE>表格行的控制</TITLE>
</HEAD>
<BODY>
<TABLE border=1 align="center" width="80%" height="150">
<TR ALIGN="CENTER">
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>年 齡</TH>
<TH>專 業</TH>
</TR>
<TR ALIGN=CENTER bordercolor="#336600" bgcolor="#C1FFC1">
<TD>咚 咚</TD>
<TD>男</TD>
<TD>18</TD>
<TD>學 生(shēng)</TD>
</tr>
<tr align=center height=50 bordercolor=navy bgcolor="#86B8E1" valign=bottom bordercolorlight="#E1F0FD" bordercolordark="#002346">
<TD>楠 楠</TD>
<TD>女</TD>
<TD>17</TD>
<TD>學 生(shēng)</TD>
</TR>
</TABLE>
</BODY>
</HTML>
7-4 單元格的設定
<th>和<td>都是插入單元格的标簽，這兩個标簽必須嵌套在<tr>标簽内。是成對出現的。<th>用于表頭标簽，表頭标簽一(yī)般位于首行或首列，标簽之間的内容就是位于該單元格内的标題内容，其中(zhōng)的文字以粗體(tǐ)居中(zhōng)顯示。數據标簽<td>就是該單元格中(zhōng)的具體(tǐ)數據内容,<th>和<td>标簽的屬性都是一(yī)樣的，屬性設定如下(xià)：
<th>和<td>的屬性
屬 性 描 述
width/height 單元格的寬和高，接受絕對值（如 80）及相對值（如 80%）。
colspan 單元格向右打通的欄數
rowspan 單元格向下(xià)打通的列數
align 單元格内字畫等的擺放(fàng)貼，位置（水平），可選值爲： left, center, right。
valign 單元格内字畫等的擺放(fàng)貼 位置（垂直），可選值爲： top, middle, bottom。
bgcolor 單元格的底色
bordercolor 單元格邊框顔色
bordercolorlight 單元格邊框向光部分(fēn)的顔色
bordercolordark 單元格邊框背光部分(fēn)的顔色
background 單元格 背景圖片
<TD> 的參數設定格式：
例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">
實例：7-4.html
<HTML>
<HEAD>
<TITLE>單元格的設定</TITLE>
</HEAD>
<BODY>
<TABLE border=1 align="center" height="150" width="80%">
<TR>
<TH width=70 bgcolor="#FFCC00">姓 名</TH>
<TH bgcolor="#FFCCFF">性 别</TH>
<TH background="../../imge/b0024.gif">年 齡</TH>
<TH background="../../imge/aki-5.gif">專 業</TH>
</TR>
<TR>
<TD bordercolor=red align="left">笨笨貓</TD>
<TD bordercolorlight="#FFCCFF" bordercolordark="#FF0000" align="center">女</TD>
<TD bgcolor="#FFFFCC" valign="bottom" align="center">18</TD>
<TD bgcolor="#CCFFFF" align="right">學生(shēng)</TD>
</TR>
</TABLE>
</BODY>
</HTML>
7-5 設定跨多行多列單元格
要創建跨多行、多列的單元格，隻需在<TH>或<TD>中(zhōng)加入ROWSPAN或COLSPAN屬性的屬性值，默認值爲1。表明了表格中(zhōng)要跨越的行或列的個數。
跨多列的語法： <th colspan=#> <td colspan=#>
colspan表示跨越的列數，例如colspan=2表示這一(yī)格的寬度爲兩個列的寬度。
跨多行的語法： <th rowspan=#> <td rowspan=#>
rowspan所要表示的意義是指跨越的行數，例如rowspan=2就表示這一(yī)格跨越表格兩個行的高度。
實例：7-5.html
<html>
<head>
<title>跨多行跨多列的單元格</title>
</head>
<body>
<center>
<table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">
<TR ALIGN=center>
<TH colspan=3> 學生(shēng)基本信息</TH>
<TH colspan=2>成 績</TH>
</TR>
<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>專 業</TH>
<TH>課 程</TH>
<TH>分(fēn) 數</TH>
</TR>
<TR ALIGN=center>
<TD>咚 咚</TD>
<TD>男</TD>
<TD rowspan=2>計算機</TD><TD rowspan=2>程序設計</TD>
<TD>68</TD>
</TR>
<TR ALIGN=center>
<TD>喃 喃</TD>
<TD>女</TD>
<TD>89</TD>
</TR>
</table>
</body>
</html>
7-6 表格的分(fēn)組
7-6-1 表格的行分(fēn)組<thead>/<tbody>/<tfoot>
html文檔的表格按行分(fēn)組是由表頭标簽<thead>、表格主體(tǐ)标簽<tbody>和尾注标簽<tfoot>三個部分(fēn)組成的。其中(zhōng)尾注标簽很少用。<thead>标簽是成對标簽，其标簽内是由表頭标簽标識的表頭元素。<tbody>标簽用于規定表格主體(tǐ)部分(fēn)的元素。<thead>和<tbody>标簽的屬性和<th><td>标簽是一(yī)樣的。
實例：7-6-1.html
<html>
<head>
<title>表格按行分(fēn)組</title>
</head>
<body>
<center>
<table border=3 width=60% align="center" height="150">
<thead bgcolor="#CCFFCC">
<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>專 業</TH>
</TR>
</thead>
<tbody bgcolor="#448FBD">
<TR ALIGN=center>
<TD>咚 咚</TD><TD>男</TD><TD>計算機</TD>
</TR>
<TR ALIGN=center>
<TD>喃 喃</TD><TD>女</TD><TD>園 林</TD>
</TR>
</tbody>
</table>
</body>
</html>
7-6-2 表格按列分(fēn)組<colgroup>
html使用<colgroup>标簽來将表格分(fēn)組。
語法格式：<colgroup span="數值" align="參數">
說明：<colgroup>标簽有兩個屬性，span和align, 他們都是可選的。span屬性的值是數字，表示該組包含的列數，默認值爲1。align屬性用以規定該組所跨列中(zhōng)所有單元格中(zhōng)内容在水平方向上的位置。該屬性的值爲left,center,right之一(yī)。它們表示單元格的内容是左對齊，水平居中(zhōng)還是右對齊。
實例：7-6-2.html
<html>
<head>
<title>表格按列分(fēn)組</title>
</head>
<center>
<table border=10 width=80% height="160" align="center" bordercolorlight="#CCCCFF" bordercolordark="#9900FF">
<tr>
<th>姓名</th><th>性别</th><th>專業</th><th>分(fēn)數</th>
</tr>
<colgroup span=2 align=center>
<colgroup align =left>
<colgroup align=right>
<tr>
<td>咚 咚</td><td>男</td><td>計算機</td><td>79</td>
</tr>
<tr>
<td>喃 喃</td><td>女</td><td>園 林</td><td>90</td>
</tr>
<tr>
<td>依 依</td><td>女</td><td>微波通信</td><td>76<td>
</tr>
</table>
</body>
</html>
7-6-3 表格的行列分(fēn)組
實例：7-6-3.html
<HTML>
<HEAD>
<TITLE>同時進行行列分(fēn)組</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900FF">
<THEAD bgcolor="#FFFFCC">
<TR><TH>姓名</TH><TH>性别</TH><TH>專業</TH><TH>分(fēn)數</TH>
<TR>
</THEAD>
<COLGROUP SPAN=2 ALIGN=CENTER>
<COLGROUP ALIGN=LEFT>
<COLGROUP ALIGN=RIGHT>
<TBODY bgcolor="#FFCCFF">
<TR>
<TD>咚 咚</TD><TD>男</TD><TD>計算機</TD><TD>85</TD>
</TR>
<TR>
<TD>喃 喃</TD><TD>女</TD><TD>園 林</TD><TD>94</TD>
</TR>
<TR>
<TD>依 依</TD><TD>女</TD><TD>微波通信</TD><TD>87</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
7-7 表格的标題标簽<caption>
表格标題的位置，可由ALIGN屬性和VALIGN屬性來設置，ALIGN屬性設置标題位于文檔的左，中(zhōng)，右。 VALIGN屬性設置标題位于表格的上方和表格的下(xià)方。下(xià)面爲表格标題位置的設置格式。
語法格式：
<caption align="值" valign="值" >表哥标題</caption>
<caption>應放(fàng)在<table>标簽内，在表格行标簽<tr>标簽之前。
<caption>标簽的默認屬性是标題位于表格的上方中(zhōng)間位置。
實例：7-7.html
<html>
<head>
<title>表格的标題标簽</title>
</head>
<body>
<center>
<table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">
<caption>學生(shēng)信息表</caption>
<TR ALIGN=center>
<TH colspan=3> 學生(shēng)基本信息</TH>
<TH colspan=2>成 績</TH>
</TR>
<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>專 業</TH>
<TH>課 程</TH>
<TH>分(fēn) 數</TH>
</TR>
<TR ALIGN=center>
<TD>咚 咚</TD>
<TD>男</TD>
<TD rowspan=2>計算機</TD><TD rowspan=2>程序設計</TD>
<TD>68</TD>
</TR>
<TR ALIGN=center>
<TD>喃 喃</TD>
<TD>女</TD>
<TD>89</TD>
</TR>
</body>
</html>
7-8 表格的嵌套
在html頁面中(zhōng)，使用表格排版是通過嵌套來完成的，即一(yī)個表格内部可以嵌套另一(yī)個表格，用表格來排版頁面的思路是：由總表格規劃整體(tǐ)的結構，由嵌套的表格負責各個子欄目的排版，并插入到表格的相應位置，這樣就可以使頁面的各個部分(fēn)有條不紊，互不沖突，看上去(qù)清晰整潔。在實際做網頁時一(yī)般不顯示邊框,邊框的顯示可根據自己的愛好來設定。在實例中(zhōng)爲了讓大(dà)家能夠看清楚，都設置了有邊框。
實例7-8.html
<html>
<head>
<title>表格嵌套</title>
</head>
<body bgcolor="#555555" text="#FFFFFF">
<table width="560" border="3" cellspacing="1" cellpadding="1" align="center">
<tr>
<td width="100" height="69">網頁标志(zhì)</td>
<td colspan="2"><div align="center">廣告條</div></td>
</tr>
<tr>
<td height="330"><table width="100" height="321" border="3" align="center" cellpadding="1" cellspacing="1">
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td>标題欄</td>
</tr>
<tr>
<td height="90">内容六</td>
</tr>
</table></td>
<td width="275"><table width="275" height="325" border="3" cellpadding="1" cellspacing="1">
<tr>
<td width="263">内容一(yī)</td>
</tr>
<tr>
<td>内容二</td>
</tr>
</table></td>
<td width="163"><table width="157" height="320" border="3" cellpadding="1" cellspacing="1" align="center">
<tr>
<td width="136" height="94">内容三</td>
</tr>
<tr>
<td height="62">内容四</td>
</tr>
<tr>
<td height="160">内容五</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
文章來源：http://longka.flasher123.com/zy/index/h7.html
475003427