一、簡單表格的設計制作
在日常事務中,免不了要設置一些表格,現(xiàn)代社會中,也不是用尺子隨便劃幾下,而是要用代碼來制作,這首先就要了解一些代碼的作用,為此,就找了些資料,從頭學起.一邊學做表格,一邊就認識代碼的含意.試試.
首先看一個最簡單的表格：
代碼如下：
<TABLE BORDER=1><TR><TD>1</TD></TR </TABLE>
識別代碼含意
<TABLE BORDER=1>〖注解;<開始制表格=1是指劃線的粗細>〗
<TR>空格子</TR>格子結束〖注解;<此格子是做表用的>〗
<TD>任務</TD>結束任務〖注解;這<任務>就是做格子>〗
<TR><TD>1</TD></TR>〖注解;<空格><任務>格子中加的文字</空格結束></任務結束>〗
</TABLE> 〖注解;</結束表格〗
以上可見;后一個代碼是前一個代碼的補充條件
現(xiàn)在就用這組合成的代碼,實習如下
<TABLE BORDER=1><TR><TD>1</TD></TR </TABLE>
以上的代碼組合制作,其的結果如下：
結果
說明一下以上英文《標簽》代碼總的含意:〖利用<TABLE>這個標簽來告訴電腦，這是一個表格，加于《標簽命今》 BORDER=1 這參數(shù)是設定此表格的框線粗細為 1,。一組<TR></TR>是設定一個列橫格的開始和結束。一組<TD>1</TD>則是設定一個欄位的任務,。文字可加插在這其中,。〗
---------------------------------------------
現(xiàn)在再試試增加二個格子：
代碼：
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
可比性-對比一下
其中比上一個增加部份的代碼為<TD>2</TD><TD>3</TD>
結果：
以上英文代碼的含意是;<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>
可比的地方對比一下
其中比上一個增加部份的代碼為
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
結果
英文代碼的含意是;增加一個行次就要同時加入行次的開始和結束代碼,<TR>是行次的開始,放的最前邊,</TR>是行次的結束,放在代碼的最后邊.中間有三個任務就要放入三個任務代碼,這三個任務就必須要插入制表的中間部位.<TD>4</TD><TD>5</TD><TD>6</TD>注;凡是在引號字碼前加上/的</>就是此代碼的結束,
組建一個行次的組合代碼
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
------------------------------------------------------
二,、合并表格欄位
左右欄位合并:
如何將 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>
結果：
以上可見2,、3都消失了,只剩下1，而且該欄的<TD>標簽還多了一個英文標簽COLSPAN="3",，這就是“左右欄位合并”的屬性,，COLSPAN="3"的意思就是“這個欄位左右橫跨了3個欄位”,，也正因如此，本來的兩個<TD>都可以省掉,，沒有必要放入了,因為都被并掉了,換言之必須刪掉.
-----------------------------------------------------
上下欄位合并：
將 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>
結果：
有了上理解,，就能知道,，要合并欄位就一定用代碼,現(xiàn)在要把上下合并，就是例圖所示,將1與4合并成一個欄,，那就用了一個ROWSPAN代碼代入到代碼中去.這個英文代碼的意思是,指令排行上下欄合并,而且要把這代碼插入到所需并合目標〖<TD>1</TD>〗標簽的中間加插了一個代碼 ROWSPAN=2詳見以上實際代碼,〖<TD ROWSPAN=2>1</TD>〗所以,在下一行次中,就必須要把<TD>4</TD>去掉,如果仍然保留,就不能成立,
從以上二個不同的并合方式中也可見
COLSPAN="3"是左右合并代碼,
ROWSPAN=2是上下合并代碼.
------------------------------------------------------
三,、表格大小的設置和表內安排調節(jié)左右居中的設置
如何設定表格寬”和“高”的大小.
實例;假定“寬100、高60的代碼如下：
代碼：
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD>1</TD></TR>
</TABLE>
結果：
從這實例的代碼可見,WIDTH="100"是寬度,HEIGHT="60">是高度,分別加插在<TABLE 制表代碼的前邊和制表任務的后邊,而且圈在同一個<>引號之內,這樣才能控制這個表式的大小.
----------------------------------------------------------
表內(文字或圖片)排列調整為《居中》的設置
如果在此基礎上要把表格內文字居中,就必須把居中代碼ALIGN=CENTER插入,詳見以下代碼;(表格中的文字或圖片居中ALIGN=CENTER)詳見以下代碼.
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER>1</TD></TR>
</TABLE>
--------------------------------------------------
表內(文字或圖片)控制排列調整為《右》的設置
控制置右:利用 ALIGN=RIGHT 可讓表中的文字或圖片置右,、
詳見以下代碼.
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=RIGHT VALIGN=TOP>1</TD></TR>
</TABLE>
-------------------------------------------------------------------------
表內(文字或圖片)控制排列調整為《左》的設置
控制置右;利用 ALIGN=LEFT 可讓表中的文字或圖片置左,
詳見以下代碼.
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=LEFT VALIGN=TOP>1</TD></TR>
</TABLE>
----------------------------------------------------------------------
經(jīng)實驗可見調節(jié)組合的代碼含意如下;
ALIGN 是調整排列的代碼,
ALIGN=? 是調整排列符加條件
ALIGN=CENTER 以此調整排列為居中
ALIGN=RIGHT 以此調整排列為右邊
ALIGN=LEFT 以此調整排列為左邊
至于為何要加在<TD>中,？因為，<TD>是一個欄位的任務,，我們要指定在某一欄位中所需要居中或偏左或偏右,，就必須將ALIGN=?加在<TD>的中間,而且還必強制性地加主符加條作居中或偏左或偏右
------------------------------------------------------
四、表格背景設置
表格背景顏色的設置方法;
利用背景顏色代碼BGCOLOR="色碼"就行了,。
代碼：
<TABLE BORDER="1" BGCOLOR=#BBFFFF>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
結果：
------------------------------------------------------
如何將二個行次加入不同的顏色
將BGCOLOR="顏色碼"加在<TR>中,，可以指定“一列”的背景顏色：
代碼如下;
<TABLE BORDER="1" >
<TR BGCOLOR=#C0FF3E><TD>1</TD><TD>2</TD></TR>
<TR BGCOLOR=#CD00CD><TD>1</TD><TD>2</TD></TR>
</TABLE>
結果：
以上實例中;第一行次原來的代碼是
<TR ><TD>1</TD><TD>2</TD></TR>
加色后的代碼是綠色
<TR BGCOLOR=#C0FF3E><TD>1</TD><TD>2</TD></TR>
所加入的色碼為
<TR BGCOLOR=#C0FF3E>
第二行次加入的色碼是紫色
<TR BGCOLOR=#CD00CD><TD>1</TD><TD>2</TD></TR>
----------------------------------------------------
分格加色
以上實例又證明了非但可以每個行次加不同的顏色,那就是也能分格來加色.因為將BGCOLOR="顏色碼"加在<TD>中，可以指定“一欄”的背景顏色：試試分格加色;
分格加色代碼如下：
<TABLE BORDER="1" >
<TR><TD BGCOLOR=#FFCC33>1</TD>
<TD BGCOLOR=#CD00CD>2</TD></TR>
<TR><TD BGCOLOR=#BBFFFF>3</TD><TD BGCOLOR=#7FFF00>4</TD></TR></TABLE>
分格加色的效果如下-
結果
---------------------------------------------------------
五,、 表格框線設置
如何設定表格邊框的粗細
只要利用BORDER="粗細值"就行了,。
代碼：
<TABLE BORDER=5>
<TR><TD>1</TD></TR>
</TABLE>
結果：
------------------------------------------------------
如何設定表格邊框的顏色
只要利用BORDERCOLOR="顏色碼"就行了
代碼：
<TABLE BORDER="5" BORDERCOLOR="#0080FF">
<TR><TD>1</TD></TR>
</TABLE>
結果：
------------------------------------------------------
設定表格的陰影、亮面顏色,，讓表格看起來更有立體感
只要用同一種類顏色深淺色調,分別加入二次,加入方法詳見以下代碼,所示利用 BORDERCOLORLIGHT="#顏色碼"（亮面設定） BORDERCOLORDARK="顏色碼"（暗面設定）就行了,。
代碼：
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR>
</TABLE>
結果：
-------------------------------------------------------
設定表格欄位格線之間的距離
利用CELLSPACING屬性也可設定表格欄位格線之間的距離。一般內定值為1-2,，通常習慣設為 0 ,下例為了使看得明顯些特此設為"8",。
代碼：
<TABLE BORDER="1" CELLSPACING="8">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
結果：
-------------------------------------------------
