前端day3-表格

最新推荐文章于 2024-09-11 22:31:16 发布

小王在学习了

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量264

点赞数 2

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/wlx2513/article/details/140959315

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day3-表格</title>
</head>
<body>

    <!-- 表格 -->
    <!-- table-框架；tr-行；td-列（ table > td > tr ) -->
    <!-- border:表格框 -->
    <!-- caption:表格大标题 -->
    <!-- th：列名，在tr内 -->
    <table border="1" width="200" heighth="300">
        <caption><h1>学生成绩单</h1></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评估</th>
        </tr>

        <tr>
            <td>小明</td>
            <td>90</td>
            <td>优</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>100</td>
            <td>优</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>190</td>
            <td>优</td>
        </tr>
    </table>

    <!-- 合并：保留左边或上边的数据,删除不要的数据 -->
    <!-- rowspan:垂直合并，colspan：水平合并；并设置合并格数 -->
    <table border="1" width="200" heighth="300">
        <caption><h1>学生成绩单</h1></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评估</th>
        </tr>

        <tr>
            <td>小明</td>
            <td rowspan="2">90</td>
            <td>优</td>
        </tr>
        <tr>
            <td>小红</td>
            <!-- <td>100</td> -->
            <td>优</td>
        </tr>
        <tr>
            <td>总结</td>
            <td colspan="2">190</td>
            
        </tr>
    </table>
</body>
</html>