table標簽,這個是重點。
<table></table>
這對標簽中插入的無非是三個子標簽<th>,<tr>,<td>。
th的作用是表格題頭,可以替換td使用,不同的是它里面的字體是加粗的。
tr,td用的最多,具體用法就不多說了。
這一章主要強調(diào)的是這些標簽的屬性
table 標簽 -- 代表HTML表格
table標簽是成對出現(xiàn)的,以<table>開始,以</table>結(jié)束
屬性
Common -- 一般屬性
summary -- 代表表格的摘要說明
width -- 代表表格的寬度
border -- 代表表格邊框(此屬性應該使用CSS實現(xiàn))
cellspacing -- 代表表格邊框與表格內(nèi)容填充的距離,也是內(nèi)容填充之間的距離(此屬性應該使用CSS實現(xiàn))
cellpadding -- 代表內(nèi)容填充的寬度(此屬性應該使用CSS實現(xiàn))
th 標簽 -- 代表HTML表格中的表頭
th標簽是成對出現(xiàn)的,以<th>開始,</th>結(jié)束
屬性
Common -- 一般屬性
abbr -- 代表表頭的簡寫
axis -- 對單元格在概念上分類
colspan -- 一行跨越多列
headers -- 連接表格的數(shù)據(jù)與表頭
rowspan -- 一列跨越多行
scope -- 定義行或列的表頭
align -- 代表水平對齊方式(left(左對齊) | center(居中對齊) | right(右對齊) | justify)(此屬性應該使用CSS實現(xiàn))
valign -- 代表垂直對齊方式(top(頂部對齊) | middle(中部對齊) | bottom(下部對齊) | baseline(基線對齊))(此屬性應該使用CSS實現(xiàn))
td 標簽 -- 代表HTML表格中的一個單元格
td標簽是成對出現(xiàn)的,以<td>開始,</td>結(jié)束
屬性
Common -- 一般屬性
abbr -- 代表表頭的簡寫
axis -- 對單元格在概念上分類
colspan -- 一行跨越多列
headers -- 連接表格的數(shù)據(jù)與表頭
rowspan -- 一列跨越多行
scope -- 定義行或列的表頭
align -- 代表水平對齊方式(left(左對齊) | center(居中對齊) | right(右對齊) | justify)(此屬性應該使用CSS實現(xiàn))
valign -- 代表垂直對齊方式(top(頂部對齊) | middle(中部對齊) | bottom(下部對齊) | baseline(基線對齊))(此屬性應該使用CSS實現(xiàn))
caption 標簽 -- 代表HTML表格的標題
caption標簽是成對出現(xiàn)的,以<caption>開始,</caption>結(jié)束
屬性
Common -- 一般屬性
說明:
caption標簽可以為表格提供一個描述,和圖像的說明alt比較類似.默認情況下,瀏覽器顯示表格標題在表格的上方.
CSS里的caption-side屬性用來控制表格標題顯示的位置.
cellpadding與cellspacing屬性
巢(cell) -- 表格的內(nèi)容
巢補白(cellpadding) -- 代表巢外面的一個距離,用于隔開巢與巢空間
巢空間(cellspacing) -- 代表表格邊框與巢補白的距離,也是巢補白之間的距離
它們一般都由CSS實現(xiàn),這里就不做討論了
rowspan,colspan 屬性(畫表格很有用)
headers 屬性 -- 定義了與表格單元格相關(guān)聯(lián)的一系列表頭
headers屬性的取值可以是一系列以空格分開的標簽的id
說明
headers屬性通常可以使表格單元格連接多個表頭.
另一種連接表格數(shù)據(jù)單元格和表頭的方法是使用scope屬性
scope 屬性
scope 屬性 -- 定義了行或列的表頭
scope -- 通過此屬性可以定義行或列的表頭
取值
col -- 定義列表頭
row -- 定義行表頭
colgroup -- 定義列組的表頭信息,是column group的縮寫
rowgroup -- 定義行組的表頭信息,是row group的縮寫
說明
scope屬性通常可以連接表格數(shù)據(jù)單元格和表頭.
另一種連接表格數(shù)據(jù)單元格和表頭的方法是使用headers屬性,此屬性通常只使用在表格比較復雜的情況下.
col標簽和colgroup標簽似乎是合起來用的,結(jié)合CSS可以顯示表格的多種配色和字體顯示。
1
<style type="text/css">
2
.yellow {
}{
3
color: #CCCC33;
4
font-size:20px;
5
}
6
.blue {
}{
7
color: #3399CC;
8
font-size:12px;
9
}
10
</style>
11
<table width="80%" border="1" summary="test">
12
<colgroup>
13
<col />
14
<col class="yellow" />
15
<col />
16
<col span="2" class="blue" />
17
</colgroup>
18
<caption align="center">
19
ABCD
20
</caption>
21
<tr>
22
<th>Upper</th>
23
<th>AAAA</th>
24
<th>BBBB</th>
25
<th>CCCC</th>
26
<th>DDDD</th>
27
</tr>
28
<tr>
29
<td>Lower</td>
30
<td>aaaa</td>
31
<td>bbbb</td>
32
<td>cccc</td>
33
<td>dddd</td>
34
</tr>
35
</table>
效果自己看吧。
今天到這里,明天繼續(xù)FORM的學習。
posted on 2007-12-27 17:23
湘江夜游神 閱讀(245)
評論(0) 編輯 收藏 所屬分類:
HTML