<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表格元素</title>
</head>
<body>
<!-- border设置线格宽度 width设置表格宽度 -->
<table border="1" style="width:200px">
<!-- tr包裹一行 td表示单元格 th代表是表头单元格 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>未婚</td>
</tr>
</table>
<br>
<table border="1" style="width:300px">
<!-- rowspan归并几行为1列 -->
<tr>
<td rowspan="4">单位人员</td>
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>未婚</td>
</tr>
<!-- colspan归并几列为1行 -->
<tr>
<td colspan="4">统计:共两人</td>
</tr>
</table>
<br>
<table border="1" style="width:200px">
<!-- 设置表格名称 -->
<caption>这是一个表格</caption>
<!-- thead 包裹表头 tbody包裹表主题 tfoot包裹表脚 不怕位置混乱 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>未婚</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">统计:2人</td>
</tr>>
</tfoot>
</table>
<br>
<table border="1" style="width:200px">
<!-- 第一种设置第二列为红色 -->
<colgroup style="background:white"></colgroup>
<colgroup style="background:red" span="1"></colgroup>
<!-- 第二种设置第三列为黄色 更为灵活 -->
<!-- <colgroup>
<col>
<col>
<col style="background:yellow">
</colgroup> -->
<!-- 设置表格标题 -->
<caption>这是一个表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>未婚</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">统计:2人</td>
</tr>>
</tfoot>
</table>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
