#表格标签
--作用:在网页中以行——列的单元格的方式整齐展示数据,如:学生成绩表
--基本标签:
标签名 说明
table 表格整体,可用于包裹多个tr
tr 表格每行,可用于包裹td
td 表格单元格,可用于包裹内容
--注意点:标签的嵌套关系:table>tr>td
#表格相关属性
--作用:设置表格基本展示效果
--常见相关属性:
属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度
--注意点:属性都写在table后面,实际开发的时候针对样式效果推荐使用css设置
#表格标题和标头单元格标签
--作用:在表格中表示整体大标题和一列小标题
--其他标签:
标签名 名称 说明
caption 表格大标题 表示表格整体大标题,默认在表格顶部居中显示
th 表头单元格 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示
--注意点:
--caption标签写在table标签内部
--th标签写在tr标签内部(用于替换td标签)
#表格的结构标签
--作用:让表格内容结构分组,突出表格不同部分(头部,主体,底部),使语义更加清晰
--结构标签:
标签名 名称
thead 表格头部
tbody 表格主体
tfoot 表格底部
--注意点:
--表格结构标签内部用于包裹tr标签
--表格的结构标签可以省略
#合并单元格
--合并单元格步骤:
1.明确合并哪几个单元
2.通过左上原则,确定保留谁,删除谁
3.保留的单元格设置:跨行合并(rowspan),或者跨列合并(colspan)
--注意点:跨行合并(rowspan),或者跨列合并(colspan)加在th或者td标签内,
只有同一个结构标签的单元格才能合并,不能跨结构合并(不能夸:thead,tbody,tfoot)