表格在瀏覽器屏幕上左對齊,你可以使用<TABLE>的ALIGN屬性來指定表格的對齊方式。ALIGN屬性可以取值“left”、“center”和“right”。例如,讓一個表格在屏幕中央顯示可以使用:
<TABLE ALIGN=“CENTER”>
注意
使用<TABLE>的ALIGN屬性要小心,不是所有的瀏覽器都能識別它。如果你要讓表格顯示在屏幕中央,使用<CENTER>標識符來包含表格會更安全些。
你可以使用<TR>的ALIGN屬性來設置表格中每行元素的水平對齊方式,這個屬性也可以取值“left”、“center”和“right”。要設置某一行中所有元素的豎直對齊方式,可以使用<TR>的VALIGN屬性,它可以取值“top”、“middle”和“botton”(缺省情況下取值“middle”)。
要更好地控制表格中某個表頭或元素的排列方式,可以使用<TH>和<TD>標識符的ALIGN和VALIGN屬性,這兩個屬性的取值范圍與<TR>相同,然而<TH>的<TD>ALIGN和VALIGN屬性將會覆蓋任何為整個一行指定的排列方式。
控制表項的空間
當瀏覽器顯示一個表格時,它將每一列的寬度設置為這一列中最長表項的寬度。瀏覽器盡可能地占用較小的屏幕空間來緊密地排列表格中的每一項。你可以使用<TABLE>的CELLPADDING和CELLSPACING屬性來改變這一缺省值。
通過使用CELLPADDING屬性,你可以為表格中的每一項安排一個更大的空間,使用CELLSPACING屬性,你可以為表項之間留出一定的空間。這兩個屬性的值都以象素來指定。下面的例子說明了如何使用這兩個屬性(見圖6.20):
<HTML>
<HEAD> <TITLE> Cell Spacing </TITLE></HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION> Normal Table </CAPTION>
<TR>
<TD> First Column </TD>
<TD>Second Column </TD>
</TR>
</TABLE>
<HR>
<TABLE BORDER=1 CELLSPACING=20>
<CAPTION> Table With Cell Spacing </CAPTION>
<TR>
<TD> First Column </TD>
<TD>Second Column </TD>
</TR>
</TABLE>
<HR>
<TABLE BORDER=1 CELLPADDING=20>
<CAPTION> Table With Cell Padding </CAPTION>
<TR>
<TD> First Column </TD>
<TD>Second Column </TD>
</TR>
</TABLE>
</BODY>
</HTML>
控制表格和表項的大小
某些時候你可能想讓表格顯示出來大一些,你可以用<TABLE>的WIDTH屬性來控制表格的寬度,你可以為WIDTH屬性提供寬度的絕對值或相對值。
當為WIDTH屬性提供寬度的絕對值時,你用象素來表示。例如,要建立一個寬為100個象素的表格,可以用<TABLE WIDTH=100>。當然,并不能保證表格顯示出來恰好是你指定的寬度,表項中的內容可能會迫使表格顯示出來比WIDTH屬性指定的值要寬。
另外,你也可以用相對值來指定表格的寬度,例如,如果你想讓表格占有整個瀏覽器屏幕那么寬,你可以用<TABLE WIDTH=“100%”>,同樣地,如果你在WIDTH屬性中指定的百分數太小的話,瀏覽器顯示出來的表格就不是那個寬度。
<HEIGHT>屬性可以用來指定表格的整體高度,同樣這個屬性可取絕對值和相對值。但使用這個屬性時要小心,即使Microsoft和Netscape的瀏覽器都能正確解釋它,但它并不是HTML 3.2規范中的一部分。
你也可以用<TD>和<TH>標識符的WIDTH和HEIGHT屬性來控制表格中某一表項的大小,你必須用絕對象素值來指定這些屬性的值。你要知道當你設置這些值時,只不過是在為瀏覽器提供建議,瀏覽器盡量按你的意愿去做,但也有可能不能完全按你指定的方式來顯示一個表格。
在表格中加入顏色和圖象
根據HTML 3.2規范,表格不具有任何顏色屬性。然而,值得慶幸的是Netscape和Microsoft都擴展了HTML來讓表格具有自己的背景色,兩種瀏覽器都能識別<TABLE>標識符的BGCOLOR屬性。
你可以使用顏色名或RGB值來設定BGCOLOR的值,下面的例子說明了這個屬性的用法:
<HTML>
<HEAD> <TITLE> Table Color </TITLE> </HEAD>
<BODY BGCOLOR=“white”>
<CENTER>
<TABLE BGCOLOR=“lightblue” CELLPADDING=10>
<TR>
<TD> I have a blue background </TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
當這個例子中的文字在瀏覽器上顯示時,它處于一個淺藍色的框中,這對于突出主頁上主體文字中某些特定的文本是很有用的。例如,你可以使用這種方法來突出一個引用、標題或是網頁上一個簡短的注釋。
你也可以為表格中某一行甚至是某一個表項使用BGCOLOR屬性。例如,可以用不同的顏色來區分表格中不同列的數據。
BGCOLOR屬性的一個更令人興奮的用處可能是設置你網頁的整體顏色,如果你將表格的寬度設為屏幕的寬度,你可以建立一個具有多列的網頁,而每一列都具有不同的顏色。下面的例子建立了一個有兩列不同顏色的網頁:
<HTML>
<HEAD> <TITLE> Two Color Columns </TITLE> </HEAD>
<BODY BGCOLOR=“white”>
<CENTER>
<TABLE WIDTH=“100%” HEIGHT=“100%”>
<TR>
<TD BGCOLOR=“Olive” ALIGN=“center”> I have a olive background </TD>
<TD BGCOLOR=“Aqua” ALIGN=“center”> I have a aqua background </TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Netscape和Microsoft的瀏覽器都允許你為表格設定背景圖片(見圖6.21),你可以通過<TABLE>標識符的BACKGROUND屬性來指定一幅圖象:
<HTML>
<HEAD> <TITLE> Two Color Columns </TITLE> </HEAD>
<BODY BGCOLOR=“white”>
<CENTER>
<TABLE WIDTH=“50%” HEIGHT=“100%” BACKGROUND=“myimage.gif”>
<TR>
<TD ALIGN=“center”> I have a checkered background </TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Netscape Navigator 4.0和Internet Explorer 3.0及4.0還允許你在表格的某一行或某個表項使用BACKGROUND屬性,通過為不同的表項使用不同的背景圖象,你可以建立一個可視性非常強的網頁。
表格作為子頁
<TABLE>標識符最初被引入HTML是用來格式化地顯示信息。然而,隨著時間的推移,這個標識符的屬性被大大地擴充了,現在可以將<TABLE>看成是用來在網頁中建立一個子頁的標識符。這個標識符被擴展出了那么多的屬性,以致于現在它很象<BODY>標識符了。在Netscape 和Microsoft的瀏覽器上,<TABLE>具有許多和<BODY>相同的屬性,你可以為表格指定它自己的背景色和圖象。另外<TABLE>標識符還能包含所有能在<BODY>中包含的HTML標識符。
然而,<TABLE>具有一個比<BODY>更大的優勢,每一個HTML文件必須有且只有一個<BODY>標識符,但對于<TABLE>來說,則沒有這種限制,你可以在HTML文件中包含任意數目的<TABLE>。
當你設計網頁時,不要讓<TABLE>這個名字愚弄了你。<TABLE>不僅僅用于建立表格,還可以在你的網頁上建立子頁,當你想把單個網頁分成多個部分時,就用<TABLE>標識符。