網(wǎng)易代碼 2009-10-01 03:06:07 閱讀7 評論0 字號：大中小
表格通用格式： <TABLE屬性名="屬性值"><TR屬性名="屬性值"><TD屬性名="屬性值">文字或圖片</TD></TR> </TABLE>
<表格標簽名 屬性名="屬性值"><行標簽 屬性="屬性值"><列標簽 屬性="屬性值">表中元素</列標簽></行標簽></表格標簽名>
表格標簽屬性： <table屬性="屬性值"></table>
align="水平對齊"： center 中 left 左 right 右
valign="垂直對齊"： top 上 middle：中 bottom 下
background="背景圖案"：圖片的地址
bgcolor="背景顏色"：各種顏色代碼
border="邊框寬度"：數(shù)字
bordercolor="邊框顏色"：各種顏色代碼
cellpadding="單元格內容與單元格邊框之間的距離"：數(shù)字
cellspacing="單元格之間的距離"：
height="表格高度"：絕對值（數(shù)字）相對值（%）
width="表格寬度"：絕對值（數(shù)字）相對值（%）
bordercolorlight="表格邊框向光部分的顏色"：各種顏色代碼
bordercolordark="表格邊框背光部分的顏色"：各種顏色代碼
使用 bordercolorlight 或 bordercolordark 時，
bordercolor將會失效,即不能同時使用。
frame="邊框顯示值" 表格外框線的顯示方式
box 顯示整個表格邊框
void 不顯示表格邊框
hsides 只顯示表格的上下邊框
vsides 只顯示表格的左右邊框
alove 只顯示表格的上邊框
below 只顯示表格的下邊框
lhs 只顯示表格的左邊框
rhs 只顯示表格的右邊框
rules="分隔線值" 分隔線的顯示狀態(tài)
all 顯示所有分隔線
groups 只顯示組與組的分隔線
rows 只顯示行與行的分隔線
cols 只顯示列與列的分隔線
none 所有分隔線都不顯示
行標簽的屬性： <tr屬性="屬性值"></tr>
align 行內容的水平對齊
valign 行內容的垂直對齊
bgcolor 行的背景顏色
bordercolo 行的邊框顏色
bordercolorlight 行的亮邊框顏色
bordercolordark 行的暗邊框顏色
單元格的屬性：即表頭標簽<th></th>和列標簽<td></td>的屬性，它們都位于<tr></tr>之間。
其格式和屬性是：<th屬性="屬性值"></th> <td屬性="屬性值"></td>
width/height 單元格的寬和高，接受絕對值（如 80）及相對值（如 80%）。
colspan 單元格向右打通的欄數(shù)
rowspan 單元格向下打通的列數(shù)
align 單元格內字畫等的擺放貼，位置（水平），可選值為： left, center, right。
valign 單元格內字畫等的擺放貼 位置（垂直），可選值為： top, middle, bottom。
bgcolor 單元格的底色
bordercolor 單元格邊框顏色
bordercolorlight 單元格邊框向光部分的顏色
bordercolordark 單元格邊框背光部分的顏色
background 單元格 背景圖片
跨多行跨多列：
<TD rowspan="合并行數(shù)"></TD>：數(shù)字 即，跨多行
<TD colspan="合并列數(shù)"></TD>：數(shù)字 即，跨多列
表格行列分組：
行分組有：表頭標簽 <thead></thead> 屬性和<th><td>標簽一樣。
表格主體標簽 <tbody></tbody> 屬性和<th><td>標簽一樣。
尾注標簽 <tfoot>
列分組標簽： <colgroup 屬性="屬性值">
span="該組包含的列數(shù)"：數(shù)字
align="對齊"： left 左, center 中, right 右。
行列同時分組（見實例）
表格標題標簽： <caption屬性="屬性值">標題文字</caption>
align="水平對齊"： left 左, center 中, right右
valign="垂直對齊"： top：向上 middle：向中 bottom：向下
<caption>應放在<table>標簽后，在表格行標簽<tr>標簽之前。
<caption>標簽的默認屬性是標題位于表格的上方中間位置。
表格嵌套：
在html頁面中，使用表格排版是通過嵌套來完成的。由總表格規(guī)劃整體的結構，由嵌套的表格負責各個子欄目的排版，并插入到表格的相應位置，這樣就可以使頁面的各個部分有條不紊，互不沖突，看上去清晰整潔。在實際做網(wǎng)頁時一般不顯示邊框,邊框的顯示可根據(jù)自己的愛好來設定。在實例中為了讓大家能夠看清楚，都設置了有邊框。
細線表格： 是指高為一像素一行一列的單元格。
<table height=""width="500"border="1"cellspacing="0"cellpadding="0">
<tr><td aling="對齊"></td></tr></table>
表格代碼編輯
行數(shù)列數(shù)：
一行一列： <TABLE BORDER=1><TR><TD>1</TD></TR></TABLE>
1
一行三列： <TABLE BORDER=1><TR><TD>1</TD><TD>2</TD><TD>3</TD></TR></TABLE>
1 2 3
二行三列： <TABLE BORDER=1><TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR></TABLE>
1 2 3
4 5 6
合并欄位：
合并一行： <TABLE BORDER=1><TR><TD COLSPAN=3>1</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR></TABLE> 1
4 5 6
合并一列： <TABLE BORDER=1><TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>5</TD><TD>6</TD></TR></TABLE>
1 2 3
5 6
欄位對齊：
表格大小： <TABLE WIDTH="100" BORDER="1" HEIGHT="60"><TR><TD>1</TD></TR></TABLE>
1
置中或置左置右： <TABLE WIDTH="100" BORDER="1" HEIGHT="60"><TR><TD ALIGN=CENTER>1</TD>
</TR></TABLE>
1
靠上方或靠下方：<TABLE WIDTH="100" BORDER="1" HEIGHT="60"><TR><TD ALIGN=CENTER
VALIGN=TOP>1</TD></TR></TABLE>
1
背景底色:
表格背景顏色：原始碼
呈現(xiàn)結果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR></TABLE> 1 2
3 4
一列背景色： 原始碼
呈現(xiàn)結果
<TABLE BORDER="1" ><TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR></TABLE> 1 2
3 4
一欄背景色：原始碼
呈現(xiàn)結果
<TABLE BORDER="1" ><TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR></TABLE> 1 2
3 4
用圖片來作背景，只要將BGCOLOR=#色碼換成BACKGROUND="圖片地址"就行了。
表格框線:
框線粗細:原始碼
呈現(xiàn)結果
<TABLE BORDER=5><TR><TD>1</TD></TR></TABLE> 1
框線顏色:原始碼
呈現(xiàn)結果
<TABLE BORDER="5" BORDERCOLOR="#0080FF" >
<TR><TD>1</TD></TR></TABLE> 1
框線陰影、亮面顏色:原始碼
呈現(xiàn)結果
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR></TABLE> 1
表格欄距 :
表格欄位格線之間的距離:原始碼
呈現(xiàn)結果
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR></TABLE> 1 2
內文距格線距離：一般而言內定值為2，不過我建議設定為4比較漂亮。
表格欄位格線之間的距離:原始碼
呈現(xiàn)結果
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR></TABLE> 1 2
欄位之間的距離：一般而言內定值為2，不過我通常習慣設為 0 。
常用表格實例
四行四列表格+邊框+行列分組
<TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900FF">
<THEAD bgcolor="#FFFFCC">
<TR><TH>姓名</TH><TH>性別</TH><TH>專業(yè)</TH><TH>分數(shù)</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>
姓名 性別 專業(yè)
分數(shù)
咚 咚 男 計算機 85
喃 喃 女 園 林 94
依 依 女 微波通信 87
一行兩列表格中元素的排版
<table height="高度"width="寬度"border="邊框">
<tr>
<td align="居中"><a href="鏈接的網(wǎng)址"></a><img src= "圖片的地址" width="寬度"height=
"高度"></td>
<td align="居中" valign="居下"><img src="圖片的地址" width="寬度"height="高度">
</td></tr></table>
第一列中圖片加鏈接居中，第二列中圖片居中下。
表格背景圖加向上滾動文字
<TABLE align=center background="背景圖片地址"border=0 cellPadding=0 cellSpacing=0 borderColor=#ffff00 width="400" height=300>
<TBODY>
<TR>
<TD align="right" valign="top"><br><marquee direction="up" scrollAmount=1 height=25 width=180><FONT face=黑體 color=#ffooff size=4>文字</FONT></MARQUEE>
</TD></TR></TBODY></TABLE>
生命是一個奇跡，
緣分是一次意外．
幸福是一種期待，
快樂是一種心態(tài)．
相思是一種無奈．
結識你是上天賜給我的厚愛，
繁瑣的生活帶走的只是時間．
彼此的牽掛留在心間，
美好的祝福常響耳邊．
