当前位置：首页 > 编程语言 > HTML > 正文

【HTML基础教程】3、表格标签

1、<table>标签：声明一个表格，它的常用属性如下：

  • border属性：定义表格的边框，设置值是数值

  • cellpadding属性：定义单元格内容与边框的距离，设置值是数值

  • cellspacing属性：定义单元格与单元格之间的距离，设置值是数值

  • align属性：设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right

2、<tr>标签：定义表格中的一行

3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

  • align：设置单元格中内容的水平对齐方式,设置值有：left | center | right

  • valign：设置单元格中内容的垂直对齐方式 top | middle | bottom

  • colspan：设置单元格水平合并，设置值是数值

  • rowspan：设置单元格垂直合并，设置值是数值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <h1>表格标签</h1>
    <!-- 一个4行(tr标签)3列(td标签)的表格 -->
    <table border="1" width="600" height="300" align="" cellpadding="0" cellspacing="0">
        <!-- 第1行-3列 -->
        <tr>
            <!-- 表头用th标签，默认单元格中的内容加粗 -->
            <th>th标签加粗</th>
            <th>th标签加粗</th>
            <th>th标签加粗</th>
        </tr>
        <!-- 第2行-3列 -->
        <tr>
            <!-- align属性的用法：设置单元格中内容的水平对齐方式,设置值有：left | center | right -->
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <!-- 第3行-3列 -->
        <tr>
            <td>水平靠右</td>
            <td>水平靠左</td>
            <td>水平居中</td>
        </tr>
        <!-- 第4行-3列 -->
        <tr>
            <!-- valign：设置单元格中内容的垂直对齐方式 top | middle | bottom -->
            <!-- 单元格中的内容水平方向(align)右对齐，垂直方向(valign)顶端对齐(top) -->
            <td valign="top">水平靠右-垂直居上</td>
            <!-- 单元格中的内容水平方向(align)右对齐，垂直方向(valign)居中对齐(middle) -->
            <td valign="middle">水平靠右-垂直居中</td>
            <!-- 单元格中的内容水平方向(align)右对齐，垂直方向(valign)底端对齐(middle) -->
            <td valign="bottom">水平靠右-垂直居下</td>
        </tr>
    </table>
    <br/>
    <br/>
    <br/>
    <table border="0" width="500" height="200">
        <tr>
            <!-- colspan：设置单元格水平合并，设置值是数值 -->
            <th colspan="5">基本情况</th>
        </tr>
        <tr>
            <td width="18%">姓名</td>
            <td width="21%"></td>
            <td width="18%">性别</td>
            <td width="21%"></td>
            <!-- rowspan 设置单元格垂直合并，设置值是数值 -->
            <td width="22%" rowspan="5" valign="bottom"><img src="images/01.png" title="寒冰" alt="寒冰"></td>
        </tr>
        <tr>
            <td>民族</td>
            <td></td>
            <td>出生日期</td>
            <td></td>
        </tr>
        <tr>
            <td>政治面貌</td>
            <td></td>
            <td>健康状况</td>
            <td></td>
        </tr>
        <tr>
            <td>籍贯</td>
            <td></td>
            <td>学历</td>
            <td></td>
        </tr>
        <tr>
            <td>电子信箱</td>
            <td></td>
            <td>联系电话</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

效果如下：


【HTML基础教程】3、表格标签


HTML基础教程

上一篇
【HTML基础教程】2、表单标签

下一篇
【HTML基础教程】4、页面布局及实例

相关文章

发表评论

最新文章

推荐文章