零基础学习HTML(13)——table标签（下）
零基础学习HTML(13)——table标签（下）
Dragon水魅
发布于 2026-01-23 15:02:32
发布于 2026-01-23 15:02:32
注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php
官方资料
鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/
学习正文
colgtoup标签：https://man.ilovefishc.com/pageHTML5/colgroup.html 修改 th 元素属性：
<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟主要成员技能表</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
/* 将 th 元素的背景色设置为 grey */
th {
background: grey;
color: white;
}
th, td {
border: 1px solid black;
padding: 5px;
}
caption {
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>复仇者联盟主要成员技能表</caption>
<thead>
<tr>
<th>外号</th>
<th>原名</th>
<th>特长</th>
<th>照片</th>
</tr>
</thead>
<tbody>
<tr>
<th>美国队长</th>
<td>史蒂芬·罗杰斯</td>
<td>强化体格</td>
<td><img src="./CaptainAmerica.jpg" alt="美国队长" width="300"></td>
</tr>
<tr>
<th>钢铁侠</th>
<td>托尼·斯塔克</td>
<td>有钱</td>
<td><img src="./IronMan.jpg" alt="钢铁侠" width="300"></td>
</tr>
<tr>
<th>雷神</th>
<td>托尔</td>
<td>操控雷电</td>
<td><img src="./Thor.jpg" alt="雷神" width="300"></td>
</tr>
<tr>
<th>绿巨人</th>
<td>布鲁斯·班纳</td>
<td>变大变强</td>
<td><img src="./Hulk.jpg" alt="绿巨人" width="300"></td>
</tr>
<tr>
<th>黑寡妇</th>
<td>娜塔莎·罗曼诺夫</td>
<td>性感</td>
<td><img src="./BlackWidow.jpg" alt="黑寡妇" width="300"></td>
</tr>
</tbody>
</table>
</body>
</html>
在这里插入图片描述
使用 thead 元素和 tbody 元素设置标有样式和主体样式：
<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟主要成员技能表</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
/* 分别设置 thead 元素和 tbody 元素 */
thead th {
background: grey;
color: white;
}
tbody th {
background: lightgrey;
color: white;
}
th, td {
border: 1px solid black;
padding: 5px;
}
caption {
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>复仇者联盟主要成员技能表</caption>
<!-- 添加 thead 元素和 tbody 元素，更细致地划分表格 -->
<thead>
<tr>
<th>外号</th>
<th>原名</th>
<th>特长</th>
<th>照片</th>
</tr>
</thead>
<tbody>
<tr>
<th>美国队长</th>
<td>史蒂芬·罗杰斯</td>
<td>强化体格</td>
<td><img src="./CaptainAmerica.jpg" alt="美国队长" width="300"></td>
</tr>
<tr>
<th>钢铁侠</th>
<td>托尼·斯塔克</td>
<td>有钱</td>
<td><img src="./IronMan.jpg" alt="钢铁侠" width="300"></td>
</tr>
<tr>
<th>雷神</th>
<td>托尔</td>
<td>操控雷电</td>
<td><img src="./Thor.jpg" alt="雷神" width="300"></td>
</tr>
<tr>
<th>绿巨人</th>
<td>布鲁斯·班纳</td>
<td>变大变强</td>
<td><img src="./Hulk.jpg" alt="绿巨人" width="300"></td>
</tr>
<tr>
<th>黑寡妇</th>
<td>娜塔莎·罗曼诺夫</td>
<td>性感</td>
<td><img src="./BlackWidow.jpg" alt="黑寡妇" width="300"></td>
</tr>
</tbody>
</table>
</body>
</html>
在这里插入图片描述
使用 tfoot 元素设置表尾（跨列）：
<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟主要成员技能表</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
/* 分别设置 thead 元素和 tbody 元素 */
thead th {
background: grey;
color: white;
}
tbody th {
background: lightgrey;
color: white;
}
th, td {
border: 1px solid black;
padding: 5px;
}
caption {
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>复仇者联盟主要成员技能表</caption>
<!-- 添加 thead 元素和 tbody 元素，更细致地划分表格 -->
<thead>
<tr>
<th>外号</th>
<th>原名</th>
<th>特长</th>
<th>照片</th>
</tr>
</thead>
<tbody>
<tr>
<th>美国队长</th>
<td>史蒂芬·罗杰斯</td>
<td>强化体格</td>
<td><img src="./CaptainAmerica.jpg" alt="美国队长" width="300"></td>
</tr>
<tr>
<th>钢铁侠</th>
<td>托尼·斯塔克</td>
<td>有钱</td>
<td><img src="./IronMan.jpg" alt="钢铁侠" width="300"></td>
</tr>
<tr>
<th>雷神</th>
<td>托尔</td>
<td>操控雷电</td>
<td><img src="./Thor.jpg" alt="雷神" width="300"></td>
</tr>
<tr>
<th>绿巨人</th>
<td>布鲁斯·班纳</td>
<td>变大变强</td>
<td><img src="./Hulk.jpg" alt="绿巨人" width="300"></td>
</tr>
<tr>
<th>黑寡妇</th>
<td>娜塔莎·罗曼诺夫</td>
<td>性感</td>
<td><img src="./BlackWidow.jpg" alt="黑寡妇" width="300"></td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- colsspan：很横跨n列 -->
<td colspan="4">上述资料均为小甲鱼个人主观臆断，非官方资料，仅供娱乐！</td>
</tr>
</tfoot>
</table>
</body>
</html>
在这里插入图片描述
使用 rowspan 元素实现跨行：
<!DOCTYPE html>
<html>
<head>
<title>第十四节课</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
</style>
</head>
<body>
<table>
<!-- 中间列纵跨三行 -->
<tr>
<td>1</td>
<td rowspan="3">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>9</td>
</tr>
</table>
</body>
</html>
在这里插入图片描述
使用 colgroup 标签批量设置单元格样式：
<!DOCTYPE html>
<html>
<head>
<title>第十四节课</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
</style>
</head>
<body>
<table>
<!-- 将第 1 列的背景颜色设置为红色 -->
<!-- 将第 2、3 列的背景颜色设置为绿色 -->
<colgroup>
<col style="background: red">
<col span="2" style="background: green">
</colgroup>
<tr>
<td>1</td>
<td rowspan="3">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>9</td>
</tr>
</table>
</body>
</html>
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2026-01-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号