【表格製作】各種表格的製作代碼(框)
2.細線雙邊效果代碼:<TABLE style="WIDTH: 490px; HEIGHT: 260px" cellSpacing=1 background=http://image32.360doc.com/DownloadImg/2010/12/0610/14348046_1.jpg border=1><TBODY><TR><TD align=middle bgColor=#000000>2.細線雙邊效果代碼:</TD></TR></TBODY></TABLE>3.粗線效果代碼:<TABLE style="WIDTH: 490px; HEIGHT: 260px" cellSpacing=5 background=http://image32.360doc.com/DownloadImg/2010/12/0610/14348046_1.jpg border=0><TBODY><TR><TD align=middle bgColor=#000000>3.粗線效果代碼:</TD></TR></TBODY></TABLE>各種表格的製作代碼(框)
一、簡單表格製作博客的製作中離不開表格，而網易現有的都是一些簡單的表格，那麼，那些不規範的表格是怎麼製作的呢，很簡單，這裡整理了各式的表格代碼，需要學習的朋友慢慢看，如果你想偷懶，直接複製你需要的款式就可以了，相信能讓你得心應手。一、簡單表格製作A、 首先我們來看一個最簡單的表格：代碼：<TABLE BORDER=1><TR><TD>1</TD></TR></TABLE>結果：1利用<TABLE>這個標籤來告訴電腦，這是一個表格，至於 BORDER=1 這參數是設定此表格的框線粗細為 1。一組<TR></TR>是設定一橫列的開始。一組<TD></TD>則是設定一個欄位。當然，文字就是要擺在這裡面就是「1」的位置注意：如果方格內不寫「1」 ，則用<TR><TD></TD></TR> 或者<TR><TD><P></P></TD></TR>表示，其中：<P></P>是換行、空格、段落的意思。<p>是段落的開始標誌，</p>是段落的結束標誌 ，比如有一大段文字，是一個段落，代碼可以這樣表示： <P>這裡是一大段文字</P>B 、現在我們再來增加二個格子：代碼：<TABLE BORDER=1><TR><TD>1</TD><TD>2</TD><TD>3</TD></TR></TABLE>結果：1 2 3C 、看見沒有，<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 34 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 6COLSPAN="3"，是「左右欄位合併」的屬性，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 35 6要合併欄位就一定有些欄位會被「犧牲」掉（也就是那些被合併的欄位啦！），這次我們要「上下合併」，我們將1與4合併成一個欄位，那麼被犧牲的是哪一個欄位呢？沒錯就是下面那一個倒楣的4，我們看看上圖，果然4已經刪掉了，而在1的<TD>標籤中則多了個生面孔ROWSPAN，這就是「上下欄位合併」的屬性，ROWSPAN=2的意思就是「這個欄位上下連跨了2個欄位」。三、表格對齊設置1、我可以自己設定表格的大小嗎？當然可以，您可以自由設定表格的「寬」及「高」喔！我們來製作一個寬100、高60的表格，做法如下：代碼：<TABLE WIDTH="100" BORDER="1" HEIGHT="60"><TR><TD>1</TD></TR></TABLE>結果：12、只要在<TD>加入 ALIGN=CENTER 這參數，讓1 回到中間代碼：<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、既然可以置中，那麼也可以控制表格內文字靠上方、靠下方嗎？可以的，只要利用 VALIGN=TOP 這種屬性即可讓表格內物件靠上方對齊。代碼：<TABLE WIDTH="100" BORDER="1" HEIGHT="60"><TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR></TABLE>結果：1利用VALIGN=MIDDLE可以讓表格中物件垂直置中（預設值），VALIGN=BOTTOM可以H讓表格中物件靠下方。四、表格背景設置1、那麼表格可以設定底色嗎？可以的不但表格可以，您也可以指定某欄或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR="顏色碼"就行了。底下是指定整格表格背景顏色的方法：代碼：<TABLE BORDER="1" BGCOLOR=#FFCC33><TR><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE>結果：1 23 4將BGCOLOR="顏色碼"加在<TR>中，可以指定「一列」的背景顏色：代碼：<TABLE BORDER="1" ><TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE>結果：1 23 4將BGCOLOR="顏色碼"加在<TD>中，可以指定「一欄」的背景顏色：代碼：<TABLE BORDER="1" ><TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE>結果：1 23 42、表格除了可以設定底色外，也可以用圖片來作背景嗎？當然可以，方法一樣簡單，只要將BACKGROUND="圖片名稱"加到表格中就行了。和表格背景顏色一樣，不但表格可以設定背景圖片，您也可以指定某欄或某列的背景圖片：代碼：<TABLE BORDER="1" BGCOLOR=#FFCC33><TR><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE>結果：1 23 4將BACKGROUND="圖片名稱"加在<TD>中，可以指定「一欄」的背景顏色：代碼：<TABLE BORDER="1"><TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE>結果：1 23 4五、表格框線設置1、如何設定表格粗細？只要利用BORDER="粗細值"就行了。代碼：<TABLE BORDER=5><TR><TD>1</TD></TR></TABLE>結果：12、如何設定表格顏色？只要利用BORDERCOLOR="顏色碼"就行了代碼：<TABLE BORDER="5" BORDERCOLOR="#0080FF"><TR><TD>1</TD></TR></TABLE>結果：13、另外，我們也可以設定表格的陰影、亮面顏色，讓表格看起來更有立體感喔！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設定） BORDERCOLORDARK="顏色碼"（暗面設定）就行了。代碼：<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97"><TR><TD>1</TD></TR></TABLE>結果：1六、表格欄距設置1、我們可以利用CELLPADDING屬性自由設定表格內文距離格線的距離，這個屬性很好用，保持適當的距離，看起來比較舒服。一般而言內定值為2，不過我建議設定為4比較漂亮。代碼：<TABLE BORDER="1" CELLPADDING="10"><TR><TD>1</TD><TD>2</TD></TR></TABLE>結果：1 22、我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。一般而言內定值為2，不過我通常習慣設為 0 。代碼：<TABLE BORDER="1" CELLSPACING="5"><TR><TD>1</TD><TD>2</TD></TR></TABLE>結果：1 2七，表格的立體化1 23 4喜歡這樣的表格吧，你只要在做好的表格前面添加下方藍色部分的代碼，就可以演變出漂亮的立體格式了。代碼：<DIV align=center><DIV style="FILTER: shadow(color=#000066, strength=10); WIDTH: 500px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 20pt; COLOR: #7fffd4; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal"><TABLE cellSpacing=0 borderColorDark=#3c5796 cellPadding=10 borderColorLight=#3c5796 border=10><TBODY><TR><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TBODY></TABLE>
推薦閱讀：
※詳解Flash AS代碼實現彈弓弓弦彈性形變
※在圖片上直接寫字的代碼編輯技巧【學習交流】
※flash加字代碼
※藝術字代碼