HTML中表格的语法及使用(详解)

Hi i,m JinXiang


⭐ 前言 ⭐

本篇文章主要介绍HTML中表格的语法及详细使用以及部分理论知识


🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获,友友们有任何问题可以在评论区留言 


目录

⭐什么是表格?

⭐表格的作用:

⭐表格的使用:

1、表格的语法

2、 结果展示:

3、表格的样式

⭐使用表格时的注意事项:


⭐什么是表格?

表格是一种用行和列组织和展示数据的方式。它通常用于呈现数字或文字数据,例如价格表、时间表、成绩单、产品列表等。表格通常由水平的行和垂直的列构成,其中每个交叉点称为单元格。表格可以使用各种格式和样式进行美化和自定义,使其更易于理解和阅读。

⭐表格的作用:

表格可以担任以下作用:

1. 数据呈现:表格是呈现大量数据的有效方式,可以更清楚地展示复杂数据的变化和关系。

2. 信息组织:表格可以使数据更加有条理和易于理解。通过使用表格,可以快速扫描数据并找到所需信息。

3. 简化计算:表格可以自动进行简单或复杂的计算,比手动计算更快且更准确,能够节省时间和减少错误。

4. 数据比较:通过将不同数据置于同一张表格中,可以更容易地进行比较和分析。

5. 决策支持:表格可以为决策提供支持,因为它可以清晰地呈现数据,帮助做出更明智的决策。

综上所述,表格是一种非常有用的工具,可以帮助人们更好地理解和处理信息。

⭐表格的使用:

1、表格的语法
<table border="5" style="text-align: center"><tr><td>课程编号</td><td>课程名称</td></tr><tr><td>1</td><td>Java</td></tr><tr><td>2</td><td>Python</td></tr></table>
2、 结果展示:

3、表格的样式
  • 水平左对齐:style="text-align: left"
  • 水平居中:style="text-align: center"
  • 水平右对齐:style="text-align: right" 
  • 垂直顶端:style="vertical-align: top"
  • 垂直居中:style="vertical-align: middle" 
  • 垂直底部:style="vertical-align: bottom"
  • 垂直基线:style="vertical-align: baseline"                                                                              
  • 合并单元格:rowspan(行与行合并) colspan(列与列合并)
  • 行合并:<td rowspan="值">数据</td>
  • 列合并:<td colspan="值">数据</td>

⭐使用表格时的注意事项:

1、使用语义化的标签:在HTML中使用表格时,应该使用`<table>`、`<thead>`、`<tbody>`、`<tfoot>`、`<tr>`、`<th>`和`<td>`等语义化标签,这样可以使代码更具可读性,同时也有助于屏幕阅读器等辅助技术的正确解析。

2、避免使用表格布局:表格经常被用来进行网页布局,但是这种方式已经过时了。现代网页布局使用CSS的弹性布局、网格布局等方法。表格仅应用于显示表格数据,而不是用于布局。

3、避免使用空单元格:如果一个单元格没有内容,应该使用`&nbsp;`来填充,而不要使用空单元格,因为空单元格可能会导致可访问性问题。

4、使用表头标签:对于每个表格,应该使用`<th>`标签来定义表头。这样可以使屏幕阅读器和搜索引擎更好地理解表格的结构。

5、使用CSS来样式化表格:应该使用CSS来为表格添加样式,而不要直接在HTML中使用样式。这样可以使代码更加简洁,也有助于维护和修改。

总结不易,希望uu们不要吝啬亲爱的👍哟(^U^)ノ~YO!!如有问题,欢迎评论区批评指正😁

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

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

相关文章

Java集合框架定义以及整体结构

目录 一、Java集合框架1.1 什么是java集合框架1.2 集合与数组 二、集合框架具体内容2.1 整体框架2.2 遗留类和遗留接口1.3 集合框架设计特点 参考资料 一、Java集合框架 1.1 什么是java集合框架 Java集合框架&#xff08;Java Collections Framework&#xff09;是Java平台提…

高云GW1NSR-4C开发板上手使用

1.开发板 核心板&#xff0c;主芯片GW1NSR-LV4CQN48P&#xff0c;丝印文字“奥陶纪Octet&#xff0c;QQ群808770961”&#xff1a; 晶振&#xff1a;27MHz&#xff0c;22引脚 两个按键&#xff1a;靠近中间&#xff0c;23引脚&#xff0c;按下为低电平&#xff1b;靠近外侧&…

Flink 读写 HBase 总结

前言 总结 Flink 读写 HBase 版本 Flink 1.15.4HBase 2.0.2Hudi 0.13.0官方文档 https://nightlies.apache.org/flink/flink-docs-release-1.17/zh/docs/connectors/table/hbase/ Jar包 https://repo1.maven.org/maven2/org/apache/flink/flink-sql-connector-hbase-2.2/1…

[Linux] yum安装分布式LNMP架构

1. 在一台主机安装nginx&#xff08;192.168.136.120&#xff09; 1.1 搭建nginx相关的yum源 cd /yum.repos.d mkdir bak mv *.repo bak vim /etc/yum.repos.d/nginx.repo [nginx-stable] namenginx stable repo baseurlhttp://nginx.org/packages/centos/7/$basearch/ gpgche…

基于Python+Django+mysql图书管理系统

基于PythonDjangomysql图书管理系统 一、系统介绍二、功能展示三、其它系统四、获取源码 一、系统介绍 程序开发软件&#xff1a;Pycharm 数据库&#xff1a;mysql 采用技术&#xff1a; Django(一个MVT框架&#xff0c;类似Java的SSM框架) 人生苦短&#xff0c;我用Python&a…

【rabbitMQ】rabbitMQ的下载,安装与配置

目录 1. 下载Erland 安装步骤&#xff1a; 配置环境变量&#xff1a; 校验环境变量配置是否成功 2.下载MQ 安装步骤&#xff1a; 添加可视化插件 &#xff1a; 启动&#xff1a; 拒绝访问 1. 下载Erland 因为rabbitMQ是基于Erland,所以在安装rabbitMQ之前需要安装Erla…

WPF(Windows Presentation Foundation)的 ToolBar控件

WPF&#xff08;Windows Presentation Foundation&#xff09;的 ToolBar 是一种用于创建工具栏的控件。 工具栏通常位于应用程序窗口的顶部或侧边&#xff0c;并提供了一组常用的工具按钮或命令&#xff0c;用于执行特定的操作或访问特定的功能。 ToolBar 控件是 WPF 中的一个…

【基于NLP的微博情感分析:从数据爬取到情感洞察】

基于NLP的微博情感分析&#xff1a;从数据爬取到情感洞察 背景数据集技术选型功能实现创新点 今天我将分享一个基于NLP的微博情感分析项目&#xff0c;通过Python技术、NLP模型和Flask框架&#xff0c;对微博数据进行清洗、分词、可视化&#xff0c;并利用NLP和贝叶斯进行情感分…

VoxPoser:使用语言模型进行机器人操作的可组合 3D 值图

语言是一种压缩媒介&#xff0c;人们通过它来提炼和传达他们对世界的知识和经验。大型语言模型&#xff08;LLMs&#xff09;已成为一种有前景的方法&#xff0c;通过将世界投影到语言空间中来捕捉这种抽象。虽然这些模型被认为在文本形式中内化了可概括的知识&#xff0c;但如…

Vulnhub-DC-6 靶机复现完整过程

一、搭建环境 kali充当攻击机 ip地址是&#xff1a;192.168.200.14 DC-6充当靶机 &#xff1a; IP地址暂时未知 注意&#xff1a;让两台机器的使用同一种网络适配器 二、信息收集 1.探索同网段存活的主机、 ①第一种方法 arp-scan -l②第二种方法 netdiscover -i eth0 -…

前端知识笔记(二)———Django与Ajax

特点&#xff1a; 异步提交 局部刷新 例子&#xff1a;github注册 动态获取用户名实时的跟后端确认并实时的展示到前端&#xff08;局部刷新&#xff09; 朝后端发送请求的方式 1.浏览器地址栏直接输入url回车 -----》get请求 2.a标签的href属性 -----》get请求 3…

Python ipaddress模块介绍

目录 创建 Address/Network/Interface 对象 关于IP版本的说明 IP主机地址 定义网络 主机接口 审查 Address/Network/Interface 对象 Network 作为 Address 列表 比较运算 将IP地址与其他模块一起使用 实例创建失败时获取更多详细信息 概述 本文档旨在简要介绍 ipaddr…

【大数据-Hadoop】从入门到源码编译-概念篇

【大数据-Hadoop】从入门到源码编译-概念篇 Hadoop与大数据生态&#xff08;一&#xff09;Hadoop是什么&#xff1f;&#xff08;二&#xff09;Hadoop组成1. HDFS1.1 NameNode&#xff08;nn&#xff09;1.2 DataNode&#xff08;dn&#xff09;1.3 Secondary NameNode&#…

记一次堆内外内存问题的排查和优化

为优化淘宝带宽成本&#xff0c;我们在网关 SDK&#xff08;Java&#xff09;统一使用 ZSTD 替代 GZIP 压缩以获取更高的压缩比&#xff0c;从而得到更小的响应包。具体实现采用官方推荐的 zstd-jni 库。zstd-jni 会调用 zstd 的 c 库。 背景 在性能压测和优化过程中&#xff0…

React和Preact 这样处理className更优雅

React和Preact写className&#xff0c;我不太习惯使用模板字符串&#xff0c;不好看&#xff0c;看起来也不直观&#xff0c;写了如下两个库&#xff1a; react-runtime-clsx 和 preact-runtime-clsx&#xff0c;来辅助开发&#xff0c;可以更方便的处理className的问题&#x…

nodejs微信小程序+python+PHP北京地铁票务APP-计算机毕业设计推荐 -安卓

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

STM32F103

提示&#xff1a;来源正点原子&#xff0c;参考STM32F103 战舰开发指南V1.3PDF资料 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 开发环境硬件普中科技&#xff0c;接…

C++相关闲碎记录(6)

1、使用shared_ptr #include <iostream> #include <memory> #include <set> #include <deque> #include <algorithm> #include <string>class Item { private:std::string name;float price; public:Item(const std::string& n, floa…

【Centos】

一、Virtualbox安装Centos 1、Virtualbox 下载地址: Virtualbox 2、Centos 下载地址: Centos 3、Virtualbox安装Centos教程 Virtualbox安装Centos教程: Virtualbox安装Centos教程

光学遥感显著目标检测初探笔记总结

目录 观看地址介绍什么是显著性目标检测根据不同的输入会有不同的变体(显著性目标检测家族)目前这个领域的挑战 技术方案论文1(2019)论文2(2021)论文3(2022) 未来展望 观看地址 b站链接 介绍 什么是显著性目标检测 一张图片里最吸引注意力的部分就是显著性物体&#xff0c;…