表格标签及练习

Moerin_

已于 2022-08-29 10:24:16 修改

阅读量169

点赞数

文章标签： servlet 前端 html

于 2022-08-28 10:42:23 首次发布

本文链接：https://blog.csdn.net/Moerin_/article/details/126567163

版权

表格table：

tr(table row)表示行

th(table head)表示表头

td(table data cell)表示单元格

thead，tbody，tfoot的内容与书写位置无关；

下面是一个简单的练习：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 680px;
            text-align: center;
            margin-left: 100px;
        }

        td {
            width: 100px;
            line-height: 32px;
            text-align: center;
            border: 1px solid #777777;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2>个人简历</h2>
        <table border="1" cellspacing="0">
            <tr>
                <td>姓名</td>
                <td></td>
                <td>性别</td>
                <td></td>
                <td>出生年月</td>
                <td></td>
                <td rowspan="4"></td>
            </tr>
            <tr>
                <td>籍贯</td>
                <td></td>
                <td>民族</td>
                <td></td>
                <td>状况</td>
                <td></td>

            </tr>
            <tr>
                <td>政治面貌</td>
                <td></td>
                <td>身高</td>
                <td></td>
                <td>外语程度</td>
                <td></td>
            </tr>
            <tr>
                <td>所在学院</td>
                <td></td>
                <td>学历</td>
                <td></td>
                <td>健康状态</td>
                <td></td>

            </tr>
            <tr>
                <td>所学专业</td>
                <td colspan="2"></td>
                <td colspan="2">特长</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td>毕业时间</td>
                <td colspan="2"></td>
                <td colspan="2">曾任职务</td>
                <td colspan="2"></td>

            </tr>
            <tr>
                <td rowspan="3">家庭住址</td>
                <td colspan="2"></td>
                <td colspan="2">联系电话</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td colspan="2">个人微信</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td colspan="2">E-mail</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td>主修课程</td>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td>获得证书</td>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td>熟悉软件</td>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td>个人特点</td>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td>应聘岗位及个人特长和能力</td>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td>社会实践和经历</td>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td colspan="7">感谢您的信任与我的实力将为我们带来共同的成功！希望我能为咱们公司贡献自己的力量</td>
            </tr>
        </table>
    </div>
</body>

</html>

运行结果如下图