表格的介绍与实战(详细且有案例)

目录​​​​​​​​​​​​​​

表格的主要作用:

表格的基本语法:

表格相关的标签

合并单元格:

实战:


  • 表格的主要作用:

表格主要是用来展示数据的,使用表格来展示数据,数据可读性更好,更加规范

  • 表格的基本语法:

<table>
 <tr>
 <td>单元格内的文字</td>
 ...
 </tr>
 ...
</table>

1. <table> </table> 是用于定义表格的标签。
2. <tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中。
3. <td> </td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
4. 字母 td 指表格数据(table data),即数据单元格的内容。

 

  • 表格相关的标签
table表示这是一个表格
th表示表头,里面的文字会剧中加粗
tr表示表格中的一行
td表示表格中的一个单元格(类似于数据库中的一个数据),这是一个容器,里面可以填入任意标签(a标签,p标签)

  • 表格相关的属性

表格标签这部分属性我们实际开发我们不常用,后面通过 CSS 来设置.
目的有2个: 
1. 记住这些英语单词,后面 CSS 会使用.
2. 直观感受表格的外观形态

  • 合并单元格:

合并单元格三步曲:
1. 先确定是跨行还是跨列合并。
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如:<td colspan=“2”></td>。
3. 删除多余的单元格。
 

  • 实战:

案例1: 

<!DOCTYPE html>
<html lang="zh_cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" align="center" whith="800px" height="250px" cellpadding="20px" cellspacing="0px"><thead><tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr></thead><tbody><tr><td>1</td><td>鬼吹灯</td><td><img src="./down.jpg"></td><td>354</td><td>124</td><td><span><a href="#">贴吧</a></span><span><a href="#">贴吧</a></span><span><a href="#">贴吧</a></span></td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="./down.jpg"></td><td>354</td><td>124</td><td><span><a href="#">贴吧</a></span><span><a href="#">贴吧</a></span><span><a href="#">贴吧</a></span></td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="./down.jpg"></td><td>354</td><td>124</td><td><span><a href="#">贴吧</a></span><span><a href="#">贴吧</a></span><span><a href="#">贴吧</a></span></td></tr></tbody></table>
</body></html>

案例2:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div align="center"><h3 >课程表</h3><table border="1" cellpadding="10px"><tr><th>项目</th><th colspan="5">上课</th><th colspan="2">休息</th></tr><tr><td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr><tr><td rowspan="4">上午</td><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><td rowspan="4">休息</td></tr><tr><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></tr><tr><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 rowspan="2">休息</td>
</tr>
<tr><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td>
</tr>
</table>
</div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/212230.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

202301209将RK3399的挖掘机开发板在Android10下设置系统默认为24小时制

202301209将RK3399的挖掘机开发板在Android10下设置系统默认为24小时制 2023/12/9 22:07 应该也可以适用于RK3399的Android12系统 --- a/frameworks/base/packages/SettingsProvider/res/values/defaults.xml b/frameworks/base/packages/SettingsProvider/res/values/default…

一文搞懂Lombok Plugins使用与原理

目录 一文搞懂Lombok使用与原理 1.前言2.什么是Lombok3. IntelliJ安装Lombok3.1通过IntelliJ的插件中心安装3.2在项目中使用Lombok Plugins 4.Lombok 注解大全说明4.1POJO类常用注解4.2其他注解 5.Lombok常见问题6.总结7.参考 文章所属专区 超链接 1.前言 2.什么是Lombok Lo…

产品创新受赞誉,怿星荣获2023未来汽车(电子和软件)创新创业大赛一等奖

2023未来汽车&#xff08;电子和软件&#xff09;创新创业大赛 11月29日&#xff0c;上海临港&#xff0c;由中国汽车工程学会和中国&#xff08;上海&#xff09;自由贸易试验区临港新片区管理委员会联合举办的“2023未来汽车&#xff08;电子和软件&#xff09;创新创业大赛…

二叉搜索树中第K小的元素[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个二叉搜索树的根节点root&#xff0c;和一个整数k&#xff0c;请你设计一个算法查找其中第k个最小元素&#xff08;从1开始计数&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,1,4,null,2], k 1 输出&#x…

RHEL8_Linux硬盘管理

主要介绍Linux磁盘管理 了解分区的概念对硬盘进行分区常见的分区swap分区的管理 1.了解分区的概念 1&#xff09;新的硬盘首先需要对其进行分区和格式化&#xff0c;下面来了解以下硬盘的结构&#xff0c;如图。 2&#xff09;硬盘的磁盘上有一个个圈&#xff0c;每两个圈组…

JVM虚拟机系统性学习-类加载子系统

类加载子系统 类加载的时机 类加载的时机主要有 4 个&#xff1a; 遇到 new、getstatic、putstatic、invokestatic 这四条字节码指令时&#xff0c;如果对应的类没有初始化&#xff0c;则要先进行初始化 new 关键字创建对象时读取或设置一个类型的静态字段时&#xff08;被 …

javaSwing酒店管理系统

一、 使用方法&#xff1a; 在使用前&#xff0c;需要到druid.properties 配置文件中&#xff0c;修改自己对应于自己数据库的属性&#xff1b;如用户名&#xff0c;密码等 driverClassNamecom.mysql.cj.jdbc.Driver urljdbc:mysql:///hotel?useUnicodetrue&characterEn…

midwayjs从零开始创建项目,连接mikro-orm框架(必须有java的springboot基础)

前言&#xff1a; 我一直都是用java的springboot开发项目&#xff0c;然后进来新公司之后&#xff0c;公司的后端是用node.js&#xff0c;然后框架用的是 midwayjs &#xff0c;然后网上的资料比较少&#xff0c;在此特地记录一波 文档&#xff1a; 1.官方文档&#xff1a;介绍…

Spring Boot 3.0 : 集成flyway数据库版本控制工具

目录 Spring Boot 3.0 : 集成flyway数据库版本控制工具flyway是什么为什么使用flyway主要特性支持的数据库&#xff1a; flyway如何使用spring boot 集成实现引入依赖配置sql版本控制约定3种版本类型 运行SpringFlyway 8.2.1及以后版本不再支持MySQL&#xff1f; 个人主页: 【⭐…

常见web漏洞的流量分析

常见web漏洞的流量分析 文章目录 常见web漏洞的流量分析工具sql注入的流量分析XSS注入的流量分析文件上传漏洞流量分析文件包含漏洞流量分析文件读取漏洞流量分析ssrf流量分析shiro反序列化流量分析jwt流量分析暴力破解流量分析命令执行流量分析反弹shell 工具 攻击机受害机wi…

Unity DOTS中的baking(一) Baker简介

Unity DOTS中的baking&#xff08;一&#xff09; Baker简介 baking是DOTS ECS工作流的一环&#xff0c;大概的意思就是将原先Editor下的GameObject数据&#xff0c;全部转换为Entity数据的过程。baking是一个不可逆的过程&#xff0c;原先的GameObject在运行时不复存在&#x…

leetcode 股票DP系列 总结篇

121. 买卖股票的最佳时机 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。 只能进行一次交易 很简单&#xff0c;只需边遍历边记录最小值即可。 class Solution { public:int maxProfit(vector<int>& prices) {int res …

【git】关于git二三事

文章目录 前言一、创建版本库1.通过命令 git init 把这个目录变成git可以管理的仓库2.将修改的内容添加到版本库2.1 git add .2.2 git commit -m "Xxxx"2.3 git status 2.4 git diff readme.txt3.版本回退3.1 git log3.2 git reset --hard HEAD^ 二、理解工作区与暂存…

操作系统内部机制学习

切换线程时需要保存什么 函数需要保存吗&#xff1f;函数在Flash上&#xff0c;不会被破坏&#xff0c;无需保存。函数执行到了哪里&#xff1f;需要保存吗&#xff1f;需要保存。全局变量需要保存吗&#xff1f;全局变量在内存上&#xff0c;无需保存。局部变量需要保存吗&am…

Leetcode—337.打家劫舍III【中等】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—337.打家劫舍III 算法思想 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(null…

I.MX6ULL_Linux_驱动篇(46)linux LCD驱动

LCD 是很常用的一个外设&#xff0c;在Linux 下LCD 的使用更加广泛&#xff0c;在搭配 QT 这样的 GUI 库下可以制作出非常精美的 UI 界面。本章我们就来学习一下如何在 Linux 下驱动 LCD 屏幕。 Linux 下 LCD 驱动简析 Framebuffer 设备 先来回顾一下裸机的时候 LCD 驱动是怎…

前端入门:HTML初级指南,网页的简单实现!

代码部分&#xff1a; <!DOCTYPE html> <!-- 上方为DOCTYPE声明&#xff0c;指定文档类型为HTML --> <html lang"en"> <!-- html标签为整个页面的根元素 --> <head> <!-- title标签用于定义文档标题 --> <title>初始HT…

单点登录方案调研与实现

作用 在一个系统登录后&#xff0c;其他系统也能共享该登录状态&#xff0c;无需重新登录。 演进 cookie → session → token →单点登录 Cookie 可以实现浏览器和服务器状态的记录&#xff0c;但Cookie会出现存储体积过大和可以在前后端修改的问题 Session 为了解决Co…

UVM建造测试用例

&#xff08;1&#xff09;加入base_test 在一个实际应用的UVM验证平台中&#xff0c;my_env并不是树根&#xff0c;通常来说&#xff0c;树根是一个基于uvm_test派生的类。真正的测试用例都是基于base_test派生的一个类。 class base_test extends uvm_test;my_env e…

14-2(C++11)类型推导、类型计算

14-2&#xff08;C11&#xff09;类型推导、类型计算 类型推导auto关键字auto类型推断本质auto与引用 联用auto关键字的使用限制 类型计算类型计算分类与类型推导相比四种类型计算的规则返回值后置 类型推导 auto关键字 C98中&#xff0c;auto表示栈变量&#xff0c;通常省略…