前端-基础 表格标签 - 基本使用及表头单元格 详解

基本使用

主要作用  : 

即  主要 用于显示,展示数据,因为它可以让数据显示的非常的规整,可读性非常好。 

特别是后台展示数据的时候,能够熟练运用表格就显得很重要。 一个清爽简约的表格能够把繁杂

的数据表现的很有调理。 

应用实例 : 

                ​​​​​​​    

总结就是 : 表格不是用来布局页面的,而是用来展示数据的 ~! 

基本语法 : 

<table>

        <tr>

               <td> 单元格内的文字 </td> 

               ..........

        </tr>

        .........

 </table> 

#   <table> </table>  是用于定义表格的标签 

#   <tr>  </tr>  标签用于定义表格中的行,必须嵌套在<table>  </table> 标签中 

#   <td> </td>  用于定义表格中的单元格,必须嵌套在 <tr> </tr> 标签中 

#   字母 td 指表格数据,即数据单元格的内容 

  是没有列的概念的,就每一行有几个单元格,那就有几列洛 ~!! 

              

              按照上示的代码编写,那就是 一行 三个单元格 

              

              我们加上内容,看具体效果 

              

               这就是 一行三单元格 的效果 ~!!!  

              

              这就显然是 三行,每行各三个单元格了, 也即 三行三列

              需要强调的是,一对  <tr>  </tr>  标签表示 一行  ,我们前面的那个示例,我把<tr>

              标签没有写到一行,但他只要是一对,就代表着一行~!!  

              ===>>>

             

              当然了,你可能发现怎么这个表格看起来好着也好着,但是好像也不太对呢

              别急嘛,一步步往下看~!! 

表头单元格标签  : 

    

一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示

< th >  标签表示 HTML 表格的表头部分 

基本语法

<table>

        <tr>

               <th>   </th>

       </tr>

</table>

           

示例 : 

        ​​​​​​​    

            如此,也就是 我们的第一行,现在使用的是表头单元格标签了~!!

            

            显然,你可以看到,表头是加粗的,也是居中的~!! 

            

            总结 : 表头单元格也是单元格,常用于表格第一行,突出重要性。

                         表头单元格里面的文字会加粗居中显示。

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

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

相关文章

TOPS、MIPS、DMIPS、MFLOPS、吞吐量与推理效率

1.概述 在深度学习对应的神经推理中经常涉及几个重要概念&#xff0c;TOPS、MIPS、DMIPS&#xff0c;MFLOPS&#xff0c;下文对其做对比说明。 2.概念对比 2.1 MIPS Million Instructions Per Second的缩写&#xff0c;每秒处理的百万级的机器语言instructions。这是衡量处…

coredump+gdb调试

1、什么是coredump Coredump&#xff08;核心转储&#xff09;是操作系统在程序异常终止&#xff08;例如由于段错误或其他严重错误&#xff09;时创建的一种文件。这个文件包含了程序崩溃时刻进程的内存镜像&#xff0c;通常还包括程序计数器、寄存器内容和堆栈内存等信息&am…

我在考 pmp,想知道如何去学习 pmbok?

PMP新版大纲加入了ACP敏捷管理的内容&#xff0c;而且还不少&#xff0c;敏捷混合题型占到了 50%&#xff0c;很多人都觉得考试难度提升了&#xff0c;我最开始备考的时候也被折磨过一段时间&#xff0c;但是后面还是找到了方法&#xff0c;3A通过了考试&#xff0c;也算有点经…

设计模式——桥接模式(Bridge Pattern)

概述 桥接模式是一种结构型设计模式&#xff0c;如果软件系统中某个类存在两个独立变化的维度&#xff0c;通过该模式可以将这两个维度分离出来&#xff0c;使两者可以独立扩展&#xff0c;让系统更加符合“单一职责原则”。与多层继承方案不同&#xff0c;它将两个独立变化的维…

SpringBoot整合人大金仓数据库KingBase

1 去KingBase官网下载驱动jar包 2 将解压得到的所有jar包放置在libs目录下&#xff08;没有就新建一个目录&#xff09; 3 在pom文件添加相关依赖 <!--添加KingBase所需要的依赖--> <dependency><groupId>com.kingbase</groupId><artifactId>kin…

el-select 单选时,选择后输入框的is-focus状态并没有取消

前两天在封装组件的时候&#xff0c;发现el-select 单选时&#xff0c;选择后输入框的is-focus状态并没有取消&#xff0c;需要手动点其它地方才会取消&#xff0c;于是想着找找为什么 一、通过调试源码发现&#xff0c;输入框在点击选项后触发blur&#xff0c;紧接着又触发了…

亚马逊,速卖通,美客多卖家怎么才能安全及有效的积累产品的评论

测评补单对于亚马逊、速卖通等平台卖家来说&#xff0c;是一种重要的运营手段之一&#xff0c;通过测评补单快速增加产品的销量、评论数量&#xff0c;提升排名&#xff0c;从而打造爆款产品。 测评养号的好处包括&#xff1a; 1. 提升店铺信誉&#xff0c;制造爆款&#xff…

【Django开发】美多商城项目第2篇:Django用户注册和登录开发(附代码,已分享)

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论django商城项目相关知识。项目利用Django框架开发一套前后端不分离的商城项目&#xff08;4.0版本&#xff09;含代码和文档。功能包括前后端不分离&#xff0c;方便SEO。采用Django Jinja2模板引擎 Vue.js实现前后端…

【2023】java常用HTTP客户端对比以及使用(HttpClient/OkHttp/WebClient)

&#x1f4bb;目录 1、介绍2、使用2.1、添加配置2.1.1、依赖2.1.2、工具类2.1.3、实体2.1.4、Controller接口 2.2、Apache HttpClient使用2.3 、OkHttp使用2.4、WebClient使用 1、介绍 现在java使用的http客户端主要包括以下几种 而这些中使用得最频繁的主要是&#xff1a; A…

持续领跑云安全赛道!安全狗多项安全能力获认可

近日&#xff0c;以“数字安全 未来可期”为主题的“2024安全市场年度大会”在北京成功举行。 作为国内云原生安全领导厂商&#xff0c;安全狗也受邀出席此次活动。 厦门服云信息科技有限公司&#xff08;品牌名&#xff1a;安全狗&#xff09;创办于2013年&#xff0c;是国内领…

[②C++ Boost]: Boost库编译,arm交叉编译方法

前言 Boost是十分实用的C库&#xff0c;如果想在arm环境下使用&#xff0c;就需要自己下载源码编译&#xff0c;本篇博客就记录下Boost库的编译方法。 下载Boost源码 Boost源码的下载路径可以使用&#xff1a;https://sourceforge.net/projects/boost/files/boost/ 编译 …

MySQL之导入、导出远程备份

一、Navicat工具导入、导出 1.1 导入 第一步&#xff1a; 右键&#xff0c;点击运行SQL文件 第二步&#xff1a; 选择要运行的SQL&#xff0c;点击开始 第三步&#xff1a; 关闭即可 1.2 导出 第一步&#xff1a; 右键选择&#xff0c;导出向导 第二步&#xff1a; 选择SQL脚…

require.context的作用

1、什么是 require.context 一个 webpack 的 api &#xff0c;通过该函数可以获取一个上下文&#xff0c;从而实现工程自动化&#xff08;遍历文件夹的文件&#xff0c;从中获取指定文件&#xff0c;自动导入模块&#xff09;。 在前端工程中&#xff0c;如果一个文件夹中的模块…

亚信安全深度解读2023年中国网络安全重要政策法规

亚信安全在对2023年国内网络安全政策的持续跟踪和研究基础上进行了详细分析。观察整体态势&#xff0c;本年度网络安全政策的发布呈现出高密度特征&#xff0c;共计引起行业高度关注的政策达50余项。数据安全领域、个人信息保护和数据跨境安全成为关注的热点&#xff0c;分别有…

ChatGPT给出最有用建议居然是去网上搜索

今天共享服务器的学员发现了一个问题&#xff0c;就是装不了rJava。但是&#xff0c;我装了下&#xff0c;发现没问题啊&#xff0c;然后&#xff0c;我就问他&#xff0c;他是哪里加载的&#xff0c;他回答的说&#xff0c;是在Rstduio-server上。 我觉得此时有蹊跷&#xff0…

状态管理小能手:Cookie 和 Session

1. 引言 大家好&#xff0c;我是小❤&#xff0c;一个漂泊江湖多年的 985 非科班程序员&#xff0c;曾混迹于国企、互联网大厂和创业公司的后台开发攻城狮。 假期抢票的尴尬事件 最近小❤在抢出行的高铁票时&#xff0c;发生了一件尴尬的事情。 这不是临近假期了嘛&#xf…

autoxjs 安卓爬虫自动化

autoxjs 安卓爬虫自动化 我这里只是测试请勿用于违法的 我这里是小红书 文章目录 autoxjs 安卓爬虫自动化前言一、自动刷直播间并且抓取商品已经粉丝数量等&#xff1f;总结 前言 欢迎来到AutoXJS的世界&#xff0c;这是一个充满创新、挑战和技术探索的领域。在这个引领未来的…

Embedded-Project项目介绍

Embedded-Project项目介绍 Server后端项目后端启动连接数据库启动时可能遇到的问题架构介绍 web前端项目前端启动启动时可能遇到的问题架构介绍 前后端分离开发流程 项目地址&#xff1a; https://github.com/Catxiaobai/Embedded-Project Server后端项目 系统后端项目&#…

非工程师指南: 训练 LLaMA 2 聊天机器人

引言 本教程将向你展示在不编写一行代码的情况下&#xff0c;如何构建自己的开源 ChatGPT&#xff0c;这样人人都能构建自己的聊天模型。我们将以 LLaMA 2 基础模型为例&#xff0c;在开源指令数据集上针对聊天场景对其进行微调&#xff0c;并将微调后的模型部署到一个可分享的…

深入理解 Hadoop (五)YARN核心工作机制浅析

概述 YARN 的核心设计理念是 服务化&#xff08;Service&#xff09; 和 事件驱动&#xff08;Event EventHandler&#xff09;。服务化 和 事件驱动 软件设计思想的引入&#xff0c;使得 YARN 具有低耦合、高内聚的特点&#xff0c;各个模块只需完成各自功能&#xff0c;而模…