004+limou+HTML——（4）HTML表格

已于 2023-03-12 10:42:08 修改
阅读量445 收藏
点赞数 3
分类专栏： Web三大件（第一版） 文章标签： html css 前端
于 2023-03-08 18:41:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73168361/article/details/129408703
版权

000、前言

表格在实际开发中的应用还是比较多的，表格可以更加清晰地排列数据

001、基本结构

（1）构成

  • 表格：<table>
  • 行：<tr>（table row，表格行），由多少组tr标签，就有多少行
  • 单元格：/（table data cell，表格单元格）

（2）代码

<!DOCTYPE html>
<html>
    <head>
        <meat charset="utf-8"/>
        <title>网页标题</title>
    </head>

    <body>
        <h1>网页标题1</h1>

        <table>
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
            </tr>
            <tr>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
        </table>

        <h1>网页标题2</h1>
    </body>
</html>

在这里插入图片描述

（3）使用CSS进行优化（CSS以后学习，这里只是单纯让表格更加直观，因为默认情况下表格是没有边框的）

（3）使用CSS进行优化（CSS以后学习，这里只是单纯让表格更加直观，因为默认情况下表格是没有边框的）

<!DOCTYPE html>
<html>
    <head>
        <meat charset="utf-8"/>
        <title>网页标题</title>
        <!--这里使用了CSS为表格加上边框-->
        <style type="text/css">
            table,tr,td{border:1px solid silver;}
        </style>
    </head>

    <body>
        <h1>网页标题1</h1>

        <table>
            <caption>表格标题1</caption>
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
            </tr>
            <tr>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
        </table>

        <h1>网页标题2</h1>

        <table>
            <caption>表格标题2</caption>
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
            </tr>
            <tr>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
        </table>

    </body>
</html>

在这里插入图片描述

002、完整结构

除了上面的基本架构，还有一些其他表格会用到的标签

（1）表标题：

  • 一般来说一个表格只有一个表头，默认情况下，caption标签位于表格的第一行

（2）表头单元格：

  • 单元格其实有两种：
    • 表头单元格：（table header cell，表头单元格）
    • 表行单元格：
  • 两者都是单元格，但是不可以进行互换使用
    • 表头单元格会用“粗体”、“居中”来显示th里的内容，但是td不会
    • 两者的语义不一样，调试不一样
<!DOCTYPE html>
<html>
    <head>
        <meat charset="utf-8"/>
        <title>网页标题</title>
        <!--这里使用了CSS为表格加上边框-->
        <style type="text/css">
            table,tr,td{border:1px solid silver;}
        </style>
    </head>

    <body>
        <h1>网页标题1</h1>
        <table>
            <caption>表格标题1</caption>
            <tr>
                <th>表头单元格01</th>
                <th>表头单元格02</th>
            </tr>
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
            </tr>
            <tr>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
        </table>

        <h1>网页标题2</h1>
        <table>
            <caption>表格标题2</caption>
            <tr>
                <th>表头单元格01</th>
                <th>表头单元格02</th>
            </tr>
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
            </tr>
            <tr>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

003、语义化后完整的表格语法，上述的东西可以直接整合为下面这个code

为了更好语义化，HTML还引入了、、三个标签，使得逻辑更加清晰，调试更加方便，并且方便分块来控制表格的CSS样式

<!DOCTYPE html>
<html>
    <head>
        <meat charset="utf-8"/>
        <title>表格语义化完整语法</title>
        <!--这里使用了CSS为表格加上边框-->
        <style type="text/css">
            table,tr,td{border:1px solid silver;}
        </style>
    </head>

    <body>
        <table>
            <caption>表格标题</caption>
            <!--表头部分-->
            <thead>
                <tr>
                    <th>表头单元格</th>
                    <th>表头单元格</th>
                    <th>表头单元格</th>
                </tr>
            </thead>
            <!--表身部分-->
            <tbody>
                <tr>
                    <td>表行单元格</td>
                    <td>表行单元格</td>
                    <td>表行单元格</td>
                </tr>
                <tr>
                    <td>表行单元格</td>
                    <td>表行单元格</td>
                    <td>表行单元格</td>
                </tr>
                <tr>
                    <td>表行单元格</td>
                    <td>表行单元格</td>
                    <td>表行单元格</td>
                </tr>
            </tbody>
            <!--表脚部分-->
            <tfoot>
                <tr>
                    <td>标准单元格</td>
                    <td>标准单元格</td>
                    <td>标准单元格</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

004、合并属性，即：合并行[rowspan]/合并列：[colspan]

（1）概念

这个类似word的表格合并，rowspan可以将单元格合并

（2）具体语法

<td rowspan=“行数”><td>

（3）具体代码

<!DOCTYPE html>
<html>
    <head>
        <meat charset="utf-8"/>
        <title>表格语义化完整语法</title>
        <!--这里使用了CSS为表格加上边框-->
        <style type="text/css">
            table,tr,td{border:1px solid silver;}
        </style>
    </head>

    <body>
        <table>
            <caption>表格标题</caption>
            <!--表头部分-->
            <thead>
                <tr>
                    <th>表头单元格</th>
                    <th>表头单元格</th>
                    <th>表头单元格</th>
                </tr>
            </thead>
            <!--表身部分-->
            <tbody>
                <tr>
                    <td rowspan="2">表行单元格</td>
                    <td>表行单元格</td>
                    <td>表行单元格</td>
                </tr>
                <tr>
                    <td>表行单元格</td>
                    <td>表行单元格</td>
                </tr>
                <tr>
                    <td colspan="2">表行单元格</td>
                    <td>表行单元格</td>
                </tr>
            </tbody>
            <!--表脚部分-->
            <tfoot>
                <tr>
                    <td>标准单元格</td>
                    <td>标准单元格</td>
                    <td>标准单元格</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

在这里插入图片描述

html 图片点击左边 右边不同效果,css实现点击切换图片效果
weixin_36354924的博客
06-03 1395
我们先来看下效果图：(相关教程：CSS教程)切换前：切换中：切换成功：HTML代码：来自Limou的尝试解读来自Limou的尝试解读12341234Images1Images2Images3Images4Images1Images2Images3Images4Images1Images2Images3Images4Images1Images2Images3Images4我的世界钻石小动物松鼠上古卷...
004+limou+C语言入门知识——（3）数组
limou3434的博客
01-25 177
简单来说：数组是一组相同类型元素的集体。
002+limou+HTML——（2）HTML文档
limou3434的博客
03-08 499
一般来说一个静态网页拥有四种元素：文字、图片、超链接、音频和视频（注意，即使在web网页中植入Javascript语言，也不一定是动态网页，真正的动态网页判断标准：是否和服务器产生交互）
003+limou+HTML——（3）HTML列表
limou3434的博客
03-08 458
列表是网页常见的一种数据排列方式，在HTMl中列表一共有三种：有序列表、无序列表、定义列表
005+limou+HTML——（5）HTML图片和HTML超链接
limou3434的博客
03-08 641
主要讲解了HTML图片和HTML超链接的标签
001+limou+HTML——（1）HTML入门知识
limou3434的博客
03-08 484
本笔记来源于莫振杰的书《从零到一快速上手》，经过修改制成的自学笔记
005+limou+C语言入门知识——（4）操作符
limou3434的博客
02-10 332
操作符的简单概述
006+limou+HTML——（6）HTML表单
limou3434的博客
03-08 250
HTML的表单和表格不一样，表单含有“文本框”、“按钮”、“单选框”、“复选框”、“下拉列表”等
007+limou+HTML——（7）HTML内嵌框架
limou3434的博客
03-08 184
在HTML文档中，可以内嵌一个网页
006+limou+C语言入门知识——（5）指针
limou3434的博客
04-05 647
主要讲解的指针的初阶应用和概念
Flask：阿里云轻量应用服务器+Ubuntu16.04+uWSGI+Nginx+Flask
qq_42533860的博客
05-27 592
Flask：阿里云轻量应用服务器+Ubuntu16.04+uWSGI+Nginx+Flask 简介Flask也被称为 “microframework” ，因为它使用简单的核心，用 extension 增加其他功能。Flask没有默认使用的数据库、窗体验证工具。 文章内容较长,希望可以仔细审阅。此教程亲测有效 一.把服务器公网IP记下来。 #转为root用户以获取权限 sudo su root （1...
写一个实现简单爬虫爬取论文的python代码
02-12
from bs4 import BeautifulSoup # 设置要爬取的网页链接 url = "https://www.example.com/papers" # 发送请求并获取网页内容 response = requests.get(url) html_content = response.content # 使用 ...
websocket connection to ‘ws://127.0.0.1:9000/‘ failed: one or more reserved bits are on: reserved1 =
qq_42533860的博客
12-25 1万+
websocket connection to 'ws://127.0.0.1:9000/' failed: one or more reserved bits are on: reserved1 = 0, reserved2 = 1, reserved3 = 1 python服务端向javascript客户端发送消息后客户端断开连接并触发异常： websocket connection to ‘ws://127.0.0.1:9000/’ failed: one or more reserved bits
CSS点击切换图片
热门推荐
weixin_44567226的博客
07-07 1万+
开发工具与关键技术：Dreamweaver，CSS 作者：李建威 撰写时间：2019年07月07日 由HTML和CSS组成，因为篇幅的原因这里直接上预览图： 切换前 切换中： 切换成功： 图片自行在CSS文件引用 HTML代码： <!doctype html> <html> <head> <meta charset="utf-8"> <...
【css】html里面的图片宽度设为百分比，高度要与宽度一样
smart_dream
11-12 201
外层div的宽度自适应，图片宽度不能固定数值，只能设置百分比。图片高度也不能设置固定数值。如何让图片的高度与图片的宽度一样呢？场景：展示图片列表的时候，原始图片宽高不一致。
使用纯HTML和CSS绘制圣诞树：打造网页中的冬日奇景
zhaoshanshan168的博客
11-09 622
通过简单的代码，您可以在网页上实现一棵带有星星、彩球装饰的圣诞树，为网站增添节日氛围。1. **树结构**：利用CSS的`border`属性绘制不同大小的三角形来组成圣诞树的分层结构。4. **彩球装饰**：在树上添加不同颜色的圆形装饰球，让页面更具节日氛围。### HTML & CSS 实现节日圣诞树：一步步打造你的冬季主题网页。2. **树干**：使用一个小矩形模拟树干，增加圣诞树的稳定感。3. **装饰星星**：用金色字体绘制顶部的星星，吸引眼球。
如何解决“无法在 ‘HTMLElement‘ 上设置 ‘innerText‘ 属性”的问题
菜鸡的博客
11-12 520
类型断言：将元素断言为支持innerText的类型。使用：一个更兼容的文本内容设置方法。类型检查：利用instanceof确保类型正确后再操作。：直接创建并插入文本节点，适合动态内容插入。以上四种方法都可以根据需求选择应用，让代码在操作 DOM 时更加安全、灵活、兼容。希望本文能帮助你更好地掌握 DOM 操作技巧，提高项目开发效率！
使用HTML、CSS和JavaScript创建动态圣诞树
不迁怒，不贰过。小知识，大智慧。
11-10 1092
随着节日的临近，许多人开始装饰他们的家，以迎接温馨的节日气氛。在这个过程中，圣诞树无疑是最具代表性的装饰之一。为了庆祝这一传统，我们可以利用现代网页技术，创建一个动态的圣诞树效果，既美观又富有趣味。本文将介绍如何使用HTML、CSS和JavaScript构建一个互动的圣诞树，结合雪花飘落和闪烁的装饰球，营造出浓厚的节日氛围。通过这个项目，读者不仅能够学习到基本的网页开发技能，还能体验到创造节日氛围的乐趣。让我们一起动手，打造一个充满节日气息的网页吧！
HTML之图片和超链接的学习记录
最新发布
qq_74474809的博客
11-12 482
将位图放大后，图片会失真；在实际开发中，最常见位图的图片格式有三种（可以从图片后缀名看出来）​：.jpg（或.jpeg）​、.png和.gif。.jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。alt属性用于描述图片，这个描述文字是给搜索引擎看的，并且当图片无法显示时，页面会显示alt中的文字。title属性也用于描述图片，不过这个描述文字是给用户看的，并且当鼠标指针移到图片上时，会显示title中的文字。所谓的图片路径，指的就是图片地址，这两个叫法是一样的意思。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

limou3434

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值