網(wǎng)站建設(shè)中網(wǎng)頁中表格的運(yùn)用發(fā)布者:本站 時間:2022-05-04 10:05:09
表格(table)是頁面的重要元素,是頁面排版的主要手段。盡管DHTML中的層(layer)也可以實(shí)現(xiàn)網(wǎng)頁元素的自由定位,但是表格顯然更加方便編輯與修改。熟練掌握和運(yùn)用表格的各種屬性,可以讓您的頁面看起來賞心悅目。
本文將分兩部分詳細(xì)介紹表格在網(wǎng)頁設(shè)計中的運(yùn)用。包括表格的基本用法和表格運(yùn)用的注意點(diǎn)。
一.表格的基本用法。
表格的基本用法相信您已經(jīng)非常熟悉了。但為了保證文章的完整性,阿捷在這里還是再羅列一遍。
●表格的HTML基本語法
<table>...</table> - 定義表格
<tr> - 定義表行
<th> - 定義表頭
<td> - 定義表元(表格的具體數(shù)據(jù))
例如:
<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標(biāo)簽的參數(shù)。table標(biāo)簽可以含下列參數(shù)。
border 表格邊框
cellspacing 表元之間的空白距離
cellpadding 表元內(nèi)部的空白距離
width 表格寬度(可以用%或者具體數(shù)據(jù)表示)
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
●表格的對齊方式
1.表格內(nèi)的文字對齊。
語法:<td align=#> 其中#可以設(shè)定的參數(shù)有:
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.表格在頁面內(nèi)的對齊。
如果你需要與表格并排放一段文字,就需要用到table標(biāo)簽的另一個個參數(shù):
<table align=#> 其中#可以設(shè)定為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
這里的文字是和表格并排排放的
●表格的嵌套
表格嵌套就是在表格里插入表格,嵌套的排版方法就是將要插入的表格當(dāng)做文字來處理同樣使用<td align=#>語句。
例如:
<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>標(biāo)簽里設(shè)置,參數(shù)有:
bgcolor 背景顏色
bordercolor 邊框顏色
bordercolorlight 立體邊框亮色
bordercolordark 立體邊框暗色
語法為:<table bgcolor="#RRGGBB">其中RRGGBB分別為RGB三色的16進(jìn)制數(shù)值
例如:
<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(xiàn)在frngtpage,dreamweaver等所見即所得的網(wǎng)頁編輯軟件都不用編寫代碼,就可以輕松的實(shí)現(xiàn)表格的排版和嵌套,但是掌握一些基本語法,關(guān)鍵時刻還是很有用處的。
二.表格運(yùn)用的注意點(diǎn)
表格的嵌套并不是表格處理最困難的地方,無論多復(fù)雜的版面,悉心琢磨一番總能找到解決的辦法。我們需要考慮的是:
○用什么樣的嵌套排版方式使網(wǎng)頁的下載速度達(dá)到最快。
我們知道:瀏覽器在讀取網(wǎng)頁html原代碼時,是讀完整一個table再將它顯示出來。也就是說從<table>標(biāo)簽開始,要讀到</table>標(biāo)簽時,才將表格中的內(nèi)容顯示在屏幕上。而且顯示也有優(yōu)先級,先讀到的先顯示。這樣的話,如果一個大表格中含有多個子表格,必須等大表格讀完,才能將子表格一起顯示出來。
我們在訪問一些站點(diǎn)時,等待多時無結(jié)果,按"停止"按鈕卻一下顯示出頁面就是這個原因。
因此,我們在設(shè)計頁面表格的時候,應(yīng)該做到:
1.整個頁面不要都套在一個表格里,盡量拆分成多個表格;
2.單一表格的結(jié)構(gòu)盡量整齊;
3.表格嵌套層次盡量要少.
實(shí)驗(yàn)證明:越復(fù)雜,嵌套層次越多的表格下載速度越慢。
關(guān)于網(wǎng)頁的表格設(shè)計今天就寫到這里。阿捷沒有很多的技巧提供,關(guān)鍵在于您自己的實(shí)踐和運(yùn)用,還是那句古話:“熟能生巧”。
選擇我們,優(yōu)質(zhì)服務(wù),不容錯過
1. 優(yōu)秀的網(wǎng)絡(luò)資源,強(qiáng)大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計水平,更放心
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
------------------------------------------------------------
24小時聯(lián)系電話:021-58370032
關(guān)鍵詞標(biāo)簽:上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)