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
分享
二维码
海报
HTML基础知识(8)
表格标签 1.1.1表格的基本标签 Ø 场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表 Ø 基本标签: Ø 注意点: • 标签的嵌套关系:table >……
<<上一篇
下一篇>>