html标签总结之表格标签

已于 2022-12-07 10:19:16 修改
阅读量140 收藏
点赞数
分类专栏： web前端 文章标签： html 前端
于 2022-12-05 21:05:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sz1125218970/article/details/128191839
版权

1、表格标签

在这里插入图片描述
表格属性：

  • border ： 表格边框 写在table标签里面，数值代表边框像素

  • cellpadding ： 单元格内的空间 写在table标签里面，数值代表空间像素

  • cellspacing ： 单元格之间的空间 写在table标签里面，数值代表空间像素

  • rowspan ： 合并行 【具体见下面总结，span v. 贯穿；包括】

  • colspan ： 合并列

  • align ： 左右对齐方式（right、left、center）

  • 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表标签</title>
</head>
<body>
    <table>
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>时间</th>
                <th>天气</th>
                <th>出行建议</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2022-1-2</td>
                <td><img src="./大雪.png" width=30 height="30"></td>
                <td>注意防寒</td>
            </tr>
            <tr>
                <td>2022-1-3</td>
                <td><img src="./小雨.png" width=30 height="30"></td>
                <td>注意带伞</td>
            </tr>
            <tr>
                <td>2022-1-4</td>
                <td><img src="./烈日.png" width=30 height="30"></td>
                <td>注意防嗮</td>
            </tr>
        </tBody>
        <tFood>
            <tr>
                <td>表格页脚</td>
                <td>表格页脚</td>
                <td>表格页脚</td>
            </tr>
        </tFood>
    </table>
</body>
</html>
  • 结果展示
    在这里插入图片描述

2、表格练习

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签练习</title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="5" align="center">
        <tHead><!--语义化标签-->
            <tr bgcolor="#F4F8F4">
                <th align="center" width="140">班级名称</th>
                <th align="center" width="140">科目</th>
                <th align="center" width="140">授课内容</th>
                <th align="center" width="140">增值服务</th>
                <th align="center" width="70">课时</th>
                <th align="center" width="100">价格</th>
                <th align="center" width="140">试听</th>
                <th align="center" width="140">购买</th>
            </tr>
        </tHead>
        <tBody><!--语义化标签-->
            <tr>
                <td align="center" rowspan="3"><strong>真题精解班</strong></td>
                <td align="center">行测+申论</td>
                <td align="center">全科历年真题精解</td>
                <td align="center" rowspan="3">课后赠2套模拟卷24小时以内答疑</td>
                <td align="center">48</td>
                <td align="center"><font color="red">1280元</font></td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
            <tr>
                <!-- <td>真题精解班</td> -->
                <td align="center">行测</td>
                <td align="center">行测历年真题精解</td>
                <!-- <td>课后赠2套模拟卷24小时以内答疑</td> -->
                <td align="center">32</td>
                <td align="center">980元</td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
            <tr>
                <!-- <td>真题精解班</td> -->
                <td align="center">申论</td>
                <td align="center">申论历年真题精解</td>
                <!-- <td>课后赠2套模拟卷24小时以内答疑</td> -->
                <td align="center">16</td>
                <td align="center" color='red'>580元</td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
            <!--高分技巧班-->
            <tr>
                <td align="center" rowspan="3"><strong>高分技巧班</strong></td>
                <td align="center">行测+申论</td>
                <td align="center">全科技巧强化</td>
                <td align="center" rowspan="3">入学试卷测评24小时以内答疑</td>
                <td align="center">32</td>
                <td align="center"><font color="red">980元</font></td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
            <tr>
                <!-- <td>高分技巧班</td> -->
                <td align="center">行测</td>
                <td align="center">行测速解技巧强化</td>
                <!-- <td>入学试卷测评24小时以内答疑</td> -->
                <td align="center">18</td>
                <td align="center">680元</td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
            <tr>
                <!-- <td>高分技巧班</td> -->
                <td align="center">申论</td>
                <td align="center">申论速解技巧强化</td>
                <!-- <td>入学试卷测评24小时以内答疑</td> -->
                <td align="center">14</td>
                <td align="center">580元</td>
                <td align="center"><img src="./试听.png" width="30" height="30"></td>
                <td align="center"><img src="./购物.png" width="30" height="30"></td>
            </tr>
        </tBody>
    </table>
</body>
</html>

  • 结果展示
    在这里插入图片描述

  • 总结：

    • 写表格很难理解的是合并行和列，简单的方法是，先写出没有合并之前的样子，然后再写要合并的，同时删掉被合并的语句。
疋瓞
关注
专栏目录
HTML的表格标签
qianniao_yingmo的博客
03-30 3318
表格标签需要知道的的基础知识
HTML之表格相关标签总结
IT_Helianthus的博客
05-17 1862
一、概述 HTML表格由table标签以及一个或多个tr、th或td标签组成：table标签用来定义表格；tr标签用来定义表格中的行，它是单元格的容器，每行可以包含多个单元格；td标签和th标签用来定义单元格，所有单元格都在tr标签内，具体的表格内容放置在一对td标签或th标签之中，其语法如下： <table> <tr> <th>第1行第...
HTML表格标签
weixin_52629158的博客
10-23 2195
HTML表格标签
HTML之表格标签
hmh520i的博客
12-19 2733
前端学习日记
html 查看excel表格,html展示excel表格数据-html读取本地excel文件并展示
weixin_28976057的博客
06-28 4485
怎么用html实现excel表格首先html不能读取本地excel文件其次就算是javascript 也是不允许的这是为了安全考虑如果前端脚本可以读取本地文件 那很不安全如何将excel上的数据表以html的格式在新建演示文稿...Apache poi 和jxl 都可以jxl是一个韩国java操作excel的工具, 在java的开源世界中，套比较有影响的API可供使用，一个是POI，一个是jExc...
HTML总结【表格标签和表单标签】
Jiayou9933的博客
03-30 2206
HTML中table标签和form标签属性、子标签介绍
html表格标题行边框,总结HTML 表格标签
weixin_32179097的博客
06-14 1316
一、概述HTML表格由table标签以及一个或多个tr、th或td标签组成：table标签用来定义表格；tr标签用来定义表格中的行，它是单元格的容器，每行可以包含多个单元格；td标签和th标签用来定义单元格，所有单元格都在tr标签内，具体的表格内容放置在一对td标签或th标签之中。二、table 标签1)border 设置 table 的边框宽度；border 取值为空字符串或 "1", 若为 "...
HTML之⑦表格标签的使用总结
笔岸柳影
02-03 605
HTML之⑦表格标签的使用总结 QQ:3020889729 小蔡表格标签的使用骨架表格展示骨架标签组成关于我所说的关系的定义_table标签（父标签）_thead标签(结构标签——规定表头区域...
HTML5 表格标签的使用总结
JakeMa1024的博客
06-02 623
表格 表格现在还是比较常用的一种标签, 但不是用来布局的，常用来处理, 显示表格式数据 创建表格 在HTML网页中 要想创建表格 就需要使用表格相关的标签 创建表格的基本语法如下 <table> <tr> <td>单元格内的文字</td> ...... </tr> ...... </table> 在上面的语法中包含三队HTML 标签 分别为 <table></table> <tr>&
HTML标签总结
07-27
### HTML标签总结 #### <a>: 锚点标签 - **功能**：定义超链接，用于从一个页面链接到另一个页面或同一页面内的不同位置。 - **属性**： - `href`：指定链接的目标地址。 - `target`：指定在哪个窗口或框架打开...
HTML基础重点_一般标签、常用标签和表格
09-28
总结起来，HTML的基础标签和表格的使用是构建网页的基本技能。理解并熟练掌握这些元素，可以帮助开发者有效地组织和展示网页内容，提供良好的用户体验。在实际开发中，还需要结合CSS和JavaScript等技术，以实现更...
html中常用的标签总结(必看)
12-14
5. **表格标签**： - `<table>`定义一个表格，`<tbody>`用于包裹表格主体内容。 - `<tr>`表示表格行，`<th>`定义表头单元格，`<td>`定义普通数据单元格。 这些标签只是HTML中的一部分，完整的HTML标签集远比这...
HTML标签总结，包含HTML4和HTML5
12-31
HTML标签总结，包含HTML4和HTML5 HTML标签是构建网页的基础，它们定义了网页的结构和内容。在HTML中，有许多不同的标签，每个标签都有其特定的功能和用途。本文总结了HTML4和HTML5中的常用标签，涵盖了基本结构标签...
HTML 与 ES6 是前端开发的两大核心技术
qq_25416827的博客
10-02 913
HTML：主要负责页面的结构、语义化、布局和多媒体处理。ES6：提高了 JavaScript 的开发效率和可读性，尤其是模块化、异步编程和数据处理方式的革。
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 950
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
复习HTML(基础）
m0_74124657的博客
10-01 1206
目录HTML含义 HTML作用HTML的常用元素元素的特点元素的分类1 是否嵌套关系2 是否独占一行块元素：独占一行 行内元素：共享一行 行内元素与块级元素的转换3是否有结束标签 常用标签1 标题标签：有六级 我们用h1 ~h6 表示2 段落标签：内容3 图像标签:< img src=" 图片路径" > 是为了添加图片使用的4 视频标签： 添加视频使用5 列表5.1 无序列表5.2 有序列表6 超链接 ： 内容 1 访问同目录下的网页2 访问外部 网页3 访问本地网页7 标签 ， 8 表
XHTML 简介
最新发布
wjs2024的博客
10-04 421
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
关于HTML 案例_个人简历展示02
Dingyuan0的博客
09-29 1323
展示效果 用table进行布局 label 标签进行关联 例如：点姓名就可以到text中去填写内容 input的使用 text 文本框 select与option 选择框 checkbox 复选框 textarea ul与li 无序列表 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte
2022年HTML表格标签详解及实例
2022年HTML相关知识点表格标签讲解深入解析 在HTML中，表格是网页设计的重要组成部分，用于展示数据和结构化信息。《网页样式制作》课程的数字媒体专业群教学资源库提供了关于表格标签的详细讲解，以便于学习者掌握...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值