七、html表格

最新推荐文章于 2024-06-10 17:18:33 发布

暗托涅瓦

最新推荐文章于 2024-06-10 17:18:33 发布

阅读量292

点赞数 1

分类专栏：大数据开发与分析暑期实训笔记文章标签： html 前端 webstorm css

本文链接：https://blog.csdn.net/weixin_74774974/article/details/131586537

版权

大数据开发与分析暑期实训笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、表格

表格
组织内容：推荐
布局：不推荐，嵌套非常复杂，影响SEO，采用列表代替布局

2、表格的结构

标题
头部
列标题
主体
行、列、单元格
脚部

在JavaScript默认提供主体
在这里插入图片描述

3、表格的使用

在这里插入图片描述

4、列与行合并：不规则表格

列合并
水平方向
colspan=”合并的单元格数量”

行合并
垂直方向
rowspan=” 合并的单元格数量”
在这里插入图片描述

5、表格样式

在这里插入图片描述

6、课堂练习

制作课程表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 800px;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            text-align: center;
        }

        tbody tr td:nth-child(1) {
            background-color: #ccc;
        }

        tbody th:nth-child(n-2) {

      background-color: #90ef90;
        }

        tbody th:nth-child(1) {
            background-color: #9acd32;
        }

        tbody th:nth-last-child(-n+2) {
            background-color: #ffb6c1;
        }

        tbody tr:last-child td {
            text-align: left;
            background-color: green;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td colspan="8">2022-2023学年第二学期课程表</td>
    </tr>
    <tr>
        <th>节次</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
        <th>星期日</th>
    </tr>
    <tr>
        <td rowspan="2">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>音乐</td>
        <td>体育</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td style="background-color: transparent;">数学</td>

<td>语言</td>
        <td>美术</td>
        <td>化学</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>美术</td>
        <td>劳动</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td style="background-color: transparent;">体育</td>
        <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>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="8">注意：</td>
    </tr>
</table>
</body>
</html>