2020-08-24 笔记整理

最新推荐文章于 2024-08-31 21:49:18 发布

xiaolin14451

最新推荐文章于 2024-08-31 21:49:18 发布

阅读量111

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/zheng_14451/article/details/108199806

版权

Table表格

表格的组成部分：标题、头部、主体、底部

table：定义一个表格
caption：定义表格的标题
thead：头部部分
tbody：定义表格的主体（数据）部分·
tfoot：定义表尾，一般显示汇总信息

tr 定义一行
th td 来定义数据项（单元格） th 一般用于表头，有加粗的样式。
td 一般用于主体部分，没有加粗的样式
td rowspan和colspan 分别定义了单元格的行的行数，跨列的列数。

cellpadding：数据与表格之间的距离
cellspacing：表格与表格之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../exercise/css/reset.css">
    <title>Document</title>
    <style>
        caption{
            font: 30px bold;
            margin-bottom: 20px;
        }
        table{
            width: 60%;
            border: 1px solid black;
            margin: 0 auto;
            border-collapse: collapse;
        }

        th{
            border: 1px solid black;
            height: 50px;
            text-align: center;     
            line-height: 50px;
            vertical-align: middle;
        }
        
    </style>
</head>
<body>
    <table>
        <caption>新员工入职登记表</caption>
        <tr>
            <th>姓名</th>
            <th></th>
            <th>性别</th>
            <th><form action="target.html">
                <input type="radio" name="hello" value="a" checked>男
                <input type="radio" name="hello" value="b">女
            </form></th>
            <th>出生日期</th>
            <th></th>
            <th rowspan="5" class="last">一寸近照<form action="target.html">
                <input type="file" name="file" id="file1">
            </form></th>
        </tr>
        <tr>
            <th>曾用名</th>
            <th></th>
            <th>体重</th>
            <th></th>
            <th>身高</th>
            <th></th>
        </tr>
        <tr>
            <th>民族</th>
            <th><form action="target.html">
                <select name="haha">    
                    <option selected value="i">汉族</option>
                    <option value="ii">苗族</option>
                    <option value="iii">回族</option>
                </select>
            </form></th>
            <th>籍贯</th>
            <th></th>
            <th>婚姻状况</th>
            <th><form action="target.html">
                <input type="radio" name="hello" value="a">已婚
                <input type="radio" name="hello" value="b" checked>未婚
            </form></th>
        </tr>
        <tr>
            <th>政治面貌</th>
            <th><form action="target.html">
                <input type="radio" name="hello" value="a">党员
                <input type="radio" name="hello" value="b" checked>团员
            </form></th>
            <th>健康状况</th>
            <th></th>
            <th>血型</th>
            <th><form action="target.html">
                <input type="radio" name="hello" value="a" checked>A
                <input type="radio" name="hello" value="b">B
                <input type="radio" name="hello" value="b">AB
            </form></th>
        </tr>
        <tr>
            <th>身份证号码</th>
            <th colspan="5"></th>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

xiaolin14451

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-08-24 笔记整理

Table表格表格的组成部分：标题、头部、主体、底部table：定义一个表格caption：定义表格的标题thead：头部部分tbody：定义表格的主体（数据）部分·tfoot：定义表尾，一般显示汇总信息tr 定义一行th td 来定义数据项（单元格） th 一般用于表头，有加粗的样式。td 一般用于主体部分，没有加粗的样式td rowspan和colspan 分别定义了单元格的行的行数，跨列的列数。cellpadding：数据与表格之间的距离cellspacing：表格与表格之间的
复制链接

扫一扫