屬性設定

 

  利用WIDTHHEIGHT這兩個屬性 ,我們可以用來設定表格的寬度及高度。你可以絕對值的設定方式來設定,例如: 

<TABLE BORDER=5 WIDTH=300>

  代表設定一個寬度為300像素的表格,而

<TABLE BORDER=5 WIDTH=50%>

  這種表示設定一個寬度為目前視窗寬度一半的表格,且會隨視窗的寬度不同,適時的改變表格的寬度。HEIGHT的設定也是如此。範例如下:

<TABLE BORDER=5 WIDTH=200>
<TR><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
<TABLE BORDER=5 HEIGHT=100>
<TR><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
第一格第二格
第三格第四格
第一格第二格
第三格第四格

  WIDTHHEIGHT這兩個屬性可以放在<TABLE><TR><TD>這些標記中,分別設定整個表格,欄,和個別儲存格的寬度或是高度。提供一些範例,大家可以自行體會一下。

<TABLE BORDER=5 WIDTH=200>
<TR><TD>第一格</TD><TD>第二格</TD></TR>
</TABLE>
第一格第二格
設定寬度為200像素的表格
<TABLE BORDER=5 >
<TR><TD WIDTH=100>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
第一格第二格
第三格第四格
設定第一格的寬度為100像素的表格,這樣的設定會影響整欄
<TABLE BORDER=5 >
<TR HEIGHT=100><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
第一格第二格
第三格第四格
設定第一列的高度為100像素的表格,這樣的設定會影響整欄
<TABLE BORDER=5 WIDTH=200>
<TR><TD WIDHT=40%>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
第一格第二格
第三格第四格
設定寬度為200像素的表格,同時設定第一格的寬度佔整個表格的40%


  這個屬性我們提過很多次了。ALIGN屬代表格的對齊方式,可設定為靠左(LEFT)、靠右(RIGHT)、或置中對齊(CENTER)。這個屬性也可以放在<TABLE><TR><TD>這些標記中,分別設定整個表格,欄,和個別儲存格的對齊方式。略看一下範例就可以了:

<TABLE BORDER=5 WIDTH=200 ALIGN=RIGHT>
<TR><TD>第一格</TD><TD>第二格</TD></TR>
</TABLE>
第一格第二格

 

<TABLE BORDER=5 WIDTH=200 ALIGN=CENTER>
<TR ALIGN=RIGHT><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第三格</TD><TD>第四格</TD></TR>
</TABLE>
第一格第二格
第三格第四格
 
建立一個200像素寬的表格,並將表格置中對齊,同時將第一列內的文字靠右對齊
<TABLE BORDER=5 WIDTH=230 ALIGN=CENTER>
<TR ALIGN=RIGHT><TD>第一格</TD><TD>第二格</TD><TD ALIGN=LEFT>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第五格</TD></TR>
</TABLE>
第一格第二格第三格
第四格第五格第五格
 
建立一個230像素寬的表格,並將表格置中對齊,同時將第一列內的文字靠右對齊,但第三格靠左對齊


  和ALIGN屬性相同,但會將表格內的文字做垂直的位置的修改,你可以設定為靠上(TOP)、靠中(MIDDLE)、或靠下對齊(BOTTOM)。這個屬性也可以放在<TABLE><TR><TD>這些標記中,分別設定整個表格,欄,和個別儲存格的垂直對齊方式。預設為靠中對齊。略看一下範例就可以了:

<TABLE BORDER=5 WIDTH=200 HEIGHT=200>
<TR VALIGN=BOTTOM><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第四格</TD><TD VALIGN=TOP>第五格</TD></TR>
</TABLE>
 
第一格第二格
第四格第五格
設定垂直對齊的範例。
<TABLE BORDER=5 WIDTH=200 HEIGHT=200>
<TR VALIGN=BOTTOM ALIGN=RIGHT><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第四格</TD><TD VALIGN=TOP>第五格</TD></TR>
</TABLE>
第一格第二格
第四格第五格
 
設定垂直及文平的對齊的範例。


列的對齊方式可以在<TR>標記中指定,而<COL>這個標記則可以指定直欄的對齊方式,範例如下:

<TABLE BORDER=5 WIDTH=200 HEIGHT=200>
<COL ALIGN=RIGHT VALIGN=TOP></COL>
<TR><TD>第一格</TD><TD>第二格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD></TR>
</TABLE>
第一格第二格
第四格第五格
設定第一欄的水平及垂直對齊方式
<TABLE BORDER=5 WIDTH=200 HEIGHT=200>
<COL ALIGN=RIGHT VALIGN=TOP></COL>
<COL ALIGN=RIGHT VALIGN=TOP>
</COL>
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
第一格第二格第三格
第四格第五格第六格
一次設定兩欄的水平及垂直對齊方式
<TABLE BORDER=5 WIDTH=200 HEIGHT=200>
<COL ALIGN=RIGHT VALIGN=TOP SPAN=2></COL>
<TR><TD>第一格</TD><TD>第二格</TD><TD>第三格</TD></TR>
<TR><TD>第四格</TD><TD>第五格</TD><TD>第六格</TD></TR>
</TABLE>
第一格第二格第三格
第四格第五格第六格
你也可以用SPAN的屬性來一次設定兩欄的水平及垂直對齊方式,顯示結果同上