HTML論報 01/6/9第7號
閱讀過往電子報   訂閱\取消請至報台:魅力GigaePaper
編者的話

在前面說明表格特性的部分,已大致將表格的主要特性講完,我們這一期在補充一些實用的表格屬性。這一期要講解的有:對齊方式、文字排版的問題。

本期課文

對齊屬性會使用在兩個地方,一是欄位<td>之內,另一則是Table相對於外面整個版面的位置。

用法.<Table align="center"> align值:center , left , right

用法.<Td align="center"> 水平align值:center , left , right

用法.<Td valign="center"> 垂直valign值:middle , top , bottom , baseline

表格相對於版面的對齊:

Example.對齊中央
<table align=center>

   
   

Example.Table2相對對齊於Table1中間

Table1
Table2  
   

調整Table2的尺寸,Table1依然置於中央


Table1
Table2  
   

Example.對齊左、右,這兩個屬性較特別,它不但靠齊邊邊,還會將底下的版面拉到旁邊
<table align=left>
<table align=right>
我們先看還沒使用前的畫面

   
   
  慶祝水利節教導小朋友珍惜水資源 慶祝水利節和節水週活動,十日上午在台北市立動物園舉行。市立動物園節水有方,將搜集的雨水,供給園內廁所清潔和灌溉花木之用。現場教導小朋友珍惜水資源,舉手作環保。

加上align=left之後

   
   
  慶祝水利節教導小朋友珍惜水資源 慶祝水利節和節水週活動,十日上午在台北市立動物園舉行。市立動物園節水有方,將搜集的雨水,供給園內廁所清潔和灌溉花木之用。現場教導小朋友珍惜水資源,舉手作環保。

加上align=right之後

   
   
  慶祝水利節教導小朋友珍惜水資源 慶祝水利節和節水週活動,十日上午在台北市立動物園舉行。市立動物園節水有方,將搜集的雨水,供給園內廁所清潔和灌溉花木之用。現場教導小朋友珍惜水資源,舉手作環保。

這個使用法與插圖的指令<img>用法是相同的
<img src='http://www.howyoung.com/html_ep_img/test.gif' align=left>

  慶祝水利節教導小朋友珍惜水資源 慶祝水利節和節水週活動,十日上午在台北市立動物園舉行。市立動物園節水有方,將搜集的雨水,供給園內廁所清潔和灌溉花木之用。現場教導小朋友珍惜水資源,舉手作環保。

在Table內部設定對齊:

Example.對齊中央
<table>
<td
align=center>
</td>
</table>

對齊中央

Example.對齊左邊
<table>
<td
align=left>
</td>
</table>

對齊左邊

Example.對齊右邊
<table>
<td
align=right>
</td>
</table>

對齊右邊

Example.垂直對齊,對齊上邊
<table>
<td
valign=top>
</td>
</table>

對齊上邊

Example.垂直對齊,對齊中間
<table>
<td
valign=middle>
</td>
</table>

對齊中央

Example.垂直對齊,對齊底邊
<table>
<td
valign=bottom>
</td>
</table>

對齊底邊

 

刊附

zZZ

小工具

Search and Replace by Funduc 版本 3.4
當你的網頁寫的越來越多越來越大時,想要修改某一特定的字時是多麼痛苦的事,找的你眼花撩亂,Search and Replace幫你一次搜尋/取代整份網頁,並且如果要修改整個網站內的特定字串時也可以代換整個目錄下的所有網頁。在Toget下載:

下載

版權所有©2001 屬於 「HTML論報」報主