網路城邦
上一篇 回創作列表 下一篇  字體:
引用:http://www.powmo.com/ae.html
2010/03/10 11:23:13瀏覽394|回應0|推薦0

表格是每一個網頁不可缺少的東西,首先我們要加入<table>的碼,在<table>的標籤內可以控制整個表格的長度和外框的粗細 :

<table width="300 border="1 cellspacing="2>

  • width=控制表格長度,可用數字或百分比
  • cellspaing=控制儲存格的分隔距離,內定為2
  • background=背景圖檔
  • border=控制外框粗細,不外框便設成0

只是一開始的設定,必須在<table>後加上<td>,才會新開一個儲存格,再用</td>來關閉儲存格 :

<table border=1>
<td>儲存格1</td>

<td>儲存格2</td>
</table>
儲存格1儲存格2

若想跳到下一行,加上<tr>即可 :

<table border=1>
<td>
儲存格
1</td>
<td>
儲存格
2</td>
<tr>

<td>
儲存格3</td>
<td>
儲存格
4</td>
</table>
儲存格1儲存格2
儲存格3儲存格4

當然亦可使用<th>:

<table border=1>
<th>
儲存格
1</th>
<th>
儲存格
2</th>
<tr>

<td>
儲存格3</td>
<td>
儲存格
4</td>
</table>
儲存格1儲存格2
儲存格3儲存格4

<td><th>內的屬性如下 :

  • align=控制水平是left(靠左)right(靠右)center(置中)
  • valign=控制垂直是top(靠上)middle(置中)bottom(靠下)
  • background=背景圖檔
  • colspan=使一個儲存格橫跨 N 個欄位
  • rowspan=使一個儲存格下跨 N 個列

若想為表格加上標題,來標明整個表格的主題,可在<table>後加上<caption>的標籤

<table border=1>
<caption>公佈欄</caption>

<td>
儲存格1</td>
<td>
儲存格
2</td>
<tr>
<td>
儲存格
3</td>
<td>
儲存格
4</td>
</table>
公佈欄
儲存格1儲存格2
儲存格3儲存格4

colspan的用法 :

<table border=1>
<td
colspan=3 align=center>儲存格
A1</td>
<tr>
<td>
儲存格
B1</td>
<td>
儲存格
B2</td>
<td>
儲存格
B3</td>
</table>
儲存格 A1
儲存格 B1儲存格 B2儲存格 B3

rowspan的用法 :

<table border=1>
<td
rowspan=3 align=center>儲存格
A1</td>
<td>
儲存格
B1</td>
<tr>

<td>
儲存格 B2</td>
<tr>

<td>
儲存格 B3</td>
</table>
儲存格 A1儲存格 B1
儲存格 B2
儲存格 B3

( 不分類不分類 )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=hhhhhhh203&aid=3840594