【H5 前端开发笔记】第 09 期：HTML常用标签 (5) 表格标签

下面是一份适合做《H5 前端开发笔记》第 09 期HTML常用标签 (5) —— 表格标签的学习笔记示例结构清晰、适合发布或整理成文档。【H5 前端开发笔记】第 09 期HTML常用标签 (5) —— 表格标签在网页开发中表格Table常用于展示结构化数据例如课程表、商品列表、财务报表等。HTML 提供了一系列专门的表格标签来实现数据展示。一、表格基本结构HTML 表格由以下几个核心标签组成标签作用table定义表格tr定义表格行table rowtd定义单元格table datath表头单元格基本结构tabletrtd单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/td/tr/table页面效果单元格1 单元格2 单元格3 单元格4二、表头标签thth用于定义表格的表头。特点默认加粗默认居中示例tableborder1trth姓名/thth年龄/thth职业/th/trtrtd张三/tdtd25/tdtd程序员/td/tr/table效果姓名年龄职业张三25程序员三、表格边框border可以使用border属性设置表格边框。tableborder1示例tableborder1trtdA/tdtdB/td/tr/table说明border1表示 1px 边框在现代开发中通常使用CSS 控制样式例如table{border-collapse:collapse;}td,th{border:1px solid #000;}四、单元格合并HTML 表格支持横向合并和纵向合并。1 横向合并colspancolspan表示跨列合并。示例tableborder1trtdcolspan2合并两列/td/trtrtdA/tdtdB/td/tr/table效果合并两列 A B2 纵向合并rowspanrowspan表示跨行合并。示例tableborder1trtdrowspan2合并两行/tdtdA/td/trtrtdB/td/tr/table效果合并两行 A B五、完整表格示例示例学生成绩表tableborder1trth姓名/thth语文/thth数学/thth英语/th/trtrtd张三/tdtd90/tdtd88/tdtd92/td/trtrtd李四/tdtd85/tdtd91/tdtd87/td/tr/table效果姓名语文数学英语张三908892李四859187六、表格语义化标签了解HTML5 推荐使用更语义化结构标签作用thead表头tbody表格主体tfoot表格底部示例tableborder1theadtrth商品/thth价格/th/tr/theadtbodytrtd手机/tdtd3999/td/tr/tbodytfoottrtd合计/tdtd3999/td/tr/tfoot/table优点结构更清晰更利于SEO更方便CSS / JS 控制七、开发注意事项1️⃣ 表格主要用于展示数据不要用表格做页面布局旧时代做法。推荐使用divflexgrid进行布局。2️⃣ 表格样式推荐使用CSS不要大量使用 HTML 属性控制样式。3️⃣ 大数据表格建议使用分页虚拟滚动表格组件库例如Element UI TableAnt Design Table八、本期总结表格核心标签标签作用table表格tr行td单元格th表头常用功能表格边框行列合并语义化结构如果你需要我还可以帮你整理一套完整《H5前端开发笔记》系列目录从HTML → CSS → JS → Vue非常适合做技术专栏 / 博客 / 知识付费课程。