表格的相关内容

表格的基本标签
姓名
成绩
评语
➢场景: 在网页中以行+列的单元格的方式整齐展示和数据，
table
表格整体，可用于包裹多个tr
tr
表格每行，可用于包裹td
td
表格单元格，可用于包裹内容
总结
郎才女貌
郎才女貌
➢注意点:
标签的嵌套关系: table > tr> td

2.1表格相关属性
➢场景: 设置表格基本展示效果
➢常见相关属性:
属性名
属性值
效果
border
数字
边框宽度
width
数字
表格宽度
height
数字
表格高度
➢注意点:
实际开发时针对于样式效果推荐用CSS设置

表格标题和表头单元格标签
➢场景: 在表格中表示整体大标题和一-列小标题
➢其他标签:
标签名
名称
说明
caption
表格大标题
表示表格整体大标题，默认在表格整体顶部居中位置显示
th
表头单元格
表示-列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
➢注意点:
●
caption标签书写在table标签内部
th标签书写在tr标签内部(用于替换td标签)

合并单元格-代码实现
➢合并单元格步骤:
1. 明确合并哪几个单元格
2.通过左上原则，确定保留谁删除谁
●上下合并→只保留最上的，删除其他
左右合并- +只保留最左的，删除其他
3.给保留的单元格设置: 跨行合并(rowspan) 或者跨列合并(colspan)
属性名
属性值
说明
rowspan
合并单元格的个数
跨行合并，将多行的单元格垂直合并
colspan
合并单元格的个数
跨列合并，将多列的单元格水平合并
➢注意点:
●只有同-个结构标签中的单元格才能合并，不能跨结构标签合并(不能跨: thead. tbody.tfoot