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