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

news2024/11/20 6:29:38

基本使用

主要作用  : 

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

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

的数据表现的很有调理。 

应用实例 : 

                ​​​​​​​    

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

基本语法 : 

<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>

           

示例 : 

        ​​​​​​​    

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

            

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

            

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

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

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

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

相关文章

C2-4.3.1 多个决策树——随机森林

C2-4.3.1 多个决策树——随机森林 参考链接 1、为什么要使用多个决策树——随机森林&#xff1f; 决策树的缺点&#xff1a; A small change in the data can cause a large change in the structure of the decision tree causing instability 即&#xff1a;对数据集 中…

数据库:如何取消mysql的密码

因为调试MySQL数据接口&#xff0c;总是需要输入密码很烦&#xff0c;所以决定取消mysql的root密码&#xff0c; 网上推荐的有两种方法&#xff1a; 1、mysql命令 SET PASSWORD FOR rootlocalhostPASSWORD(); 2、运行 mysqladmin 命令 mysqladmin -u root -p password …

【源码阅读】交易池txs_pool

重要接口&#xff1a; ITxsPool的实现&#xff1a; type TxsPool struct {config TxsPoolConfigchainconfig *params.ChainConfigbc common.IBlockChaincurrentState *state.IntraBlockStatependingNonces *txNoncercurrentMaxGas uint64ctx context.Context //cance…

密码学(一)

文章目录 前言一、Cryptographic Primitives二、Cryptographic Keys2.1 Symmetric key cryptography2.2 asymmetric key cryptography 三、Confidentiality3.1 Symmetric key encryption algorithms3.2 asymmetric key block ciphers3.3 其他 四、Integrity4.1 secure hashing …

【语义解析:连接自然语言与机器智能的桥梁】

语义解析&#xff1a;连接自然语言与机器智能的桥梁 语义解析技术可以提高人机交互的效率和准确性&#xff0c;在自然语言处理、数据分析、智能客服、智能家居等领域都有广泛的应用前景。特别是在大数据时代&#xff0c;语义解析能够帮助企业更快速地从大量的数据中获取有用的…

Helix QAC 2023.4 新版支持C++20语言,带来更多性能提升!

Helix QAC 2023.4 新增功能 Helix QAC 2023.4全面支持MISRA C:2023规则&#xff0c;涵盖100%的指南。此版本还加强了对C20语言的支持&#xff0c;改进了数据流分析性能&#xff0c;并在整个产品中增加了多项用户体验改进。 增强的C20支持 此版本新增了对以下语言特性的支持&a…

永久关闭Windows更新的5种方法

很多家用电脑&#xff0c;如果系统自动更新的话&#xff0c;会变得越来越卡顿&#xff0c;且硬件型号兼容也并不完美。那么我们该如何彻底关闭Win11的自动更新呢&#xff1f;以下准备了5种方法&#xff0c;您可以根据自身实际情况选择合适的方法&#xff01; 一&#xff1a;使…

imgaug库指南(13):从入门到精通的【图像增强】之旅

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…

【SPDK】【NoF】使用SPDK实现NVMe over Fabrics Target

本文使用两台PC&#xff0c;一台做NVMe over Fabrics Target&#xff08;服务端&#xff09;&#xff0c;一台做NVMe over Fabrics initiator&#xff08;客户端&#xff09;。首先使用SoftRoCE来实现底层的rdma传输&#xff0c;然后使用SPDK来实现NVMe over Fabrics Target。 …

首家通过中国信通院数据库迁移工具专项测试,亚信安慧AntDB受到认可!

亚信安慧数据库数据同步平台经过中国信通院第17批“可信数据库”数据库迁移工具专项测试&#xff0c;成功成为首家符合《数据库迁移工具能力要求》的产品。该平台广泛适用于多种数据迁移场景&#xff0c;具备高性能实时数据处理、断点续作、一键迁移、可视化运维等核心优势。此…

Linux第22步_安装CH340驱动和串口终端软件MobaXterm

开发板输出信息通常是采用串口&#xff0c;而计算机通常是USB接口&#xff0c;为了让他们之间能够交换数据&#xff0c;我们通常采用USB转串口的转换器来实现。目前市场上的串口转换器大多是采用CH340芯片来实现的&#xff0c;因此我们需要在计算中安装一个CH340驱动程序&#…

echarts——折线图实现不同区间不同颜色+下钻/回钻功能——技能提升

echarts——折线图实现不同区间不同颜色下钻/回钻功能——技能提升 需求场景解决步骤1&#xff1a;安装echarts插件解决步骤2&#xff1a;html代码解决步骤3&#xff1a;封装option配置和initChart渲染方法解决步骤4&#xff1a;回钻功能 需求场景 最近在写后台管理系统时&…

conda环境下Torch not compiled with CUDA enabled解决方法

1 问题描述 在运行wav2lip模型训练时&#xff0c;报如下错误&#xff1a; Traceback (most recent call last):File "D:\ml\Wav2Lip\preprocess.py", line 32, in <module>fa [face_detection.FaceAlignment(face_detection.LandmarksType._2D, flip_inputF…

线性代数——(期末突击)矩阵(下)-习题篇(初等变换求逆矩阵、矩阵乘法、求矩阵方程、求线性方程组、解齐次线性方程组)

目录 初等变换求逆矩阵 矩阵乘法 求矩阵方程 求线性方程组 解齐次线性方程组 带有未知数的方程组 初等变换求逆矩阵 如果,则A可逆&#xff0c;且 例题&#xff1a; &#xff0c;求A的逆矩阵。 矩阵乘法 求AB&#xff0c;BA. 矩阵之间的乘法是行乘以列&#xff0c;以这…

基于ssm的教材管理系统论文

基于SSM的教材管理系统的设计与实现 摘 要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。以前学校对于教材信息的管理和控制&#xff0c;采用人工登记的方式保存相关数据&#xff0c;这种以…

沈阳数字孪生赋能工业智能制造,助力制造业企业数字化转型

沈阳数字孪生赋能工业智能制造&#xff0c;助力制造业企业数字化转型。在数字经济时代&#xff0c;数字孪生作为实现各行各业智能化、数字化的重要手段之一&#xff0c;受到了各方的广泛重视。随着各项关键使能技术的不断发展&#xff0c;数字孪生的应用价值有望得到进一步释放…

MFC 多文档视图架构

目录 多文档视图架构 模仿多文档视图架构 执行流程 多文档视图架构 一个多文档视图架构运行后会是下面的样子&#xff1a; 内部的子框架窗口就相当于一个单文档视图架构&#xff0c;多文档视图架构就相当于在外面套一层框架窗口。 特点&#xff1a;可以管理多个文档(可以有…

【hcie-cloud】【21】容器详解【容器网络说明、容器存储说明、容器镜像说明、dockerfile详述、缩略词】【下】

文章目录 容器介绍&#xff0c;容器工作机制、容器常用命令说明容器网络容器网络简介容器常用网络类型 - Bridge容器常用网络类型 - Host容器常用网络类型 - None其他容器网络类型【Macvlan、Overlay、IPvlan】容器网络相关配置 容器存储容器中应用数据的存储容器持久化存储配置…

猫粮的选择:买主食冻干猫粮要注意什么

由于猫咪是肉食动物&#xff0c;对蛋白质的需求很高&#xff0c;如果摄入的蛋白质不足&#xff0c;就会影响猫咪的成长。而冻干猫粮本身因为制作工艺的原因&#xff0c;能保留原有的营养成分和营养元素&#xff0c;所以冻干猫粮蛋白含量比较高&#xff0c;营养又高&#xff0c;…

控制障碍函数(Control Barrier Function,CBF) 三、代码

三、代码实现 3.1、模型 这是一个QP问题&#xff0c;所以我们直接建模 这其实还是之前的那张图&#xff0c;我们把这个大的框架带入到之前的那个小车追击的问题中去&#xff0c;得到以下的一些具体的约束条件 CLF约束 L g V ( x ) u − δ ≤ − L f V ( x ) − λ V ( x ) …