<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<!-- 表格标签 -->
<!-- 在网页中以行,列的单元格方式整齐展示数据,比如学生成绩表 -->
<!-- table--表格整体,可包裹多个tr -->
<!-- tr--表格每行,包裹td -->
<!-- td--表格单元格,包裹内容 -->
<!-- 嵌套关系:table>tr>td -->
<!-- table表格相关属性 -->
<!-- 用来设置表格基本展示效果 -->
<!-- border--边框宽度 -->
<!-- width--表格宽度 -->
<!-- height--表格高度 -->
<!-- 实际开发时针对于样式效果用CSS设置 -->
<!-- 一般不在table下边设置width -->
<!-- 表格标题和表头单元格标签 -->
<!-- 表格中表示整体大标题和一列小标题 -->
<!-- caption--表格大标题,默认在表格整体顶部居中位置显示 -->
<!-- th--表头单元格,表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示 -->
<!-- caption写在table标签内部,th写在tr内部,用于替换td -->
<!-- 表格的结构标签 -->
<!-- 表格内容结构分组,突出表格不同部分(头部,主题,底部),使语义更清晰 -->
<!-- thread--表格头部 -->
<!-- tbody--表格主体 -->
<!-- tfoot--表格底部 -->
<!-- 表格结构标签内部用于包裹tr标签,表格结构标签可以省略 -->
<!-- 合并单元格 -->
<!-- 水平或垂直的单元格合并成一个单元格 -->
<!-- 跨行合并--垂直合并 -->
<!-- 跨列合并--水平合并 -->
<!-- 明确合并哪几个单元格 -->
<!-- 通过左上原则,确定保留谁删除谁
上下合并,只保留最上的,删除其他
左右合并,只保留最左的,删除其他 -->
<!-- rowspan--表示合并单元格个数,跨行合并,垂直合并 -->
<!-- colspan--表示合并单元格个数,跨列合并,水平合并 -->
<!-- 只有同一个结构标签中的单元格才能合并,不能跨结构合并 -->
<table border="1" width="500" height="500" >
<caption><strong>学生成绩单</strong></caption>
<thead>
<tr>
<!-- 快速复制 shift+alt+下 -->
<!-- 快速换行--CTRL+enter -->
<th>姓名</th>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<!-- tab代码后移,shift+tab代码前移 -->
<tbody>
<tr>
<td>夏鸣星</td>
<td rowspan="2">100</td>
<td>perfect</td>
</tr>
<tr>
<td>笨鸟</td>
<td>perfect</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">完美</td>
</tr>
</tfoot>
</table>
</body>
</html>
扫一扫
04-15
1413
1413
08-18
1699
1699
06-06
5404
5404
10-23
2217
2217
10-13
310
310
10-15
1271
1271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
