1、表格的基本标签:
☞场景:在网页中以行+列的单元格的方式整齐展示和数据,如学生成绩表
☞基本标签:
①table表示表格的整体,可用于包裹多个tr
②tr表示表格每行,可用于包裹td
③td表示表格单元格,可用于包裹内容
☞注意:标签的嵌套关系:table > tr > td
2、表格相关属性:
☞场景:设置表格基本展示效果
☞常见相关属性:
①border(边框宽度)②width(表格宽度)
③height(表格高度)
☞注意:实际开发时针对于样式效果推荐用css设置
3、表格标题和表头单元格标签:
☞场景:在表格中表示整体大标题和一列小标题
☞其他标签:
①caption(表格大标题):表示表格整体大标题,默认在表格整体顶部居中位置显示
②th(表头单元格):表示一系列小标题,通常用于表格第一行,默认内部文字加粗并居中显示
☞注意点:
①caption标签书写在table标签内部
②th标签书写在tr标签内部(用于替换td标签)
4、合并单元格
☞场景:将水平或垂直多个单元格合并成一个单元格
☞合并单元格步骤:
①明确合并哪几个单元格
②通过左上原则,确定保留谁删除谁
上下合并→只保留最上的,删除其他
左右合并→只保留最左的,删除其他
③给保留的单元格设置:
跨行合并(rowspan):跨行合并,将多行的单元格垂直合并(属性值为合并单元格的个数)
跨列合并(colspan):跨列合并,将多列的单元格水平合并(属性值为合并单元格的个数)
☞注意点:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)