網(wǎng)站建設中網(wǎng)頁(yè)中表格的運用發(fā)布者：本站     時(shí)間：2022-05-04 10:05:09

表格(table)是頁(yè)面的重要元素,是頁(yè)面排版的主要手段。盡管DHTML中的層(layer)也可以實(shí)現網(wǎng)頁(yè)元素的自由定位，但是表格顯然更加方便編輯與修改。熟練掌握和運用表格的各種屬性，可以讓您的頁(yè)面看起來(lái)賞心悅目。
本文將分兩部分詳細介紹表格在網(wǎng)頁(yè)設計中的運用。包括表格的基本用法和表格運用的注意點(diǎn)。

一.表格的基本用法。

表格的基本用法相信您已經(jīng)非常熟悉了。但為了保證文章的完整性，阿捷在這里還是再羅列一遍。

●表格的HTML基本語(yǔ)法

<table>...</table> - 定義表格
<tr> - 定義表行
<th> - 定義表頭
<td> - 定義表元(表格的具體數據)

例如：

<table border> 
<tr><th>1</th>
    <th>2</th>
    <th>3</th> 
<tr><td>A</td>
    <td>B</td>
    <td>C</td> 
</table>

1 2 3
A B C
●table標簽的參數。table標簽可以含下列參數。

border            表格邊框
cellspacing  表元之間的空白距離
cellpadding  表元內部的空白距離
width           表格寬度（可以用%或者具體數據表示）
height            表格高度

例如：

<table border=5 cellpadding=10>
<tr><th>1</th><th>2</th><th>3</th>
<tr><td>A</td><td>B</td><td>C</td> 
</table>

1 2 3
A B C
●表格的對齊方式

１.表格內的文字對齊。

語(yǔ)法：<td align=#> 其中#可以設定的參數有：

left    橫向居左
center  橫向居中
right   橫向居右
top     縱向居頂
middle　縱向居中
bottom  縱向居底

例如：
<table border height=100>
<td valign=top>A</td>
<td valign=middle>B</td>
<td valign=bottom>C</td>
</table>

A B C
2.表格在頁(yè)面內的對齊。

如果你需要與表格并排放一段文字，就需要用到table標簽的另一個(gè)個(gè)參數：

<table align=＃> 其中#可以設定為left(居左)，right(居右)

例如：

<table align="left" border >
<tr><th>1</th><th>2</th><th>3</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
這里的文字<br>
是和表格并排排放的

1 2 3
A B C
這里的文字是和表格并排排放的

     ●表格的嵌套

表格嵌套就是在表格里插入表格，嵌套的排版方法就是將要插入的表格當做文字來(lái)處理同樣使用<td align=#>語(yǔ)句。

例如：

<table border width=200 height=100> 
<tr> <td valign="top" > 
<table border><tr><td></td></tr></table>
</td><td valign="bottom">
<table border><tr><td></td></tr></table>
</td></tr>
</table>

●表格的色彩

表格的色彩也在<table>標簽里設置，參數有：

bgcolor           背景顏色
bordercolor       邊框顏色
bordercolorlight  立體邊框亮色
bordercolordark   立體邊框暗色 

語(yǔ)法為：<table bgcolor="#RRGGBB">其中RRGGBB分別為RGB三色的16進(jìn)制數值

例如：
<table width=100 border bgColor=#a9d7fb 
borderColorDark=#ffffff borderColorLight=#000000 cellPadding=5 
cellSpacing=0 bordercolorlight="#000000">
<tr><td bgColor=#FFE084></td>
</tr><tr><td></td></tr></table>

以上是表格的基本用法?，F在frngtpage,dreamweaver等所見(jiàn)即所得的網(wǎng)頁(yè)編輯軟件都不用編寫(xiě)代碼，就可以輕松的實(shí)現表格的排版和嵌套，但是掌握一些基本語(yǔ)法，關(guān)鍵時(shí)刻還是很有用處的。

  　　二.表格運用的注意點(diǎn)

表格的嵌套并不是表格處理最困難的地方，無(wú)論多復雜的版面，悉心琢磨一番總能找到解決的辦法。我們需要考慮的是：

○用什么樣的嵌套排版方式使網(wǎng)頁(yè)的下載速度達到最快。

我們知道：瀏覽器在讀取網(wǎng)頁(yè)html原代碼時(shí)，是讀完整一個(gè)table再將它顯示出來(lái)。也就是說(shuō)從<table>標簽開(kāi)始，要讀到</table>標簽時(shí)，才將表格中的內容顯示在屏幕上。而且顯示也有優(yōu)先級，先讀到的先顯示。這樣的話(huà)，如果一個(gè)大表格中含有多個(gè)子表格，必須等大表格讀完，才能將子表格一起顯示出來(lái)。

我們在訪(fǎng)問(wèn)一些站點(diǎn)時(shí)，等待多時(shí)無(wú)結果，按"停止"按鈕卻一下顯示出頁(yè)面就是這個(gè)原因。

因此，我們在設計頁(yè)面表格的時(shí)候，應該做到：

1.整個(gè)頁(yè)面不要都套在一個(gè)表格里，盡量拆分成多個(gè)表格;

2.單一表格的結構盡量整齊；

3.表格嵌套層次盡量要少.

實(shí)驗證明：越復雜，嵌套層次越多的表格下載速度越慢。

關(guān)于網(wǎng)頁(yè)的表格設計今天就寫(xiě)到這里。阿捷沒(méi)有很多的技巧提供，關(guān)鍵在于您自己的實(shí)踐和運用，還是那句古話(huà)：“熟能生巧”。