HTML基础知识(8)
表格标签
1.1.1表格的基本标签
Ø 场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表
Ø 基本标签:
Ø 注意点:
• 标签的嵌套关系:table > tr > td
代码:
<table>
<tr>
<td></td>
</tr>
</table>
2.1.1表格属性
Ø 场景:设置表格基本展示效果
Ø 常见相关属性
Ø 注意点:
• 实际开发时针对于样式效果推荐用CSS设置
3.1.1表格的标题和表头单元格标签
Ø 场景:在表格中表示整体大标题和一列小标题
Ø 其他标签:
Ø 注意点:
• caption标签书写在table标签内部
• th标签书写在tr标签内部(用于替换td标签)
代码:
<table>
<caption>表格标题</caption>
<tr>
<th>表头单元格</th>
<td>表内容</td>
</tr>
</table>
4.1.1表格的结构标签
Ø 场景:让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰
Ø 结构标签:
Ø 注意点:
• 表格结构标签内部用于包裹tr标签
• 表格的结构标签可以省略
5.1.1合并单元格
Ø 场景:将水平或垂直多个单元格合并成一个单元格
Ø 合并单元格步骤:
1. 明确合并哪几个单元格
2. 通过左上原则,确定保留谁删除谁
• 上下合并→只保留最上的,删除其他
• 左右合并→只保留最左的,删除其他
3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
代码:
<table>
<tr>
<td>表格内容</td>
<td rowspan>表格内容</td>
<td>表格内容</td>
</tr>
</th>
<th>
<tr>
<td>表格内容</td>
<td>表格内容</td>
</tr>
</table>
版权声明:
作者:zhuim521
链接:https://zhuimwl.com/31.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。
THE END
1
二维码
海报
HTML基础知识(8)
表格标签
1.1.1表格的基本标签
Ø 场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表
Ø 基本标签:
Ø 注意点:
• 标签的嵌套关系:table >……

共有 0 条评论