HTML5(八)结构标签、列格式化标签、合并表格

最新推荐文章于 2024-07-05 22:38:16 发布
最新推荐文章于 2024-07-05 22:38:16 发布
阅读量3k 收藏 2
点赞数
分类专栏： Mars-HTML 文章标签： 结构 标签 格式化 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013225534/article/details/52081017
版权

表格系列标签当中包含有三个表示表格结构的标签，分别是thead表示表格的头部，tfoot用来表格表格的注脚，tbody用来表示表格的身体。
例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TABLE02</title>
</head>
<body>
    <!-- 给表格添加边框-->
    <table border="1">
    <!-- table head-->
        <thead>
            <!-- 列名 -->
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
        </thead>
        <!-- table foot-->
        <tfoot>
            <tr>
                <td>平均</td>
                <td>70</td>
                <td>80</td>
            </tr>
        </tfoot>
        <!-- table body-->
        <tbody>
            <tr>
                <td>张三</td>
                <td>60</td>
                <td>70</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>80</td>
                <td>90</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

这里写图片描述

列格式化标签的作用是可以将一个表格当中的列进行分组，同时还可以对这些类进行格式上的设置，比如说设置背景颜色、对齐方式和字体等等

列格式化标签一共有两个，分别是col和colgroup标签，前者是后者的子标签。colgroup标签用于将表格当中的列分组，并为不同的组指定不同的样式

<body>
    <!-- 给表格添加边框-->
    <table border="1">
        <!--colgroup标签用于将表格当中的列分组，并为不同的组指定不同的样式 ,将三列分成1份和两份、一份红色，两份是绿色-->

        <!-- 
        <colgroup style="background:red"></colgroup>
        <colgroup span="2" style="background:green"></colgroup>
        -->

        <!-- 如果不用span="2" 可以使用<col><col/>-->
        <colgroup style="background:red"></colgroup>
        <colgroup style="background:green">
            <col></col>
            <col></col>
        </colgroup>
        <!-- table head-->
        <thead>
            <!-- 列名 -->
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
        </thead>
        <!-- table foot-->
        <tfoot>
            <tr>
                <td>平均</td>
                <td>70</td>
                <td>80</td>
            </tr>
        </tfoot>
        <!-- table body-->
        <tbody>
            <tr>
                <td>张三</td>
                <td>60</td>
                <td>70</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>80</td>
                <td>90</td>
            </tr>
        </tbody>
    </table>
</body>

这里写图片描述

合并单元格
这里写图片描述

<tfoot>
            <tr>
                <td>平均</td>
                <td>70</td>
                <td>80</td>
            </tr>
            <tr>
                <td>总平均分</td>
                <td colspan="2">80</td>
            </tr>
</tfoot>

这里写图片描述

合并列 80

<tfoot>
            <tr>
                <td>平均</td>
                <td>70</td>
                <td rowspan="2">80</td>
            </tr>
            <tr>
                <td>总平均分</td>
                <td colspan="2">80</td>
            </tr>
        </tfoot>

这里写图片描述

阳光西西
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈Html网页表格结构化标记的应用
12-13
5. **直列化格式（Column Formatting）**：HTML还提供了`<colgroup>`和`<col>`标签来定义表格列的样式，如背景色、对齐方式等。例如： ```html ;"> ``` 这样可以为一列设置特定的样式，使其在整个列中保持...
【HTML】表单标签，表单的格式化
林伊的博客
12-08 1098
表单标签 表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。 <form></form>是表单标签 <input type=“text”>是单行文本框，value这是默认显示内容； <input type=“password”>是密码文本框，value这是默认显示内容； <input type=“radio”>是单选框，name属性可以对其进行分组，在一个组内才能保证只能选一个，checkde=“chec
前端学习4：HTML文本格式化
RainstormGod的博客
04-06 2110
和标签都是实现斜体效果。这是倾斜字体
HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
最新发布
朝阳39的博客
07-05 766
html 中的表格<table>由行<tr>组成，每行由单元格<td>组成。所以表格是由行组成（行由列组成），而不是由行和列组成。table 标签，属于块级元素。
每日知识总结
m0_73801853的博客
09-19 307
thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载，或通过改变结构顺序，优先加载tbody。每个表格均有若干行（由`tr`标签定义），每行被分割为若干单元格（由`td `标签定义）。**注意**：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。现在，用于显示、展示数据。CSS中的注释以"注释以`/*`开头，以`*/`结尾,开始和结束中间为注释内容。- 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型。
Web前端学习：HTML基础【入门宝典】
Oh_Python的博客
03-11 7271
一、HTML简介 什么是HTML？ HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言。 1、HTML的特点 （1）HTML不是编程语言，而是标记语言。 （2）HTML使用标签的形式来标识网页的不同组成部分 （3）HTML文档包含了HTML标签和文本 （4）HTML文档又叫做Web页面 （5）HTML文档的后缀：html 或 htm 2、HTML元素语法 （1）HTML 元素以开始标签起始 （2）HTML 元素以结束标签终止
html4
qq_42919799的博客
02-19 302
html4 注意： 所有的标签都是由"<>"包裹 元素内容存在于开始标签和结束标签中间的 br标签属于单标签，建议直接在使用时写为 <br/> 标签 标题 h1~h6 hr ：定义水平线，也可以用于分隔内容 用于html的注释 段落 p br : 用于换行 链接 a 普通的链接：<a href="http://www.example.com/">链接文本</a> 图像链接： <a href="http://www.example.co
11个HTML文件的家乡介绍表格格式数据填充.zip
12-29
在HTML中，表格可以进行更复杂的格式化，如合并单元格（使用`colspan`和`rowspan`属性）、添加边框（通过CSS控制）、设定背景色等。此外，`<caption>`标签可以用来添加表格标题，`<thead>`、`<tbody>`和`<tfoot>`则...
HTML5知识点思维导图(手工整理）
10-16
5. **文本格式化**：`<strong>`用于加粗文本，``用于斜体表示强调，`<ins>`用于下划线，`<del>`表示删除线。 6. **图像<em>标签**：`<img>`插入图像，`src`属性指定图像路径，`alt`提供替代文本，`title`用于鼠标...
HTML5+CSS3网页设计-第二章 列表表格与媒体元素.pptx
12-21
表格可以跨行（`colspan`属性）和跨列（`rowspan`属性），通过设置这两个属性可以实现单元格的合并，以适应复杂的数据布局。 **媒体元素(Media Elements)** HTML5引入了新的媒体元素`<audio>`和`<video>`，使得在...
前端HTML标签思维导图总结
10-30
6. **文本格式化标签**： - `<b>` 和 `<i>` 分别用于加粗和斜体文本。 - `` 和 `<strong>` 更加语义化，分别表示强调和重要的文本。 7. **盒子模型<em>标签**： - `<div>` 是一个通用容器，用于组织和布局页面...
七、HTML 文本格式化
All_are_vanity的博客
01-02 1978
此例演示如何在一个 HTML 文件中对文本进行格式化。此例演示如何使用 pre 标签对空行和空格进行控制。此例演示不同的"计算机输出"标签的显示效果。此例演示如何在 HTML 文件中写地址。此例演示如何标记删除文本和插入文本。此例演示如何实现缩写或首字母缩写。此例演示如何实现长短不一的引用语。此例演示如何改变文字的方向。这是 下标 和 上标。
【HTML 学习笔记】HTML 教程--文本格式化
ffffffeiyu的博客
02-28 546
HTML 文本格式化：文本格式化、预格式文本、“计算机输出”标签、地址、缩写和首字母缩写、文字方向、块引用、删除字效果和添加字效果
html中table和format,格式化HTML表格單元格，使Excel格式為文本?
weixin_42561464的博客
06-17 383
I am creating an HTML table that will be opened as a spreadsheet in Excel. What HTML tag or CSS style can I use to "tell" Excel to display the cell's contents as text?我正在創建一個HTML表，它將在Excel中作為電子表格打開。我可...
HTML5中 HTML格式化／HTML样式／链表／表格－样式 韩俊强的博客
weixin_33796177的博客
08-30 204
HTML5学习从简单到复杂，循环渐进！ 每日更新关注:http://weibo.com/hanjunqiang 新浪微博！ 1.HTML格式化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
html--表格
qq_45823118的博客
03-17 1349
html--表格1.表格的基本构成1.1任务描述1.2相关知识代码文件2.表格的属性——宽、高2.1任务描述2.2 相关知识代码文件3.表格的属性——cellpadding3.1任务描述3.2相关知识代码文件表格的属性——cellspacing任务描述相关知识代码文件 1.表格的基本构成 1.1任务描述 本关任务：创建你的第一个表格，它的边框宽度为5px，内容和效果图展示的一样。 实现的效果如下： 1.2相关知识 大家都知道，表格由行和列组成，这里我们就用HTML标签写一个表格。 <table&gt
HTML学习之路-文本格式化
2301_76977793的博客
04-27 695
HTML是一种用于创建网页的标记语言，它允许开发人员将文本、图像、表格、音频和视频等多种媒体类型组合在一起并以可交互的方式呈现给用户。HTML文本格式化是指将文本内容进行排版，以便更好地显示和阅读。在这篇文章中，我会详细介绍HTML文本格式化，并提供一些学习路线和技巧来帮助你更好地学习。
零基础html学习-第五期
GUIDM的博客
09-08 1305
表格&& svg
【HTML】HTML 表格 ③ ( 合并单元格 | 跨行合并 | 跨列合并 | 单元格合并顺序 | 跨行设置 rowspan 属性 | 跨列设置 colspan 属性 )
热门推荐
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-10 3万+
一、合并单元格、 1、合并单元格方式、 2、合并单元格顺序、 3、合并单元格流程、 二、合并单元格示例、 1、原始表格、 2、跨行合并单元格、 3、跨列合并单元格、
HTML学习：合并单元格与表格基础
在HTML文档中，使用不同的标签来定义和格式化内容。例如，`<H1>`用于创建一级标题，`<TABLE>`用于创建表格，`<CAPTION>`用于添加表格标题，`<TD>`代表表格数据单元格，而`<TH>`则用于创建表头单元格。 此外，HTML还...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值