DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> 關於HTML >> Html教程(五)-表格
Html教程(五)-表格
編輯:關於HTML     

表格標志對於制作網頁是很重要的,我希望您能記住這一點,現在很多很多網頁都是使用多重表格,主要是因為表格不但可以固定文本或圖像的輸出,而且還可以任意的進行背景和前景顏色的設置。但願您也能熟練使用表格來制作您的主頁。

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>

本例在浏覽器中顯示的結果如下:

意大利 英格蘭 西班牙 AC米蘭 佛羅倫薩 曼聯 紐卡斯爾 巴塞羅那 皇家社會 尤文圖斯 桑普多利亞 利物浦 阿申納 皇家馬德裡 …… 拉齊奧 國際米蘭 切爾西 米德爾斯堡 馬德裡競技 ……

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved