基本用法
网页中的表格与Excel相似,用来展示数据
标签
- table嵌套tr,tr嵌套td/th
table:表格
tr:行
th:表头单元格
td:内容单元格
- 提示:在网页中,表格默认没有边框线,使用border属性可以为表格添加边框线,表格可以靠内容撑开
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1">
<tr>
<th>比奇堡</th>
<th>羊村</th>
<th>狗熊岭</th>
<th>翻斗乐园</th>
</tr>
<tr>
<td>海绵宝宝</td>
<td>喜羊羊</td>
<td>熊大</td>
<td>图图</td>
</tr>
<tr>
<td>派大星</td>
<td>慢羊羊</td>
<td>熊二</td>
<td>牛爷爷</td>
</tr>
<tr>
<td>章鱼哥</td>
<td>懒羊羊</td>
<td>光头强</td>
<td>赵英俊</td>
</tr>
</table>
</body>
</html>
实现效果
表格结构标签
作用
用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰。加结构标签在网页中显示效果没有变化。
标签
- thead:表格头部-表格头部内容
- tbody:表格主体-主要内容区域
- tfood-表格底部-汇总信息区域
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>比奇堡</th>
<th>羊村</th>
<th>狗熊岭</th>
<th>翻斗乐园</th>
</tr>
</thead>
<tbody>
<tr>
<td>海绵宝宝</td>
<td>喜羊羊</td>
<td>熊大</td>
<td>图图</td>
</tr>
<tr>
<td>派大星</td>
<td>慢羊羊</td>
<td>熊二</td>
<td>牛爷爷</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>章鱼哥</td>
<td>懒羊羊</td>
<td>光头强</td>
<td>赵英俊</td>
</tr>
</tfoot>
</table>
</body>
</html>
实现效果
合并单元格
作用
将多个单元格合并成一个单元格,以合并同类信息(不可以跨结构标签合并)
合并单元格步骤
- 明确合并目标
- 保留左上单元格,添加属性(取值是数字,表示需要合并的单元格数量)
跨行合并,保留最上单元格,添加属性roespan
跨列合并,保留最左单元格,添加属性colspan
3. 删除其他单元格
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并单元格</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>比奇堡</th>
<th>羊村</th>
<th>狗熊岭</th>
<th>翻斗乐园</th>
</tr>
</thead>
<tbody>
<tr>
<td>海绵宝宝</td>
<td>喜羊羊</td>
<td rowspan="2">熊大,熊二</td>
<td>图图</td>
</tr>
<tr>
<td>派大星</td>
<td>慢羊羊</td>
<!-- <td>熊二</td> -->
<td>牛爷爷</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">动画片</td>
<!-- <td>动画片</td>
<td>动画片</td> -->
</tr>
</tfoot>
</table>
</body>
</html>
</body>
</html>