五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置: 365建站網(wǎng) > 365文章 > 網(wǎng)站設(shè)計(jì)的思考(10)_網(wǎng)頁(yè)中表格的運(yùn)用

網(wǎng)站設(shè)計(jì)的思考(10)_網(wǎng)頁(yè)中表格的運(yùn)用

文章來(lái)源:365jz.com     點(diǎn)擊數(shù):10489    更新時(shí)間:2010-03-07 21:42   參與評(píng)論

  表格(table)是頁(yè)面的重要元素,是頁(yè)面排版的主要手段。盡管DHTML中的層(layer)也可以實(shí)現(xiàn)網(wǎng)頁(yè)元素的自由定位,但是表格顯然更加方便編輯與修改。熟練掌握和運(yùn)用表格的各種屬性,可以讓您的頁(yè)面看起來(lái)賞心悅目。
  本文將分兩部分詳細(xì)介紹表格在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用。包括表格的基本用法和表格運(yùn)用的注意點(diǎn)。
  一.表格的基本用法。
  表格的基本用法相信您已經(jīng)非常熟悉了。但為了保證文章的完整性,阿捷在這里還是再羅列一遍。
  ●表格的HTML基本語(yǔ)法

<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>
123
ABC

 
  ●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>
123
ABC

  ●表格的對(duì)齊方式
 ?。?表格內(nèi)的文字對(duì)齊。
  語(yǔ)法:<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>
ABC

  2.表格在頁(yè)面內(nèi)的對(duì)齊。
  如果你需要與表格并排放一段文字,就需要用到table標(biāo)簽的另一個(gè)個(gè)參數(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>
是和表格并排排放的
   123
ABC
這里的文字是和表格并排排放的

 

     ●表格的嵌套
  表格嵌套就是在表格里插入表格,嵌套的排版方法就是將要插入的表格當(dāng)做文字來(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>標(biāo)簽里設(shè)置,參數(shù)有:
bgcolor           背景顏色
bordercolor       邊框顏色
bordercolorlight  立體邊框亮色
bordercolordark   立體邊框暗色
  語(yǔ)法為:<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>


  以上是表格的基本用法。現(xiàn)在frngtpage,dreamweaver等所見(jiàn)即所得的網(wǎng)頁(yè)編輯軟件都不用編寫代碼,就可以輕松的實(shí)現(xiàn)表格的排版和嵌套,但是掌握一些基本語(yǔ)法,關(guān)鍵時(shí)刻還是很有用處的。
    二.表格運(yùn)用的注意點(diǎn)
  表格的嵌套并不是表格處理最困難的地方,無(wú)論多復(fù)雜的版面,悉心琢磨一番總能找到解決的辦法。
我們需要考慮的是:
  ○用什么樣的嵌套排版方式使網(wǎng)頁(yè)的下載速度達(dá)到最快。
  我們知道:瀏覽器在讀取網(wǎng)頁(yè)html原代碼時(shí),是讀完整一個(gè)table再將它顯示出來(lái)。也就是說(shuō)從<table>標(biāo)簽開(kāi)始,要讀到</table>標(biāo)簽時(shí),才將表格中的內(nèi)容顯示在屏幕上。而且顯示也有優(yōu)先級(jí),先讀到的先顯示。這樣的話,如果一個(gè)大表格中含有多個(gè)子表格,必須等大表格讀完,才能將子表格一起顯示出來(lái)。
  我們?cè)谠L問(wèn)一些站點(diǎn)時(shí),等待多時(shí)無(wú)結(jié)果,按"停止"按鈕卻一下顯示出頁(yè)面就是這個(gè)原因。
  因此,我們?cè)谠O(shè)計(jì)頁(yè)面表格的時(shí)候,應(yīng)該做到:
  1.整個(gè)頁(yè)面不要都套在一個(gè)表格里,盡量拆分成多個(gè)表格;
  2.單一表格的結(jié)構(gòu)盡量整齊;
  3.表格嵌套層次盡量要少.
  實(shí)驗(yàn)證明:越復(fù)雜,嵌套層次越多的表格下載速度越慢。
   關(guān)于網(wǎng)頁(yè)的表格設(shè)計(jì)今天就寫到這里。阿捷沒(méi)有很多的技巧提供,關(guān)鍵在于您自己的實(shí)踐和運(yùn)用,還是那句古話:“熟能生巧”。

如對(duì)本文有疑問(wèn),請(qǐng)?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會(huì)為你解答??! 點(diǎn)擊進(jìn)入論壇

發(fā)表評(píng)論 (10489人查看,0條評(píng)論)
請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī),嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。
昵稱:
最新評(píng)論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學(xué)習(xí)

業(yè)務(wù)咨詢

· 技術(shù)支持
· 服務(wù)時(shí)間:9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號(hào)