素材:引用     博導(dǎo)-snail 的 表格繪制全功略

 

從最基本代碼開始,；解剖表格代碼；從簡單到復(fù)雜的表格制作功略,；

1,、基本表格的制作

    a,、基本表格代碼

<TABLE BORDER=1>

<TR><TD>添加文字</TD></TR>

</TABLE>

效果：

添加文字

 BORDER=1 這參數(shù)是設(shè)定此表格的框線粗細(xì)為 1；更改數(shù)字可以改變表格線條粗細(xì),；<TR></TR>是設(shè)定一橫列的開始,。一組<TD></TD>則是設(shè)定一個欄位；

b,、分列效果

<TABLE BORDER=1>

<TR><TD>文字</TD><TD>文字</TD><TD>文字</TD></TR>

</TABLE>

效果：

文字

文字

文字

 

注意看：<TR></TR>沒有增加,，<TD></TD>卻增加了二組

c、分裂在分行：

<TABLE BORDER=1>

<TR>    <TD>文字</TD><TD>文字</TD><TD>文字</TD>     </TR>

<TR>    <TD>文字</TD><TD>文字</TD><TD>文字</TD>     </TR>

</TABLE>

結(jié)果：

文字	文字	文字
文字	文字	文字

 

注意看多了什么

2,、合并表格的操作

   1,、左右欄位合并:如何將 1、2,、3 格通通合并變成一大格

代碼：

<TABLE BORDER=1>

<TR>  <TD COLSPAN=3>添加文字</TD>  </TR>

<TR>  <TD>添加文字</TD>   <TD>添加文字</TD>   <TD>添加文字</TD>  </TR>

</TABLE>

效果：

添加文字
添加文字	添加文字	添加文字

 

該欄的<TD>標(biāo)簽還多了一個陌生的臉孔COLSPAN="3",，這就是“左右欄位合并”的屬性，COLSPAN="3"的意思就是“這個欄位左右橫跨了3個欄位”,，本來的兩個<TD>都可以省掉了,，因為都被并掉了嘛！

代碼繪制表格就是這樣的,；一個一個接著畫,；不象word里的操作；建議大家在word里做好,；再傳到這邊,；相關(guān)資料入門篇里有；

 2,、合并行的操作,；文字添加處用數(shù)字代替了哈！

代碼：

 <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,，我們看看上圖,，果然4已經(jīng)刪掉了，而在1的<TD>標(biāo)簽中則多了個生面孔ROWSPAN，這就是“上下欄位合并”的屬性,，ROWSPAN=2的意思就是“這個欄位上下連跨了2個欄位”,。

 

 

（3）、表格屬性的設(shè)置

 1,、高和寬

       基本設(shè)置代碼：

<TABLE  WIDTH="100" BORDER="1" HEIGHT="60" >

<TR><TD>文字</TD></TR>

</TABLE>

效果：

 

文字

 

 2,、文字的位置設(shè)置；

代碼：

<TABLE WIDTH="100" BORDER="1" HEIGHT="60">

<TR>   <TD ALIGN=CENTER>文字</TD>     </TR>

</TABLE>

效果：

文字

 

align表示對齊,，可以是：left 左邊,，right右邊；效果自己試哈,！

 3,、表格靠上靠下居中設(shè)置：

<TABLE WIDTH="100" BORDER="1" HEIGHT="60">

<TR>   <TD  ALIGN=CENTER VALIGN=TOP>添加文字</TD>   </TR>

</TABLE>

效果：

添加文字

 

注意：利用 VALIGN=TOP 這種屬性即可讓表格內(nèi)物件靠上方對齊。VALIGN=MIDDLE可以讓表格中物件垂直置中（預(yù)設(shè)值）,，VALIGN=BOTTOM可以H讓表格中物件靠下方,。

 

4、表格的背景設(shè)置

代碼：

<TABLE BORDER="1" BGCOLOR=yellow>

<TR>  <TD>文字</TD><TD>文字</TD>   </TR>

<TR>  <TD>文字</TD><TD>文字</TD>  </TR>

</TABLE>

效果：

文字	文字
文字	文字

 

將BGCOLOR="顏色碼"加在<TR>中,，可以指定“一列”的背景顏色

代碼：

<TABLE BORDER="1" >

<TR BGCOLOR=purple> <TD>添加文字</TD> <TD>添加文字</TD>  </TR>

<TR> <TD>添加文字</TD> <TD> 添加文字</TD>   </TR>

</TABLE>

 效果：

添加文字	添加文字
添加文字	添加文字

 

大家記得一條,；把各種屬性往里面套就是了；但要注意位置和規(guī)則,；

將BGCOLOR="顏色碼"加在<TD>中,，可以指定“一欄”的背景顏色：

如果制定某格加背景的話；

代碼：

<TABLE BORDER="1" >

<TR><TD BGCOLOR=purple> 添加文字</TD> <TD>添加文字</TD>  </TR>

<TR> <TD>添加文字</TD> <TD> 添加文字</TD>   </TR>

</TABLE>

  效果：

 

添加文字	添加文字
添加文字	添加文字

 

 博導(dǎo)有個疑問,，就是可以不可以以圖片作為表格背景,；

5、表格顏色設(shè)置：

代碼：

<TABLE BORDER="5" BORDERCOLOR="red">

<TR><TD>文字</TD></TR>

</TABLE>

效果：

文字

 

利用BORDERCOLOR="顏色碼"就行了

 

 

6,、另外,，我們也可以設(shè)定表格的陰影、亮面顏色,，讓表格看起來更有立體感喔,！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設(shè)定） BORDERCOLORDARK="顏色碼"（暗面設(shè)定）就行了。

 代碼：

<TABLE BORDER="5" BORDERCOLOR="pink" BORDERCOLORLIGHT="red" BORDERCOLORDARK="yellow">

<TR><TD>輸入你要加入的文字</TD></TR>

</TABLE>

 效果：

 

輸入你要加入的文字

 

 6,、設(shè)置距離

利用CELLPADDING屬性自由設(shè)定表格內(nèi)文距離格線的距離,，一般而言內(nèi)定值為2，不過我建議設(shè)定為4比較漂亮,。

代碼：

<TABLE BORDER="1" CELLPADDING="10">

<TR><TD>添加文字</TD><TD>添加文字</TD></TR>

</TABLE>

效果：

添加文字

添加文字

 

利用CELLSPACING屬性設(shè)定表格欄位格線之間的距離,。一般而言內(nèi)定值為2，不過我通常習(xí)慣設(shè)為 0 ,。

代碼：

<TABLE BORDER="1" CELLSPACING="5">

<TR><TD>文字添加處</TD><TD>文字添加處</TD></TR>

</TABLE>

 效果：

 

文字添加處

文字添加處

 

把以上的代碼做一次大規(guī)模的聯(lián)合兵團大戰(zhàn),；博導(dǎo)認(rèn)為是可以做一個自己滿意的表格的,；資料來源以各個前輩的

教材；博導(dǎo)進行了一點整理完善,；希望對大家有用,；以上所使用代碼是博導(dǎo)驗證的；沒有任何錯誤,；大家注意了解基本代碼哈,；

博導(dǎo)并不懂這些代碼；讓我寫的話,；說實話,；寫不出來；但我知道,；這個代碼可以做什么,；就好比用人一；

只要知道他能做沒,；就好安排工作了,；

我們提出：做博客做學(xué)習(xí)不懂開始；就是這個道理,；