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!!如有问题,欢迎评论区批评指正😁

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

学校安全检查系统

校园面积大、安全盲区多对学校安全管理带来诸多挑战&#xff1b;传统依靠人工纸质巡检记录存在漏检、管理难、联动差等诸多问题和缺点&#xff0c;巡检过程中很容易遗漏安全隐患的存续&#xff0c;从而导致安全事故的发生。 通过凡尔码平台模块化搭建学校安全管理系统&#xf…

黑豹程序员-EasyExcel实现导出

需求 将业务数据导出到excel中&#xff0c;老牌的可以选择POI&#xff0c;也有个新的选择EasyExcel。 有个小坑&#xff0c;客户要求样式比较美观&#xff0c;数字列要求千位符&#xff0c;保留2位小数。 可以用代码实现但非常繁琐&#xff0c;用模板就特别方便&#xff0c;模…

什么是RabbitMQ

目录 ​编辑 一、引言 二、概念和特性&#xff1a; 1、消息代理&#xff1a; 2、队列&#xff1a; 3、发布/订阅模型&#xff1a; 4、路由和交换机&#xff1a; 5、持久性&#xff1a; 6、灵活的消息模式&#xff1a; 7、可扩展性&#xff1a; 我的其他博客 一、引言…

湖科大计网:计算机网络概述

一、计算机网络的性能指标 一、速率 有时候数据量也认为是以10为底的&#xff0c;看怎么好算。&#xff08;具体吉大考试用什么待商榷&#xff09; 二、带宽 在模拟信号系统中带宽的含义&#xff0c;本课程中用到的地方是&#xff1a;香农定理和奈奎斯特定理公式的应用之中。 …

OCRmyPDF让你能搜索扫描版PDF文档

什么是 OCRmyPDF &#xff1f; PDF 是存储和交换扫描文档的最佳格式。不幸的是&#xff0c;PDF 可能很难修改。OCRmyPDF 是一个 Python 应用程序和库&#xff0c;可以轻松地将图像处理和 OCR&#xff08;可识别、可搜索的文本&#xff09;应用于现有 PDF&#xff0c;通过向扫描…

持续集成交付CICD:使用Jenkins插件上传Nexus制品

目录 一、实验 1.使用Jenkins插件上传Nexus制品 一、实验 1.使用Jenkins插件上传Nexus制品 &#xff08;1&#xff09;Jenkins安装插件Nexus Artifact Uploader &#xff08;2&#xff09;添加凭据 &#xff08;3&#xff09;使用片段生成器生成DSL &#xff08;4&#xf…

【计算机网络】IP协议

目录 引言 1、数据包格式&#xff1a; IP数据包格式&#xff1a; 2、IP地址&#xff1a; IP地址的组成&#xff1a; IP地址的分配&#xff1a; IP地址的重要性&#xff1a; 3、路由&#xff1a; 1. 基本概念&#xff1a; 2. 路由的过程&#xff1a; 3. 路由的重要性&…

线上盲盒小程序,开启互联网盲盒时代

近年来&#xff0c;盲盒经济在国内非常火爆&#xff0c;各类盲盒品牌层出不穷&#xff0c;深受国内外年轻人、消费者的喜爱。 目前&#xff0c;根据数据显示&#xff0c;盲盒市场不仅在线下异常火热&#xff0c;线上盲盒也是成为了大众的新选择。各类电商平台中盲盒的成交额更…

红队攻防实战之ThinkPHP-RCE集锦

你若不勇敢&#xff0c;谁又可以替你坚强&#xff1f; ThinkPHP 2.x RCE漏洞 1、查询phpinfo() 2、任意代码执行 3、Getshell 蚁剑连接&#xff1a; ThinkPHP5 5.0.23 RCE漏洞 发送数据包&#xff1a; 成功执行id命令&#xff1a; 工具验证 ThinkPHP5 SQL注入漏洞 &&am…

高德地图加载三维模型vue(.obj转.gltf)

官方glTF模型案例 obj2gltf 的开发文档 第一步&#xff1a;这里首先要将我们的.obj文件转换为.gltf文件 全局安装 npm install -g obj2gltf终端打开.obj文件所在的文件夹执行 obj2gltf -i model.obj -o model.gltf -t &#xff08;-i model.obj对应你的obj文件的名字&#x…

架构LAMP

目录 1.什么是LAMP 2.LAMP组成及作用 3.搭建Apache httpd服务 4.编译安装mysqld 服务 5.编译安装PHP 解析环境 6.安装论坛 1.什么是LAMP LAMP架构是目前成熟的企业网站应用模式之一&#xff0c;指的是协同工作的一整套系统和相关软件&#xff0c;能够提供动态Web站点服务…

Redis课程:黑马点评

文章目录 基于Redis实现短信登录商户查询缓存优惠券秒杀一人一单 分布式锁Redis分布式锁误删情况说明解决Redis分布式锁误删问题使用lua脚本解决分布式锁的原子性问题 基于阻塞队列实现秒杀优化Redis消息队列优化秒杀业务达人探店参考 本文是根据黑马程序员的视频课程 黑马程序…

基于单片机的血氧心率检测与报警系统研制(论文+源码)

1. 系统设计 本次课题为基于单片机的血氧心率检测与报警系统研制&#xff0c;在此设计了如图2.1所示的系统结构框图&#xff0c;整个系统包括了MAX30102心率血氧检测模块&#xff0c;DS18B20体温检测模块&#xff0c;液晶显示模块&#xff0c;按键以及主控制器stm32f103单片机…

Redux Toolkit(RTK)在React tsx中的使用

一个需求: header组建中有一个搜索框,然后这个搜索框在其他页面路由上都可以使用:例如这两个图共用顶部的搜索框; 我之前的做法就是组建传值, 在他们header 组建和 PageA ,B 的父级组件上定一个值,然后顶部变化传到父级组件,在从父级组件传到page组件,有点繁琐,现在说一下利用…

C++STL库的 deque、stack、queue、list、set/multiset、map/multimap

deque 容器 Vector 容器是单向开口的连续内存空间&#xff0c; deque 则是一种双向开口的连续线性空 间。所谓的双向开口&#xff0c;意思是可以在头尾两端分别做元素的插入和删除操作&#xff0c;当然&#xff0c; vector 容器也可以在头尾两端插入元素&#xff0c;但是在其…

机器人、智能小车常用的TT电机/310电机/370电机选型对比

在制作智能小车或小型玩具时&#xff0c;在电机选型上一些到各种模糊混淆的概念&#xff0c;以及各种错综复杂的电机参数&#xff0c;本文综合对比几种常用电机的参数及特性适应范围&#xff0c;以便快速选型&#xff0c;注意不同生产厂家的电机参数规则会有较大差异。 普通TT…

LNMP网站架构分布式搭建部署

1. 数据库的编译安装 1. 安装软件包 2. 安装所需要环境依赖包 3. 解压缩到软件解压缩目录&#xff0c;使用cmake进行编译安装以及模块选项配置&#xff08;预计等待20分钟左右&#xff09;&#xff0c;再编译及安装 4. 创建mysql用户 5. 修改mysql配置文件&#xff0c;删除…

离散型制造企业MES系统行业应用

离散型制造企业具有产品种类多、生产周期长、生产过程复杂等特点&#xff0c;因此&#xff0c;采用先进的生产管理系统对于提高企业的生产效率和管理水平至关重要。其中&#xff0c;制造执行系统&#xff08;MES&#xff09;在离散型制造企业中得到了广泛应用&#xff0c; 一、…

mysql原理--InnoDB数据页结构

1.不同类型的页 页是 InnoDB 管理存储空间的基本单位&#xff0c;一个页的大小一般是 16KB 。InnoDB 为了不同的目的而设计了许多种不同类型的页。下面讨论存放我们表中记录的那种类型的页&#xff0c;官方称这种存放记录的页为索引&#xff08; INDEX &#xff09;页&#xff…

【数组Array】力扣-283 移动零

目录 题目描述 解题过程 题目描述 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,…