表格标签

表格基本标签

标签名说明
table表格整体,可用于包裹多个tr
tr表格每行,可以包含td
td表格单元格可用于包含内容

border 边框 align 对齐方式

<!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>
</head>
<body>
    <ul >
        <li>333</li>
        <li>222</li>
        <li>111</li>
    </ul>
</body>
</html>
1632713894819

表格表题和表头单元格标签

“th”表格表题,“caption”标签书写在table标签内部

标签名名称说明
caption表格大标题表示表格整体大标题,默认在表格整体顶部居中位置显示
th表头单元格表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示

表格结构标签

<!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>
</head>
<body>
    <table border="3">
    <thead><tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年级</th>
    </tr></thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>小结</td>
                <td>空难改变</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表格结构标签

由table》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>
</head>
<body>
    <table border="2" width="300" height="300">
<caption>学生成绩单</caption>
<tr>
    <th>姓名</th>
    <th>成绩</th>
    <th>评语</th>
</tr>
<tr>
    <td>小哥哥</td>
    <td rowspan="2">100</td>
    <td>丑拒</td>
</tr>
<tr>
    <td>小姐姐</td>
    <!-- <td colspan="1">100</td> -->
    <td>丑拒</td>
</tr>
<tr>
    <td>总结</td>
    <td colspan="2">郎才女帽</td>
</tr>
    </table>
</body>
</html>
表格标签插图1

跨行合并rowspan,跨列合并colspan

<!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>
</head>
<body>
    <table border="2" width="400" height="500">
        <caption><h3>优秀学生信息表格</h3></caption>
        <thead>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">高三</td>
                <td>张三</td>
                <td>151515</td>
                <td>三班</td>
            </tr>
            <tr>
                <!-- <td>高三</td> -->
                <td>张三</td>
                <td>555665</td>
                <td>三班</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>详情</td>
                <td colspan="3">你们都很优秀</td>
                <!-- <td></td>
                <td></td> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>
请输入图片描述
<!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>
</head>
<body>
    <table border="2" width="300" height="300">
<caption>学生成绩单</caption>
<tr>
    <th>姓名</th>
    <th>成绩</th>
    <th>评语</th>
</tr>
<tr>
    <td>小哥哥</td>
    <td rowspan="2">100</td>
    <td>丑拒</td>
</tr>
<tr>
    <td>小姐姐</td>
    <!-- <td colspan="1">100</td> -->
    <td>丑拒</td>
</tr>
<tr>
    <td>总结</td>
    <td colspan="2">郎才女帽</td>
</tr>
    </table>
</body>
</html
请输入图片描述
© 版权声明
THE END
喜欢就支持一下吧
点赞14赞赏 分享
评论 抢沙发

请登录后发表评论