首页 > 其他分享 >Web前端学习笔记2——表格

Web前端学习笔记2——表格

时间:2022-12-29 16:00:14浏览次数:41  
标签:Web 表格 标签 单元格 tr 笔记 table td

表格的基本语法以及标签

表格示例1:

table标签就是表格的标签,用来建立一个表格

tr标签表示行,一个<tr></tr>标签就是一行

td标签表示数据单元格的内容,可以理解为列

th标签为表头单元格,和td不同的是,它在表格中会居中且加粗

tr要嵌套在table里面,td要嵌套在tr里

table标签里面可以有很多的属性可以设置,如下图所示:

 

 

常见的还有一个height属性,用来设置表格的高

其实这些属性并不是table标签专属的,tr,th,td标签也可以设置一些属性,如<td align="center"></td>

 

示例1在网页中的显示:

 

为了更好的阅读代码,表格的第一行,即表头,可以用<thead></thead>包起来,表的主体可以用<tbody></tbody>包起来

以此实现实现收缩代码的功能,具体效果如下图所示:

 

 

 

 

 

 合并单元格

 

表格示例2:

 

 

 具体效果如下:

 

 

本身表格是一个三行三列的表格,由于第一行的第一个单元格跨行合并,且合并的个数为2,所以第二行第一个单元格的标签就应该删除

 

同理,由于第三行的第二个单元格跨列合并,所以第三行的第三个单元格的标签也应该删除

 

标签:Web,表格,标签,单元格,tr,笔记,table,td
From: https://www.cnblogs.com/qingyuan0213/p/17012538.html

相关文章

  • .Net6 WebApi使用SqlSugar
    1、Nuget先引入:SqlSugarCore2、NetIOC1、注入ISqlSugarClient.NET自带的IOC使用也很方便 先封装一个操作类  //建一个扩展类publicstaticclassSqlsugarS......
  • vue websockt 实现站内消息的发送和接收
    1.什么是 WebSocketwebsocket是HTML5开始提供的一种网络通信协议,它的目的是在浏览器之间建立一个不受限的双方通信的通道,比如说,服务器可以在任意时刻发送信息给浏览器。......
  • 自签名证书笔记
    参考文章HowtoCreateSelf-SignedCertificatesusingOpenSSL证书链中的一个或多个中间证书丢失的解决办法:导入中间证书openssl-pkcs12HTTP转HTTPS—使用OpenSSL......
  • Springcloud学习笔记39--拦截器Interceptor详细使用
    原文链接:https://www.cnblogs.com/luckyplj/p/15839125.html1.拦截器Interceptor定义拦截器是在面向切面编程中应用的,就是在你的service或者一个方法前调用一个方法,或者......
  • 循环某类型列表,组装类型列表中所有下级名称,展示表格使用
    /***获取数据信息**@paramselectBOS原类型列表*@parami类型下标(从0开始)*@paramname类型拼接名称(拼接后的每行......
  • Jupyter笔记[4]-目标检测
    需求在python中进行目标检测Haar级联Haar级联是一种基于特征的对象检测算法,用于从图像中检测对象。Cascade函数在大量正负图像上进行训练以进行检测。该算法不需......
  • 【深入理解LTE-A】学习笔记 - 上行同步过程
    1、为什么需要上行同步正交多址接入技术要求:不同UE的来自同一子帧但不同频域资源RB的信号到达enodeb的时间是对齐的,为了保证不同的UE到达nodeb后不会互相干扰,nodeb必须要......
  • Android笔记--图像显示
    imageView具体实现:注意:图片名称应当为小写的英文字母与数字的结合,当然,二者可以只存在其一图片的放置的比例:(通过scaleType属性设置)ImageButtonImageButton和Butto......
  • Web技术的发展 网络发展简介(三)
    即使你精通js,但是却不知道为什么有js的话,人生岂不是有点缺憾?天天开发web项目,却不了解点历史,是否也会有点失落?本文从web的最初发明的历史开始,对web的发展......
  • OpenCV自学笔记13. 训练自己的分类器
    训练自己的分类器本小节使用的图片为:最近在项目中遇到了一个问题,需要识别图像中的红色圆形。Hough变换的效果还可以,但是存在计算量大等问题,因此,还需要一种更为准确的方法,识......