表格一般由<TABLE><TR><TD>和</TD></TR></TABLE>這六標簽以及border這個屬性組合而成,通過在代碼中加入更多屬性來實現(xiàn)表格的各種不同樣式。以下咱們就來慢慢的看個仔細:
1、 首先我們來做一個最簡單的表格:
代碼:
<TABLE border=1>
<TR><TD>1</TD></TR>
</TABLE>
1利用<TABLE>這個標簽來告訴電腦,這是一個表格,至于 border=1 這參數(shù)是設定此表格的框線粗細為 1。一組<TR></TR>是設定一橫列的開始。一組<TD></TD>則是設定一個欄位。當然,文字就是要擺在這里面。
2 、現(xiàn)在我們來增加兩個小格:
代碼:
<TABLE border=1>
<TR><TD>1</TD> <TD>2</TD><TD>3</TD></TR>
</TABLE>
1233 、代碼中<TR></TR>沒有增加,<TD></TD>增加了二組。那如果要再多加一列呢?很簡單,就像這樣:
代碼:
<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
1、左右欄位合并:如何將 1、2、3 個小格合并變成一個大格呢?
代碼:
<TABLE BORDER=1>
<TR><TD colspan=3>1</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
14 5 6
您應該有發(fā)現(xiàn)2、3兩個小格都消失了,只剩下1,而且該欄的<TD>標簽中多出了一個colspan這就是“左右欄位合并”的屬性,colspan="3"的意思就是“這個欄位左右橫跨了3個欄位”,因此后面的的兩個<TD>都可以省掉了,因為那兩格都被合并掉了。
2、上下欄位合并:如何上下合并,將 1、4格通通合并變成一大格
代碼:
<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
我們將1與4合并成一個欄位,看看上圖,4已經(jīng)刪掉了,而在1的<TD>標簽中則多了個rowspan這就是“上下欄位合并”的屬性,rowspan=2的意思就是“這個欄位上下連跨了2個欄位”。
1、如何設定表格的大小呢?您可以通過增加表格的屬性自由設定表格的“寬度”及“高度”。下面我們來制作一個寬300、高80的表格,做法如下:
代碼:
<TABLE WIDTH="300" BORDER="1" HEIGHT="80">
<TR><TD>1</TD></TR>
</TABLE>
12、表格中文字1 老是在表格的左邊呢?能不能弄到中間嗎?當然可以,只要在<TD>加入align=center這參數(shù)來完成:
代碼:
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD align=center>1</TD></TR>
</TABLE>
1
此外,利用align=right可以讓表格中物件置右、利用align=left可以讓表格中物件置左(預設值),至于為什么要加在<TD>中呢?因為,<TD>是一個欄位的意思,我們要指定在該欄位中的東西要置中或置左置右,就必須將 align加在 <TD>中。
3、既然可以置中,那么也可以控制表格內(nèi)文字靠上方、靠下方嗎?可以的,只要利用VALIGN=TOP這種屬性即可讓表格內(nèi)物件靠上方對齊。
代碼:
<TABLE WIDTH="300" BORDER="1" HEIGHT="80">
<TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>
</TABLE>
1
利用VALIGN=MIDDLE可以讓表格中物件垂直置中(預設值),VALIGN=BOTTOM可以H讓表格中物件靠下方。
1、如何給表格設定底色呢?不但整體表格可以,您也可以指定某欄或某列的顏色,方法和加背景顏色一樣,利用 bgcolor="顏色碼"就行了。底下是指定整格表格背景顏色的方法:
代碼:
<TABLE BORDER="1" bgcolor=#FF0000>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
如果將bgcolor="顏色碼"加在<TR>中,可以指定“一列”的背景顏色:
代碼:
<TABLE BORDER="1" >
<TR bgcolor=#FF0000><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
如果將bgColor="顏色碼"加在<TD>中,可以指定“一欄”的背景顏色:
代碼:
<TABLE BORDER="1" >
<TR><TD BGCOLOR=#FF0000>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
2、表格除了可以設定底色外,也可以用圖片來作背景嗎?當然可以,方法一樣簡單,只要將BACKGROUND="圖片地址"加到表格中就行了。和表格背景顏色一樣,不但表格可以設定背景圖片,您也可以指定某欄或某列的背景圖片:
代碼:
<TABLE BORDER="1" background="圖片地址">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
如果將BACKGROUND="圖片地址"加在<TD>中,可以指定“一欄”的背景:
代碼:
<TABLE BORDER="1">
<TR><TD BACKGROUND=圖片地址>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
1、如何設定表格粗細?只要利用BORDER="粗細值"就行了。
代碼:
<TABLE BORDER=5>
<TR><TD>1</TD></TR>
</TABLE>
1
2、如何設定表格顏色?只要利用BORDERCOLOR="顏色碼"就行了
代碼:
<TABLE BORDER="5" BORDERCOLOR="#ff0000">
<TR><TD>1</TD></TR>
</TABLE>
1
3、另外,我們也可以設定表格的陰影、亮面顏色,讓表格看起來更有立體感喔!只要利用 BORDERCOLORLIGHT="#顏色碼"(亮面設定) BORDERCOLORDARK="顏色碼"(暗面設定)就行了。
代碼:
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR>
</TABLE>
1
1、我們可以利用CELLPADDING屬性自由設定表格內(nèi)文距離格線的距離,這個屬性很好用,保持適當?shù)木嚯x,看起來比較舒服。一般而言默認值為2,不過我建議設定為5比較漂亮。
代碼:
<TABLE BORDER="1" CELLPADDING="10">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2
2、我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。一般而言默認值為2,不過我經(jīng)常把他設為 0 。
代碼:
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2
滾動條框制作方法與代碼 十分鐘學會做邊框 日志圖文排列樣式與代碼 一分鐘建立自已的博客日報 移動文字全都匯圖框鏈接教你做特效文字代碼大全圖片特效代碼大全 一分鐘學會查找音樂地址 一分鐘學會查找日志地址幻燈片制作方法與代碼背景圖片素材匯總如何給日志做封面 圖片移動跟我學彩色閃字教你做 (原創(chuàng))圖片加框DIY Q仔*網(wǎng)易博客聲明:轉(zhuǎn)載本站內(nèi)容請遵循“署名·非商業(yè)用途·保持一致”的創(chuàng)作共用協(xié)議。正常引用··拒絕盜版··所有內(nèi)容不得刪除篡改(包括本站所有鏈接)··祝您閱覽愉快!
博客學堂電腦學堂素材超市軟件教程博客代碼精美圖庫音畫圖文經(jīng)典摘錄休閑娛樂藝術(shù)殿堂模塊共享收藏本站交換鏈接博友推薦查看關(guān)于本站的更多信息站內(nèi)留言灌水特區(qū)正常引用——內(nèi)容不得篡改
如果你喜歡此日志,請點擊下面的“推薦”,
讓大家分享,也算是對Q仔的支持,謝謝!