零基础学习HTML(13)——table标签（下）

最新推荐文章于 2024-04-05 17:36:11 发布
最新推荐文章于 2024-04-05 17:36:11 发布
阅读量322 收藏
点赞数
分类专栏： 零基础学习Web开发 文章标签： html css web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43650934/article/details/108118959
版权

文章目录


注：学习笔记基于小甲鱼学习视频，官方论坛： 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>

在这里插入图片描述

Dragon水魅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-table表格详解
主营前端方向，技术栈是vue
11-17 2万+
table表格(结构设置tr行、td列，rowspan纵合并colspan横合并,spacing边距collapse边框合并，thead表头tbody表体tfoot表底，补充)
HTML基础——table标签
NCU_tanghulu的博客
08-01 2680
HTML基础之table标签 一、定义 表格是网页中十分重要的组成元素。表格用来存储数据。表格包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格仅使用<table>是不够的，还需要定义表格中的行、列、标题等内容。在HTML页面中定义表格，需要学会以下几个标记。 1.表格标记<table> <table>...</table> 标记表示整个表格。<table> 标记中有很多属性，例如width属性用
html table 样式_html基本语法与语义写法规则详解
weixin_39542111的博客
11-03 142
本文主要为了初学者遇到基本语法不理解意思，语义写法规则不懂，下面就有详细的解释，另外小编还有一个web交流学习群，都是刚学习前端的小伙伴，大家一起交流，学习，讨论，每天还分享资料笔记视频，欢迎大家的加入点击进入1045267283DOCTYPEDOCTYPE(Document Type)该声明位于文档中最前面的位置，处于html标签之前，此标签告知浏览器文档使用哪种HTML或者 XHTML规范。D...
零基础学习HTML(12)——table标签（上）
qq_43650934的博客
08-17 995
文章目录官方资料学习正文 注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php 官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 table标签：https://man.ilovefishc.com/pageHTML5/table.html &l
05_css特性及html列表、表单、表格元素
qq_45131163的博客
07-21 266
一、css特性 1、继承 一个元素如果有设置某属性的值，就使用自己设置的值（不论是网页设置的，或者父元素设置的） 一个元素如果没有设置某属性的值，就会跟随父元素的值 img{ /*width: 100%*/ /*百分比相对于包含其的版块*/ width: inherit; /*with不支持继承，可查阅文档mdn，inherit强制继承 */ } 不能继承的属性，一般可以使用inherit值强制继承父元素的值 继承注意点： css属性继承的是计算值，并不是当初编写属性是的
Html为表格添加标题和摘要
热门推荐
sang_12345的博客
07-31 1万+
1.添加摘要  语法：&lt;table summary="表格简介文本"&gt; 2.添加标题   语法： &lt;table&gt; &lt;caption&gt;标题文本&lt;/caption&gt; &lt;tr&gt; &lt;td&gt;…&lt;/td&gt; &lt;td&gt;…&am
前端学习笔记一一HTML表格标签（table）(2)，零基础学习web前端
最新发布
2201_75294326的博客
04-05 405
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。所以看完之后，还是多多行动起来吧！
JavaWeb——HTML基础标签table标签与form标签的学习与理解
01-08
table标签是表格标签， border属性设置表格的边框厚度， width属性设置表格的宽度， align设置表格的对齐方式， cellspacing设置单元格的间距 tr是行标签， td是单元格标签， th是字体居中加粗的单元格标签, b是字体...
前端学习笔记——table表格的创建Html基础
asdfghjilp的博客
04-17 1166
文章目录一、table数据表格的基础创建二、table表格的相关属性三 、table tr td属性设置 一、table数据表格的基础创建 <table> <!-- 创建表格 --> <tr> <!-- tr 表示行 --> <td>1</td> <!-- td表示列 --> <td>2</td> </tr> <tr>
day 13学习Python——学习html基础知识2
weixin_50758400的博客
09-08 302
超链接的高级用法、标签、打开本地页面、本页面跳转、列表、input、多行文本框和下拉、下拉菜单、表格标签。
HTML基础（七）——表格标签
Cain
02-06 228
文章目录表格标签caption标签标题单元格合并单元格 表格标签 作用：给一堆数据添加表格语义。顾名思义，就是类似表格的形式展现。 格式： <table> <tr> <td></td> </tr> </table> 一个table就是整个表格，一个tr就是一行，一个td就是一个单元格 注意： 表格标签有一个边框属性，这个属性决定了边框的宽度，默认情况下这个属性值是0，所以没有设置时看不见边框 caption标签 专
HTML table标签，css样式，caption标签，标题及摘要的语法解析
xinianbuxiu的博客
12-06 9287
一、table标签，网页上的表格 有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表： 想在网页上展示上述表格效果可以使用以下代码： 创建表格的五个元素： table、tbody、tr、th、td 1、…：整个表格以标记开始、标记结束。 2、…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载
HTML table、form表单标签的介绍
#维多利亚的秘密#
08-07 775
1. 标签 1.1说明： 在HTML 中定义表格布局。 1.2格式： table> 　　caption>caption> 　　tr> th>th>tr> 　　tbody> 　　　　tr>td>td>tr> 　　　　tr>td>td>tr> 　　tbody> table> 1.3包含的元素有： ：表头信息。 ：定义一个表格行；
HTML中table的数据标识设置,表格(TABLE)标记(TAGS)详细介绍
weixin_28756005的博客
06-05 462
表格的基本语法... - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据)带边框的表格：复制代码代码如下:FoodDrinkSweetABCFoodDrinkSweetABC不带边框的表格：复制代码代码如下:FoodDrinkSweetABCFoodDrinkSweetABC跨多行、多列的表元(Table Span)跨多列的表元 复制代码代码如下: Morning MenuFo...
html中table标签及属性
m0_45272038的博客
07-07 5923
table表格 HTML表格由table标签以及多个tr、th和td标签组成 table表示表格，整个表格要包含在<table></table>标签中 tr表示表格中的行，是单元格的容器，一行可以包括多个单元格 th表示表格中的单元格，我理解为列,th放在tr内表示这一行为标题行，其中的字体会默认粗体居中显示 td表示表格中的单元格，我理解为列，td也要放在tr内，可以理解为内容行 tfoot表示表格最后一行 <table>是<tr的上层标签 <tr>
表格(TABLE)标记(TAGS)
jangdong的专栏
01-16 861
表格的基本语法 ... - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据) 带边框的表格： FoodDrinkSweet ABC Food Drink Sweet A B C 不带边框的表格： FoodDrinkSweet ABC Food Drin
html文字纵向导航栏,JS+CSS实现另类带提示效果的竖向导航菜单
weixin_42524703的博客
06-02 1051
本文实例讲述了JS+CSS实现另类带提示效果的竖向导航菜单。分享给大家供大家参考。具体如下：这是一款JS+CSS打造另类带提示的竖向导航菜单，觉得挺不错，只是美工水平有限，有兴趣的朋友就请继续完善吧。运行效果截图如下：在线演示地址如下：具体代码如下：带提示的竖向导航菜单#coolmenu{border: 1px solid black;width: 160px;background-color: ...
海报css_如何使用HTML和CSS为《复仇者联盟：无限战争》制作海报
07-18 1485
海报cssby Kunal 由Kunal 如何使用HTML和CSS为《复仇者联盟：无限战争》制作海报 (How to make a poster for Avengers: Infinity War in HTML and CSS) In this post, we are going to make a movie poster of “Avengers: Infinity War” in ...
传智播客.NET视频学习课件——HTML基础加强
同时，了解如何使用表格（`<table>`）、列表（`<ul>`和`<ol>`）以及表单元素（`<form>`、`<input>`、`<button>`等）也是基础学习的重要部分。 HTML和CSS的结合使用能够实现网页的布局和美化。CSS通过选择器定位HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值