最新消息:

HTMlL基本语法(三)——XHTML表格标签

Html 大步 753浏览 0评论

表格基本结构

1
2
3
4
5
6
7
8
9
<table>                                   <!--用于定义一个表格的开始标签-->
        <caption>表格名称</caption>     <!--用于定义表格的标题标签-->
        <tr>                          <!--定义一行标签,可以再内部建立多组单元格-->
            <tb>表头单元格</tb>          <!--定义表格头单元,文字讲义粗体居中显示-->
        </tr>                         <!--用于定义行标签结束标记-->
        <tr>                          <!--定义一行标签,可以再内部建立多组单元格-->
            <tb>单元格</tb>                <!--定义一个单元格标签-->
        </tr>                         <!--用于定义行标签结束标记-->
</table>                              <!--用于定义一个表格结束-->

<table>...</table>      于定义一个表格开始和结束
<th>...</th>             表格中的文字将以粗体显示, <th>标签必须放在<tr>标签内
<tr>...</tr>            一组行标签内可以建立多组由<td>或<th>标签所定义的单元格
<td>...</td>          一组<td>标签将将建立一个单元格,<td>标签必须放在<tr>标签内

1.<table>标签
属 性                               描 述
border :                          表格的边框。
cellspacing:                      单元格间距。
cellpadding :                     单元格衬距。
width:                表格的宽度。width的取值还可以使用百分比
height:                      表格的高度,取值方法同width
bgcolor:                 表格的背景色。<td>单元格也可有此属性。
background:                    表格的背景图。<td>也有此属性。
bordercolor:                   表格的边框颜色,取值同bgcolor。
bordercolorlight:      亮边框颜色, 亮边框指表格的左边和上边的边框。
bordercolordark:       暗边框颜色, 暗边框指表格的右边和下边的边框。
align:表格的对齐方式,值有left、center、 right。

2.<caption>标签
用于定义表格标题的位置,放在<table>标签内,在表格标签<tr>标签之前。
属性                描述
align                设置标题位于文档的左、中或右
valign                设置标题位于表格的上方和表格的下方。默认属性是标题位于表格的上方中间位置。

3.<tr>标签
该标签定义一行标签。表格由行和列组成,一个表格由几行组成就有几个行标签<tr>,一组标签内可以建立多个组由<td>或<th>标签所定义的单元格。
举例:
<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">
属 性                    描 述
align                 行内容的水平对齐
valign                 行内容的垂直对齐
bgcolor                  行的背景颜色
bordercolo              行的边框颜色
bordercolorlight     行的亮边框颜色
bordercolordark         行的暗边框颜色

4.<td>和<th>标签
<td>和<th>都是插入单元格的标签,这两个标签都必须嵌套在<tr>标签内,是成对出现的。<th>用于表头标签,表头标签一般位于首行或者首列,标签之间的内容位于该单元格内的标题内容,其中的文字以粗体居中显示。数据标签<td>就是该单元格中的具体内容。<td>和<th>标签的属性都一样的。
属 性                        描 述
width/height    单元格的宽和高,接受绝对值(如 80)及相对值(如 80%)。
colspan                      单元格向右打通的栏数
rowspan                      单元格向下打通的列数
align         单元格内字画位置(水平),可选值为: left, center, right
valign          单元格内字画位置(垂直),可选值为: top, middle, bottom
bgcolor                      单元格的底色
bordercolor                  单元格边框颜色
bordercolorlight      单元格边框向光部分的颜色
bordercolordark          单元格边框背光部分的颜色
background                  单元格背景图片

表格综合使用代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
    <head><title>TABLE表格的使用示例</title></head>
    <body>
        <table width="80%" border="1" cellpadding="3" cellspacing="0" align="center">
            <caption><h1>学员表</h1></caption>              <!-- 设置表格标题位置 -->
            <tr><th colspan="3"> 学员基本信息</th><th colspan="2">成 绩</th></tr>
            <tr><th>姓 名</th><th>性 别</th><th>专 业</th><th>课 程</th><th>分 数</th></tr>
            <tr align="center">                             <!-- 第一行开始标记,设置居中  -->
                <td>小 峰</td>                          <!-- 设置第一个单元格          -->
                <td>男</td>                             <!-- 设置第二个单元格          -->
                <td rowspan="2">计算机</td>             <!-- 设置第三个单元格,占两行  -->
                <td rowspan="2">PHP开发</td>            <!-- 设置第四个单元格,占两行  -->
                <td>86</td>                             <!-- 设置第五个单元格          -->
            </tr>                                           <!-- 第一行结束标记            -->
            <tr align="center">                             <!-- 第二行开始标记,设置居中  -->
                <td>小 影</td>                          <!-- 设置第二行第一个单元格    -->
                <td>女</td>                             <!-- 设置第二行第二个单元格    -->
                <td>98</td>                             <!-- 设置第二行五个单元格      -->
            </tr>                                           <!-- 第二行结束标记            -->
        </table>                                          <!-- 表格结束标记              -->
    </body>                                                         <!-- 主体标记的结束标记        -->
</html>                                                                 <!-- HTML文档的结束标记        -->

转载请注明:大步's Blog » HTMlL基本语法(三)——XHTML表格标签

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
SiteMap