1:表格的基本表現(xiàn)形式
<TABLE>
<TBODY>
<TR>
<TD>
內(nèi)容
</TD></TR></TBODY></TABLE>
注解：
<TABLE> </TABLE> 表格的代碼元素（必須）
<TBODY> </TBODY> 表格的主體元素（必須）
<TR> </TR> 表格的行元素 （必須）
<TD> </TD> 表格的單元格元素（必須）
2：表格的附屬屬性，以及屬性值
align 表格的水平排列屬性，可選屬性值有 left(居左) center(居中) right(居右)
bgcolor 表格的背景色屬性，屬性值為十六進(jìn)制的顏色代碼或是英文的顏色單詞
background 表格的背景圖片屬性，屬性值為圖片的網(wǎng)絡(luò)絕對地址，也可以是相對地址
width 表格的寬度屬性，屬性值為像素值，也可以是百分比的。如果是百分比的有兩種情況，1不是嵌套表格的，那么百分比是相對瀏覽器的。2如果是嵌套表格，那么它對應(yīng)的四嵌套表格所在的單元格。
height 表格的高度屬性，屬性值和寬度屬性是一樣的。
border 表格的邊框?qū)傩裕瑢傩灾禐橄袼刂怠?/font>
bordercolor 表格的邊框顏色屬性，屬性值為顏色代碼
bordercolorlight 表格的亮邊框?qū)傩?，屬性值為顏色代碼
bordercolordark 表格的暗邊框?qū)傩?，屬性值為顏色代碼
cellSpacing 表格的單元格間距屬性，屬性值為像素
cellpadding 表格的單元格邊距屬性，屬性值為像素
frame 表格的邊框樣式屬性，
屬性值可選
above 顯示上邊框
below 顯示下邊框
border 顯示上下左右邊框
box 顯示上下左右邊框
hsides 顯示上下邊框
lhs 顯示左做邊框
rhs 顯示右邊框
void 不顯示邊框
vsides 顯示左右邊框
rules 表格的內(nèi)部邊框?qū)傩?br> 屬性值可選
all 顯示所有的內(nèi)部邊框
cole 僅顯示行邊框
groups 顯示介于行列間的邊框
none 不顯示內(nèi)部邊框
rows 僅顯示列邊框
valign 表格內(nèi)內(nèi)容的對齊方式（垂直）屬性，屬性值為 top（頂部）, middle（中部）, bottom（底部）。
3：綜合練習(xí)
范例3-1：建立基本實(shí)用的表格(包含有水平排列屬性，背景色屬性，寬度，高度，邊框）
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=1>
<TBODY>
<TR>
<TD>
align 表格的水平排列屬性
bgcolor 表格的背景色屬性
width 表格的寬度屬性
height 表格的高度屬性
border 表格的邊框?qū)傩?br> </TD>
</TR>
</TBODY>
</TABLE>
范例3-2-1：添加單元格間距屬性
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=1 cellSpacing=10>
<TBODY>
<TR>
<TD>
cellSpacing 表格的單元格間距屬性，屬性值為像素
</TD>
</TR>
</TBODY>
</TABLE>
3-2-2：添加邊距屬性
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=1 cellpadding=10>
<TBODY>
<TR>
<TD>
cellpadding 表格的單元格邊距屬性，屬性值為像素
</TD>
</TR>
</TBODY>
</TABLE>
3-2-3：設(shè)定邊框顏色和調(diào)整邊框大小
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5 bordercolor=#0000ff>
<TBODY>
<TR>
<TD>
bordercolor=#0000ff
border=5
</TD>
</TR>
</TBODY>
</TABLE>
3-2-4：添加亮邊框和暗邊框?qū)傩?/font>
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5 cellSpacing=10 cellpadding=10 bordercolor=#0000ff bordercolorlight=red bordercolordark=green>
<TBODY>
<TR>
<TD>
bordercolorlight=red
bordercolordark=green
注意：添加了亮，暗邊框?qū)傩院螅?font color=#ff0033>bordercolor=#0000ff ，通常的邊框顏色屬性bordercolor就會自動(dòng)失效
</TD>
</TR>
</TBODY>
</TABLE>
3-2-5：制作多行表格
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5>
<TBODY>
<TR>
<TD>
第一行
</TD>
</TR>
<tr>
<td>
第二行
</td>
<tr>
</TBODY>
</TABLE>
3-2-6:建立多列表格
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5>
<TBODY>
<TR>
<TD>第一列</TD>
<TD>第二列</TD>
<TD>第三列</TD>
</TR>
</TBODY>
</TABLE>
3-2-7：建立多行多列表格
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5>
<TBODY>
<TR>
<TD>第一行第一列</TD><TD>第一行第二列</TD><TD>第一行第三列</TD>
</TR>
<TR>
<TD>第二行第一列</TD><TD>第二行第二列</TD><TD>第二行第三列</TD>
</TR>
<TR>
<TD>第三行第一列</TD><TD>第三行第二列</TD><TD>第三行第三列</TD>
</TR>
</TBODY>
</TABLE>
3-2-8：設(shè)定邊框的樣式
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5 bordercolor=red cellSpacing=10 cellpadding=10 frame=hsides>
<TBODY>
<TR>
<TD>第一行第一列</TD><TD>第一行第二列</TD><TD>第一行第三列</TD>
</TR>
<TR>
<TD>第二行第一列</TD><TD>第二行第二列</TD><TD>第二行第三列</TD>
</TR>
<TR>
<TD>第三行第一列</TD><TD>第三行第二列</TD><TD>第三行第三列</TD>
</TR>
</TBODY>
</TABLE>
3-2-9：設(shè)定內(nèi)部邊框的樣式
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5 bordercolor=red cellSpacing=10 cellpadding=10 rules=rows>
<TBODY>
<TR>
<TD>第一行第一列</TD><TD>第一行第二列</TD><TD>第一行第三列</TD>
</TR>
<TR>
<TD>第二行第一列</TD><TD>第二行第二列</TD><TD>第二行第三列</TD>
</TR>
<TR>
<TD>第三行第一列</TD><TD>第三行第二列</TD><TD>第三行第三列</TD>
</TR>
</TBODY>
</TABLE>
3-2-10:建立多層表格
<TABLE align=center bgcolor=#00ffff width=500 border=5 bordercolor=red cellSpacing=10 cellpadding=10>
<TBODY>
<TR>
<TD>
<TABLE align=center bgcolor=#0000ff width=100% border=5 bordercolor=red cellSpacing=10 cellpadding=10>
<TBODY>
<TR>
<TD>
<TABLE align=center bgcolor=#ff00ff width=100% height=300 border=5 bordercolor=red cellSpacing=10 cellpadding=10>
<TBODY>
<TR>
<TD>
建立了三層背景的表格
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
3-2-11：插入背景圖片
<TABLE align=center bgcolor=#00ffff width=460 height=600 background=http://www./zuopin/images/tupianimages/tupian/tupian_08.jpg border=1>
<TBODY>
<TR>
<TD>
插入背景圖片
</TD>
</TR>
</TBODY>
</TABLE>
3-2-12：表格內(nèi)內(nèi)容的對齊方式
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=5>
<TBODY>
<TR>
<TD valign="TOP">第一列</TD>
<TD valign="middle">第二列</TD>
<TD valign="bottom">第三列</TD>
</TR>
</TBODY>
</TABLE>
相關(guān)資料下載
點(diǎn)擊瀏覽該文件
表格的另類用法
效果：
此主題相關(guān)圖片如下：
源代碼：
源碼如下：
<html>
<head>
<style type="text/css">
.tb{BORDER-BOTTOM: #000000 1px dotted;BORDER-top: #000000 1px dotted;BORDER-LEFT:
#000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;}
</style>
</head>
<body>
<table width="100%" height="100" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="tb">另類用法</td>
</tr>
</tbody>
</table>
<p>
虛線直線1
<hr size=1 style="border:1px dotted #001403;">
虛線直線2
<p size=1 style="border:1px dotted #001403;">
</body>
</html>
范例3-1：
<TABLE align=center bgcolor=#00ffff width=500 height=300 border=1>
<TBODY>
<TR>
<TD>
align 表格的水平排列屬性
bgcolor 表格的背景色屬性
width 表格的寬度屬性
height 表格的高度屬性
border 表格的邊框?qū)傩?/font>
</TD>
</TR>
</TBODY>
</TABLE>
實(shí)際效果：
|
align 表格的水平排列屬性
bgcolor 表格的背景色屬性
width 表格的寬度屬性
height 表格的高度屬性
border 表格的邊框?qū)傩?
|
細(xì)解1
沒有設(shè)定表格的水平排列屬性，默認(rèn)的是居左
<TABLE width=200 height=200 border=1>
<TBODY>
<TR>
<TD>
沒有設(shè)定水平排列屬性
</TD>
</TR>
</TBODY>
</TABLE>
效果：
設(shè)定水平排列居中
<TABLE align=center width=200 height=200 border=1>
<TBODY>
<TR>
<TD>
設(shè)定水平排列屬性居中align=center
</TD>
</TR>
</TBODY>
</TABLE>
| 設(shè)定水平排列屬性居中align=center |
設(shè)定水平排列屬性居右
<TABLE align=right width=200 height=200 border=1>
<TBODY>
<TR>
<TD>
設(shè)定水平排列屬性居右align=right
</TD>
</TR>
</TBODY>
</TABLE>
| 設(shè)定水平排列屬性居右align=right |
改變表格的背景色 bgcolor
<TABLE bgcolor=#ff00ff width=300 height=100 border=1>
<TBODY>
<TR>
<TD>
bgcolor=#ff00ff 表格的背景色屬性
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE bgcolor=#0000ff width=300 height=100 border=1>
<TBODY>
<TR>
<TD>
bgcolor=#0000ff 表格的背景色屬性
</TD>
</TR>
</TBODY>
</TABLE>
改變邊框線的大小 border
<TABLE width=300 height=100 border=1>
<TBODY>
<TR>
<TD>
改變邊框線的大小 border=1
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE width=300 height=100 border=10>
<TBODY>
<TR>
<TD>
改變邊框線的大小 border=10
</TD>
</TR>
</TBODY>
</TABLE>
（在沒有設(shè)定邊框顏色時(shí)，邊框線有立體的效果）
設(shè)定單元格的間距屬性 cellSpacing （單元格與單元格之間的距離）
<TABLE width=200 height=100 border=2 cellSpacing=10>
<TBODY>
<TR>
<TD>
cellSpacing 表格的單元格間距屬性，屬性值為像素。cellSpacing=10
</TD>
</TR>
</TBODY>
</TABLE>
| cellSpacing 表格的單元格間距屬性，屬性值為像素。cellSpacing=10 |
<TABLE width=200 height=100 border=2 cellSpacing=5>
<TBODY>
<TR>
<TD>
cellSpacing 表格的單元格間距屬性，屬性值為像素。cellSpacing=5
</TD>
</TR>
</TBODY>
</TABLE>
| cellSpacing 表格的單元格間距屬性，屬性值為像素。cellSpacing=5 |
<TABLE width=200 height=100 border=2 cellSpacing=50>
<TBODY>
<TR>
<TD>
cellSpacing 表格的單元格間距屬性，屬性值為像素。cellSpacing=50
</TD>
</TR>
</TBODY>
</TABLE>
| cellSpacing 表格的單元格間距屬性，屬性值為像素。cellSpacing=50 |
（在默認(rèn)的情況下，也就是說沒有設(shè)定cellSpacing的屬性時(shí)，默認(rèn)的間距是1，你要想不體現(xiàn)有兩條邊框線，就要把cellSpacing的屬性值設(shè)為0）
2：設(shè)定單元格的邊距屬性 cellpadding （邊距屬性就是主體內(nèi)容與邊框線之間的距離）
<TABLE width=200 height=100 border=2 cellpadding=5>
<TBODY>
<TR>
<TD>
cellpadding 表格的單元格邊距屬性，屬性值為像素cellpadding=5
</TD>
</TR>
</TBODY>
</TABLE>
| cellpadding 表格的單元格邊距屬性，屬性值為像素cellpadding=5 |
<TABLE width=200 height=100 border=2 cellpadding=15>
<TBODY>
<TR>
<TD>
cellpadding 表格的單元格邊距屬性，屬性值為像素cellpadding=15
</TD>
</TR>
</TBODY>
</TABLE>
| cellpadding 表格的單元格邊距屬性，屬性值為像素cellpadding=15 |
<TABLE width=200 height=100 border=2 cellpadding=35>
<TBODY>
<TR>
<TD>
cellpadding 表格的單元格邊距屬性，屬性值為像素cellpadding=35
</TD>
</TR>
</TBODY>
</TABLE>
| cellpadding 表格的單元格邊距屬性，屬性值為像素cellpadding=35 |
設(shè)定邊框的顏色 bordercolor (邊框線的顏色，需要邊框線屬性border的配合）
<TABLE width=200 height=100 border=5 bordercolor=#0000ff>
<TBODY>
<TR>
<TD>
bordercolor=#0000ff
border=5
</TD>
</TR>
</TBODY>
</TABLE>
| bordercolor=#0000ff border=5 |
<TABLE width=200 height=100 border=5 bordercolor=#ff0000>
<TBODY>
<TR>
<TD>
bordercolor=#ff0000
border=5
</TD>
</TR>
</TBODY>
</TABLE>
| bordercolor=#ff0000 border=5 |
(如果我只想要一條邊框線，需要設(shè)定邊框單元格的間距屬性cellSpacing=0）
<TABLE width=200 cellspacing=0 height=100 border=5 bordercolor=#ff0000>
<TBODY>
<TR>
<TD>
cellspacing=0
bordercolor=#ff0000
border=5
</TD>
</TR>
</TBODY>
</TABLE>
| cellspacing=0 bordercolor=#ff0000 border=5 |
添加亮邊框 bordercolorlight 和暗邊框 bordercolordark 屬性。（必須要有邊框線border的配合）
(同時(shí)使用了亮，暗邊框?qū)傩院?，邊框線顏色屬性 bordercolor 會自動(dòng)失效)
<TABLE cellSpacing=5 width=300 height=150 border=5 bordercolor=#0000ff>
<TBODY>
<TR>
<TD>
只有邊框線顏色屬性bordercolor=#0000ff
cellSpacing=5
</TD>
</TR>
</TBODY>
</TABLE>
|
只有邊框線顏色屬性bordercolor=#0000ff
cellSpacing=5
|
添加亮邊框顏色bordercolorlight
<TABLE cellSpacing=5 width=300 height=150 border=5 bordercolor=#0000ff bordercolorlight=red>
<TBODY>
<TR>
<TD>
邊框線顏色屬性bordercolor=#0000ff
cellSpacing=5
亮邊框顏色屬性 bordercolorlight=red
</TD>
</TR>
</TBODY>
</TABLE>
|
邊框線顏色屬性bordercolor=#0000ff
cellSpacing=5
亮邊框顏色屬性 bordercolorlight=red
|
添加暗邊框顏色屬性bordercolordark
<TABLE cellSpacing=5 width=300 bordercolordark=green height=150 border=5 bordercolor=#0000ff bordercolorlight=red>
<TBODY>
<TR>
<TD>
邊框線顏色屬性bordercolor=#0000ff
cellSpacing=5
亮邊框顏色屬性 bordercolorlight=red
暗邊框顏色屬性 bordercolordark=green
</TD>
</TR>
</TBODY>
</TABLE>
|
邊框線顏色屬性bordercolor=#0000ff cellSpacing=5
亮邊框顏色屬性 bordercolorlight=red
暗邊框顏色屬性 bordercolordark=green
|
多行表格 tr
<TABLE width=200 height=100 border=5>
<TBODY>
<TR>
<TD>
第一行
</TD>
</TR>
<tr>
<td>
第二行
</td>
<tr>
</TBODY>
</TABLE>
<TABLE width=200 height=300 border=5>
<TBODY>
<TR>
<TD>
第一行
</TD>
</TR>
<TR>
<TD>
第二行
</TD>
</TR>
<TR>
<TD>
第三行
</TD>
</TR>
<TR>
<TD>
第四行
</TD>
</TR>
<tr>
<td>
第五行
</td>
<tr>
</TBODY>
</TABLE>
多列表格 td
<TABLE width=300 height=150 border=5>
<TBODY>
<TR>
<TD>第一列</TD>
<TD>第二列</TD>
<TD>第三列</TD>
</TR>
</TBODY>
</TABLE>
<TABLE width=300 height=150 border=5>
<TBODY>
<TR>
<TD>第一列</TD>
<TD>第二列</TD>
<TD>第三列</TD>
<TD>第四列</TD>
<TD>第五列</TD>
</TR>
</TBODY>
</TABLE>
多行多列表格的制作
<TABLE width=500 height=300 border=5>
<TBODY>
<TR>
<TD>第一行第一列</TD><TD>第一行第二列</TD><TD>第一行第三列</TD>
</TR>
<TR>
<TD>第二行第一列</TD><TD>第二行第二列</TD><TD>第二行第三列</TD>
</TR>
<TR>
<TD>第三行第一列</TD><TD>第三行第二列</TD><TD>第三行第三列</TD>
</TR>
</TBODY>
</TABLE>
| 第一行第一列 |
第一行第二列 |
第一行第三列 |
| 第二行第一列 |
第二行第二列 |
第二行第三列 |
| 第三行第一列 |
第三行第二列 |
第三行第三列 |
多層表格的制作
<TABLE align=center bgcolor=#00ffff width=500 border=5 bordercolor=red cellSpacing=10 cellpadding=10>
<TBODY>
<TR>
<TD>
<TABLE align=center bgcolor=#0000ff width=100% border=5 bordercolor=green cellSpacing=10 cellpadding=10>
<TBODY>
<TR>
<TD>
<TABLE align=center bgcolor=#ff00ff width=100% height=300 border=5 bordercolor=#44bb44 cellSpacing=10 cellpadding=10>
<TBODY>
<TR>
<TD>
建立三層的表格
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
插入背景圖片 background=圖片地址
素材
<TABLE width=100% cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314771306.jpg border=1>
<TBODY>
<TR>
<TD>
插入背景圖片<br.<br><br><br><br>一層表格
</TD>
</TR>
</TBODY>
</TABLE>
兩層表格
<TABLE width=100% cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314771306.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE width=100% cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314766266.jpg border=1>
<TBODY>
<TR>
<TD>
插入背景圖片<br><br><br><br><br>二層表格
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
三層表格
<TABLE width=100% cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314771306.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE width=100% cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314766266.jpg border=1>
<TBODY>
<TR>
<TD>
<TABLE width=100% cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314767489.jpg border=1>
<TBODY>
<TR>
<TD>
插入背景圖片<br><br><br><br><br>三層表格
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE id=1 width=100% cellSpacing=0 cellpadding=40 background=http://bbs./fileuploaddir/4B314771306.jpg>
<TBODY>
<TR>
<TD>
<TABLE id=2 width=100% cellSpacing=0 cellpadding=3 background=http://bbs./fileuploaddir/4B314766266.jpg>
<TBODY>
<TR>
<TD>
<TABLE id=3 width=100% cellSpacing=0 cellpadding=15 background=http://bbs./fileuploaddir/4B314770191.jpg>
<TBODY>
<TR>
<TD>
<TABLE id=4 width=100% cellSpacing=0 cellpadding=2 background=http://bbs./fileuploaddir/4B314766266.jpg>
<TBODY>
<TR>
<TD>
<TABLE id=5 width=100% cellSpacing=0 cellpadding=8 background=http://bbs./fileuploaddir/4B314771306.jpg>
<TBODY>
<TR>
<TD>
<TABLE id=6 width=100% cellSpacing=0 cellpadding=2 background=http://bbs./fileuploaddir/4B314766266.jpg>
<TBODY>
<TR>
<TD>
<TABLE id=7 width=100% cellSpacing=0 cellpadding=10 background=http://bbs./fileuploaddir/4B314767489.jpg>
<TBODY>
<TR>
<TD align=center>
<p>插入背景圖片<br><br>多層表格
<p><img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<p>插入背景圖片<br><br>多層表格
<p><img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<p>插入背景圖片<br><br>多層表格
<p><img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
<img src=http://bbs./fileuploaddir/4B314695521.gif>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
