HTML表格标签的案例

最新推荐文章于 2025-03-26 13:48:46 发布
最新推荐文章于 2025-03-26 13:48:46 发布
阅读量2.6k 收藏 19
点赞数 10
分类专栏： HTML5 文章标签： 开发语言 前端 大前端 html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45904557/article/details/123156973
版权

前言

上一篇是表格的基本结构标签和一些属性以及怎么样合并单元格，这篇博客就来具体练习一下table的使用

1.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			td{
				text-align: center;
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="60px">
			<tr>
				<td>名次</td>
				<td colspan="3">分数</td>
				<td>总分</td>
				<td>奖金</td>
			</tr>
			<tr>
				<td>第一名</td>
				<td>80</td>
				<td>90</td>
				<td>100</td>
				<td>270</td>
				<td>200</td>
			</tr>
			<tr>
				<td>第二名</td>
				<td>95</td>
				<td>85</td>
				<td>95</td>
				<td>275</td>
				<td>230</td>
			</tr>
			<tr>
				<td colspan="5">奖金总计</td>
				<td>430</td>
			</tr>
		</table>
	</body>
</html>

 

2.

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1 style="letter-spacing:7px;" align="center">四年级3班&ensp;课程表</h1>
		<table border="1"   cellspacing="0" height="600px" align="center">
			<tr>
				<td colspan="2"></td>
				<td valign="top">星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
			</tr>
			<tr>
				<td rowspan="5">&ensp;上<br>午</td>
				<td>7:50--8:20</td>
				<td valign="top">单老师</td>
				<td valign="top">单老师</td>
				<td valign="top">唐老师</td>
				<td valign="top">凌老师</td>
				<td valign="top">单老师凌<br>老师</td>
			</tr>
			<tr>
				<td>8:20--8:35</td>
				<td colspan="5" align="center">晨会课</td>
			</tr>
			<tr>
				<td>8:40--9:20</td>
				<td>数学</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>音乐</td>
			</tr>
			<tr>
				<td>9:30--10:10</td>
				<td>英语</td>
				<td>数学</td>
				<td>体育</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>10:35--11:20</td>
				<td>英语</td>
				<td>语文</td>
				<td>数学</td>
				<td>语文</td>
				<td>综合2</td>
			</tr>
			<tr>
				<td></td>
				<td>中自习</td>
				<td>单老师</td>
				<td>卞老师</td>
				<td>凌老师</td>
				<td>凌老师</td>
				<td>凌老师</td>
			</tr>
			<tr>
				<td rowspan="5">下<br>午</td>
				<td>综合1</td>
				<td>英语</td>
				<td>英语</td>
				<td>综合1</td>
				<td>语文</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>1：00--1:40</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
			</tr>
			<tr>
				<td>1：50--2:35</td>
				<td>综合3</td>
				<td>数学</td>
				<td>数学</td>
				<td>数学</td>
				<td>数学</td>

			</tr>
			<tr>
				<td>2:45--3:25</td>
				<td>品德与社<br>会</td>
				<td>体育</td>
				<td>品德与社<br>会</td>
				<td>班队</td>
				<td>科学</td>
			</tr>
			<tr>
				<td>3:40-4:00</td>
				<td colspan="5" align="center">兴趣课</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td>唐老师</td>
				<td>单老师</td>
				<td></td>
				<td>卞老师</td>
				<td>卞老师</td>
			</tr>
		</table>
	</body>
</html>

 

3.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
td{
	text-align: center;
	
}
		</style>
	</head>
	<body>
		<table border="1"  cellspacing="0" width="400px" rules="all">
			<tr bgcolor="lawngreen">
				<td colspan="2">星期</td>
				<td>一</td>
				<td>二</td>
				<td>三</td>
				<td>四</td>
				<td>五</td>
			</tr>
			
			<tr bgcolor="yellow">
				<td colspan="7">早读</td>
			</tr>
			<tr>
				<td rowspan="4" bgcolor="hotpink">上午</td>
				<td bgcolor="hotpink">1</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td bgcolor="hotpink">2</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td bgcolor="hotpink">3</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td bgcolor="hotpink">4</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr bgcolor="yellow">
				<td colspan="7" >午休</td>
			</tr>
			<tr>
				<td rowspan="4" bgcolor="hotpink">下午</td>
				<td bgcolor="hotpink">5</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td bgcolor="hotpink">6</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td bgcolor="hotpink">7</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td bgcolor="hotpink">8</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr bgcolor="yellow">
				<td colspan="7">晚修</td>
			</tr>
		</table>
	</body>
</html>

 

4.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			tr{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<p align="center" style="font-size: 32px;">产品价格</p>
		<table border="" cellspacing="0" cellpadding="40" rules="rows" width="1000px">
			<tr bgcolor="#d5ebeb">
				<th>套餐名称</th>
				<th>查询次数</th>
				<th>调用频率</th>
				<th>有效时间</th>
				<th>价格</th>
			</tr>
			<tr>
				<td>试用套餐</td>
				<td>500次</td>
				<td>2次/秒</td>
				<td>1月</td>
				<td>0元</td>
			</tr>
		</table>
	</body>
</html>

 

5.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h3 align="center">课程表</h3>
		<table border="3" bordercolor="royalblue" align="center">
			<tr>
				<td>项目</td>
				<td colspan="5">上课</td>
				<td colspan="2">休息</td>
			</tr>
			<tr>
				<th bgcolor="pink">星期</th>
				<th bgcolor="pink">星期一</th>
				<th bgcolor="pink">星期二</th>
				<th bgcolor="pink">星期三</th>
				<th bgcolor="pink">星期四</th>
				<th bgcolor="pink">星期五</th>
				<th bgcolor="pink">星期六</th>
				<th bgcolor="pink">星期日</th>
			</tr>
			<tr>
				<td rowspan="4">上午</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td rowspan="4">休息</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>数学</td>
				<td>数学</td>
				<td>数学</td>
				<td>数学</td>
				<td>数学</td>
			</tr>
			<tr>
				<td>英语</td>
				<td>英语</td>
				<td>英语</td>
				<td>英语</td>
				<td>英语</td>
				<td>英语</td>
			</tr>
			<tr>
				<td>化学</td>
				<td>化学</td>
				<td>化学</td>
				<td>化学</td>
				<td>化学</td>
				<td>化学</td>
			</tr>
			<tr>
				<td  rowspan="2">下午</td>
				<td>地理</td>
				<td>地理</td>
				<td>地理</td>
				<td>地理</td>
				<td>地理</td>
				<td>地理</td>
				<td  rowspan="2">休息</td>
			</tr>
			<tr>
				<td>计算机</td>
				<td>计算机</td>
				<td>计算机</td>
				<td>计算机</td>
				<td>计算机</td>
				<td>计算机</td>
			</tr>
		</table>
	</body>
</html>

 

总结

以上就是五个关于表格的案例更新，多看多写

HTML（的简单表格）的案例
ChengMeng11的博客
03-07 3240
1、简单的表格 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="2" width="400px" ...
Web前端学习（HTML）学习---下（表格标签，列表标签，表单标签）案例
weixin_67900732的博客
07-05 5758
Web前端学习（HTML）学习---下（表格标签，列表标签，表单标签）案例看完绝不后悔。
HTML表格代码的示例
12-20
这是利用HTML表格代码制作出来的一个表格。
HTML表格（table）实例
热门推荐
hj1993的博客
07-30 5万+
HTML表格（table）实例 实例1：课程表 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;课程
零基础HTML表格制作：手把手教你创建规范数据表（附企业级案例）
最新发布
2502_90908307的博客
03-26 343
∩是交集，∪是并集，∩∪是病娇，这是表格合并的教程。
HTML 表格实例
Zyyss1993的博客
11-12 500
1.表格这个例子演示如何在 HTML 文档中创建表格。 <p>每个表格由 table 标签开始。</p><p>每个表格行由 tr 标签开始。</p><p>每个表格数据由 td 标签开始。</p> <h4>一列：</h4><table border="1"><tr> ...
HTML_表格实例
Twilight's Blog
01-01 1万+
html表格的几种形式
HTML超详细--表格标签+相应案例（小说排行榜+三样表格合并）
weixin_45586870的博客
09-29 1362
一、表格标签 表格不是用来布局页面的,而是用来展示数据的。 1.1.表格的具体用法： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 1.<table> </table> 是用于定义表格的标签。 2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <tab
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2515
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
06_表格-表格的案例01.html
10-09
标题中所提到的“06_表格-表格的案例01.html”，很可能是一个关于HTML表格基础使用的教学案例。该文件名暗示了它可能是系列教学材料中的第一个实例，用于教授如何创建和操作基本的HTML表格。 从“表格的案例01”这...
06_表格-表格的案例02(重构).html
10-09
3. 提高代码效率：在HTML表格中，避免过多的嵌套和空的表格标签，使用内联样式或外部CSS来管理样式信息，以提高代码的可维护性。 4. 适应不同设备：随着移动设备的普及，网页设计需要在不同的屏幕尺寸上表现良好。...
案例：动态生成表格.html
06-09
动态生成删除表格，没有相关的数据库，主要是存在数组里面的数据来进行删除，设计的重点主要是对节点的操作
HTML5图表案例，表格+饼图
12-11
js+HTML5，表格可与饼图交互,适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
[html]表格实例
qq_37301470的博客
11-06 629
[html]表格实例 一：没有边框的表格（border=0） <!DOCTYPE html> <html> <head> <title>表格</title> </head> <body> <table border="0"> <th>wtf</th> <tr> <td>100</td> <td>200</td&
HTML+CSS之表格(15个案例+代码+效果图+素材)
2301_76862031的博客
10-05 7842
案例:编写一个简单的网页；制作一个带边框的表格，制作一个带边距的表格，制作一个指定宽高的表格，表格内容居中，为table添加背景色，设置行高，使表格内容垂直居中 table属性,border,cellspacing,cellpadding,width,height,align,bgcolor,
HTML 制作表格案例
CodeDoraemon的博客
01-23 1768
1. 运行要求 2. 示例代码 <!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>
html 表格实例
Reborn_s的博客
10-23 445
table{ width: 100%; border-collapse:collapse;} th,td{ border-width:1px; border-collapse:collapse; border-color:#000; border-style:solid; text-align: center; lin
html 表格的例子
fanpeii的专栏
09-24 1084
这个算是我第一个长代码的网页，主要功能是对 命令的熟悉，其中 border 是边框的属性。 cellspacing 指的是行之间的文字，相距的距离。 cellpadding 值得是列之间的文字，相距的距离。 align 是对象的位置
html table 示例,HTML表格实例
weixin_33533797的博客
06-05 1035
表格实例每个表格由 table 标签开始。每个表格行由 tr 标签开始。每个表格数据和英文由 td 标签开始。每个表格汉子由 th 标签开始。这是一个段落。这是另一个段落。这个单元包含一个表格：三行三列:思思的表格姓名电话2112你好31这个单元包含一个列表：11香蕉菠萝HELLO运行结果WechatIMG101.pngWechatIMG100.png单元格边距、间距、背景颜色、排列没有 cel...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值