HTML入门（表格标签）————DAY4

最新推荐文章于 2022-09-19 21:48:07 发布

好吃的都给你呀

最新推荐文章于 2022-09-19 21:48:07 发布

阅读量96

点赞数

分类专栏：前端杂文文章标签： HTML 表格

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102571426

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

效果如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
    <link rel="stylesheet" href="Style.css">
</head>

<body>
    <!-- table 表格标签，块元素 -->
    <table id = "t1" >
        <!-- thead ,表头 表的第一行需要放在表头里，和tbody基本一样，只是语义上的差别 -->
        <thead>
            <!--tr 一行 -->
            <tr>
                <!-- th表头行的单元格，字体加粗，和td只是语义上的差别 -->
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
            </tr>
        <tbody>
            <tr>
                <td>第一节</td>
                <td>语文</td>
                <td>英语</td>
                <td>音乐</td>
            </tr>
        </tbody>
        </thead>

    </table>

    <!-- 实际开发当中，thead和tbody都可以省略，table中直接放tr，tr中直接放td -->

    <table id="t2">
            <tr>
                <td></td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
            </tr>
            <tr>
                <td>第一节</td>
                <!-- rowspan用于设置td占多少行 -->
                <td rowspan="2">语文</td>
                <td>数学</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>第二节</td>
                <td>化学</td>
                <td>生物</td>
            </tr>
            <tr>
                <td>第三节</td>
                <!-- colspan，设置td占多少列 -->
                <td colspan="3">体育</td>
                
            </tr>
        </table>

</body>

</html>

body{
    background-color: aquamarine;
}
#t1{
    height: 200px;
    width: 300px;
    background-color: bisque;
    border: 4px solid white;
    margin:0 auto;
    border-collapse: collapse;
    text-align: center;
}
tr,td,th{
    border:4px solid white;
}

#t2{
    height: 200px;
    width: 300px;
    background-color: bisque;
    border: 4px solid white;
    margin:0 auto;
    margin-top: 100px;
    border-collapse: collapse;
    text-align: center;
}
tr,td,th{
    border:4px solid white;
}