table标签,这个是重点。
<table></table>
这对标签中插入的无非是三个子标签<th>,<tr>,<td>。
th的作用是表格题头,可以替换td使用,不同的是它里面的字体是加粗的。
tr,td用的最多,具体用法就不多说了。
这一章主要强调的是这些标签的属性
table 标签 -- 代表HTML表格
table标签是成对出现的,以<table>开始,以</table>结束
属性
Common -- 一般属性
summary -- 代表表格的摘要说明
width -- 代表表格的宽度
border -- 代表表格边框(此属性应该使用CSS实现)
cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)
th 标签 -- 代表HTML表格中的表头
th标签是成对出现的,以<th>开始,</th>结束
属性
Common -- 一般属性
abbr -- 代表表头的简写
axis -- 对单元格在概念上分类
colspan -- 一行跨越多列
headers -- 连接表格的数据与表头
rowspan -- 一列跨越多行
scope -- 定义行或列的表头
align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
td 标签 -- 代表HTML表格中的一个单元格
td标签是成对出现的,以<td>开始,</td>结束
属性
Common -- 一般属性
abbr -- 代表表头的简写
axis -- 对单元格在概念上分类
colspan -- 一行跨越多列
headers -- 连接表格的数据与表头
rowspan -- 一列跨越多行
scope -- 定义行或列的表头
align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
caption 标签 -- 代表HTML表格的标题
caption标签是成对出现的,以<caption>开始,</caption>结束
属性
Common -- 一般属性
说明:
caption标签可以为表格提供一个描述,和图像的说明alt比较类似.默认情况下,浏览器显示表格标题在表格的上方.
CSS里的caption-side属性用来控制表格标题显示的位置.
cellpadding与cellspacing属性
巢(cell) -- 表格的内容
巢补白(cellpadding) -- 代表巢外面的一个距离,用于隔开巢与巢空间
巢空间(cellspacing) -- 代表表格边框与巢补白的距离,也是巢补白之间的距离
它们一般都由CSS实现,这里就不做讨论了
rowspan,colspan 属性(画表格很有用)
headers 属性 -- 定义了与表格单元格相关联的一系列表头
headers属性的取值可以是一系列以空格分开的标签的id
说明
headers属性通常可以使表格单元格连接多个表头.
另一种连接表格数据单元格和表头的方法是使用scope属性
scope 属性
scope 属性 -- 定义了行或列的表头
scope -- 通过此属性可以定义行或列的表头
取值
col -- 定义列表头
row -- 定义行表头
colgroup -- 定义列组的表头信息,是column group的缩写
rowgroup -- 定义行组的表头信息,是row group的缩写
说明
scope属性通常可以连接表格数据单元格和表头.
另一种连接表格数据单元格和表头的方法是使用headers属性,此属性通常只使用在表格比较复杂的情况下.
col标签和colgroup标签似乎是合起来用的,结合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>
效果自己看吧。
今天到这里,明天继续FORM的学习。
posted on 2007-12-27 17:23
湘江夜游神 阅读(240)
评论(0) 编辑 收藏 所属分类:
HTML