表格標志對於制作網頁是很重要的,我希望您能記住這一點,現在很多很多網頁都是使用多重表格,主要是因為表格不但可以固定文本或圖像的輸出,而且還可以任意的進行背景和前景顏色的設置。但願您也能熟練使用表格來制作您的主頁。
1.<table></table>
<table></table>標志對用來創建一個表格。它有以下屬性:
屬性
用途
<table bgcolor=""> 設置表格的背景色。 <table border=""> 設置邊框的寬度,若不設置此屬性,則邊框寬度默認為0。 <table bordercolor=""> 設置邊框的顏色。 <table bordercolorlight=""> 設置邊框明亮部分的顏色(當border的值大於等於1時才有用)。 <table bordercolordark=""> 設置邊框昏暗部分的顏色(當border的值大於等於1時才有用)。 <table cellspacing=""> 設置表格格子之間空間的大小。 <table cellpadding=""> 設置表格格子邊框與其內部內容之間空間的大小。 <table width=""> 設置表格的寬度,單位用絕對像素值或總寬度的百分比。 說明:以上各個屬性可以結合使用。有關寬度、大小的單位用絕對像素值。而有關顏色的屬性使用十六進制RGB顏色碼或Html語言給定的顏色常量名(如 Silver 為銀色)2.<tr></tr><td></td>
<tr></tr>標志對用來創建表格中的每一行。此標志對只能放在<table></table>標志對之間使用,而在此標志對之間加入文本將是無用的,因為在<tr></tr>之間只能緊跟<td></td>標志對才是有效的語法,<td></td>標志對用來創建表格中一行中的每一個格子,此標志對也只有放在<tr></tr>標志對之間才是有效的,您想要輸入的文本也只有放在<td></td>標志對中才有效(即才能夠顯示出來)。<table></table>、<tr></tr>和<td></td>標志對的關系如下所示:
最外層,創建一個表格--> <table>
創建一行--> <tr>
<td>要輸出的文本只能放在此處</td>
創建一個格子(這裡總共創建了三個格子)--> <td>要輸出的文本只能放在此處</td>
<td>要輸出的文本只能放在此處</td>
</tr>
最外層--> </table>
此外,<tr>還有align和valign屬性。align是水平對齊方式,取值為left(左對齊)、center(居中)、right(右對齊);而valign是垂直對齊方式,取值為top(靠頂端對齊)、middle(居中間對齊)或bottom(靠底部對齊)。<td>具有width、colspan、rowspan和nowrap屬性。width是格子的寬度,單位用絕對像素值或總寬度的百分比;colspan設置一個表格格子跨占的列數(缺省值為1);rowspan設置一個表格格子跨占的行數(缺省值為1);nowrap禁止表格格子內的內容自動斷行。
3.<th></th>
<th></th>標志對用來設置表格頭,通常是黑體居中文字。
看一看下邊的例子就明白以上標志對的用法了。
例6 表格標志的綜合示例
<html>
<head>
<title>表格標志的綜合示例</title>
</head>
<body>
<table border="1" width="80%" bgcolor="#E8E8E8" cellpadding="2" bordercolor="#0000FF"
bordercolorlight="#7D7DFF" bordercolordark="#0000A0">
<tr>
<th width="33%" colspan="2" valign="bottom">意大利</th>
<th width="36%" colspan="2" valign="bottom">英格蘭</th>
<th width="36%" colspan="2" valign="bottom">西班牙</th>
</tr>
<tr>
<td width="16%" align="center">AC米蘭</td>
<td width="16%" align="center">佛羅倫薩</td>
<td width="17%" align="center">曼聯</td>
<td width="17%" align="center">紐卡斯爾</td>
<td width="17%" align="center">巴塞羅那</td>
<td width="17%" align="center">皇家社會</td>
</tr>
<tr>
<td width="16%" align="center">尤文圖斯</td>
<td width="16%" align="center">桑普多利亞</td>
<td width="17%" align="center">利物浦</td>
<td width="17%" align="center">阿申納</td>
<td width="17%" align="center">皇家馬德裡</td>
<td width="17%" align="center">……</td>
</tr>
<tr>
<td width="16%" align="center">拉齊奧</td>
<td width="16%" align="center">國際米蘭</td>
<td width="17%" align="center">切爾西</td>
<td width="17%" align="center">米德爾斯堡</td>
<td width="17%" align="center">馬德裡競技</td>
<td width="17%" align="center">……</td>
</tr>
</table>
</body>
</html>
本例在浏覽器中顯示的結果如下: