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

只有注册用户登录后才能发表评论。


网站导航:
 

Locations of visitors to this page