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

基本使用

主要作用  : 

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

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

的数据表现的很有调理。 

应用实例 : 

                ​​​​​​​    

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

基本语法 : 

<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.hqwc.cn/news/336483.html

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

相关文章

express框架

目录 一、express介绍二、express 使用2.1 express下载2.2 express初体验 三、express 路由3.1 路由的使用3.2 获取参数3.3 获取路由参数 四、express响应设置五、express中间件5.1 什么是中间件5.2 中间件的作用5.3 中间件的类型5.3.1 定义全局中间件5.3.2 多个全局中间件5.3.…

springBoot-自动配置原理

以下笔记内容&#xff0c; 整理自B站黑马springBoot视频&#xff0c;抖音Holis 1、自动配置原理 1.收集Spring开发者的编程习惯&#xff0c;整理开发过程使用的常用技术列表一>(技术集A) 2.收集常用技术(技术集A)的使用参数&#xff0c;整理开发过程中每个技术的常用设置列表…

Linux前后端项目部署

目录 1.jdk&tomcat安装 配置并且测试jdk安装 修改tomcat 配置文件 登入tomcat 发布 安装mysql 导入sql数据 发布项目war包 redis安装 nginx安装 配置nginx域名映射 部署前端项目 centos 7的服务安装 安装jdk 安装tomcat 安装Mysql 安装redis 安装nginx 前后…

放大图片应该怎么样才能保证画质不变呢

图片的放大和调整是常见的需求。然而&#xff0c;许多图片编辑软件在放大图片时&#xff0c;往往会损失清晰度和质量。这使得许多用户在处理图片时感到困扰。此时&#xff0c;一款能够实现图片无损放大的工具就显得尤为重要。是一款备受用户喜爱的在线图片处理工具&#xff0c;…

基于SpringBoot的精品在线试题库系统(系统+数据库+文档)

&#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目 希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;一、绪论 1. 研究背景 现在大家…

游泳耳机排行榜前四名,分享几款值得推荐的游泳耳机

游泳是一项全面锻炼身体的运动&#xff0c;然而&#xff0c;水的阻力有时让人感到运动的笨拙和单调。为了让游泳更具趣味性和挑战性&#xff0c;选择一款高品质的游泳耳机至关重要。以下是游泳耳机排行榜前四名&#xff0c;以及几款强烈推荐的游泳耳机&#xff0c;它们结合防水…

【Cadence】sprobe的使用

实验目的&#xff1a;通过sprobe测试电路中某个节点的阻抗 这里通过sprobe测试输入阻抗&#xff0c;可以通过port来验证 设置如下&#xff1a; 说明&#xff1a;Z1代表sprobe往left看&#xff0c;Z2代表sprobe往right看 结果如下&#xff1a; 可以看到ZM1I0.Z2 顺便给出了I…

JKD的组成、Java跨平台、Path环境变量设置

一、JDK的组成 JVM&#xff1a;Java虚拟机&#xff0c;真正运行Java的地方 核心类库&#xff1a;Java自己写好的程序&#xff0c;给程序员自己调用 JRE&#xff1a;Java的运行环境&#xff0c;包含JVM和核心类库 JDK也就是Java开发工具&#xff0c;包含以上所有 二、Java的…

虾皮shopee根据ID取商品详情 API (shopee.item_get)

Shopee 是一个流行的电商平台&#xff0c;提供了 API 来允许开发者与平台进行交互。如果你想通过 API 根据商品 ID 获取商品详情&#xff0c;你可以使用 Shopee 的 item_get API。 以下是使用 Shopee 的 item_get API 根据商品 ID 获取商品详情的步骤&#xff1a; 获取 API 密…

Selenium 学习(0.18)——软件测试之基本路径测试

1、基本路径法测试的概念 是一种白盒测试方法&#xff0c;它在程序控制流图的基础上&#xff0c;通过分析控制构造的环行复杂性&#xff0c;导出基本可执行路径集合&#xff0c;从而设计测试用例的方法。 要保证在测试中程序的每一个可执行语句至少执行一次 【这和语句…

智能时代:自然语言生成SQL与知识图谱问答实战

语义解析 前言语义解析的应用场景总结概论语义解析和大模型的关系延伸阅读 前言 语义解析技术可以提高人机交互的效率和准确性&#xff0c;在自然语言处理、数据分析、智能客服、智能家居等领域都有广泛的应用前景。特别是在大数据时代&#xff0c;语义解析能够帮助企业更快速…

Backtrader 文档学习-Strategy(下)

Backtrader 文档学习-Strategy&#xff08;下&#xff09; 1. notify_cashvalue # 测试 #notify_cashvalue 方法特点 class Test_Strategy(bt.Strategy): # 策略通用初始参数params ((maperiod1, 5),(maperiod2, 20),(printlog, True), # 写入日志标志(logfilename, Test_…