Web前端学习笔记2——表格
表格的基本语法以及标签
表格示例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,所以第二行第一个单元格的标签就应该删除
同理,由于第三行的第二个单元格跨列合并,所以第三行的第三个单元格的标签也应该删除
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· c# 半导体/led行业 晶圆片WaferMap实现 map图实现入门篇
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!