使用HTML和CSS创建一个表格，方便调用

最新推荐文章于 2024-03-18 18:50:29 发布
最新推荐文章于 2024-03-18 18:50:29 发布
阅读量1.1w 收藏 43
点赞数 9
分类专栏： 笔记 文章标签： HEML CSS 简单表格项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iO747254055/article/details/81133857
版权

虽然用bootstrap可以很方便快捷的创建一个table表格，

但是对于初学者来说，学会如何用HTML和CSS创建一个好看的表格还是很有意义的。

第一张

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<link rel="stylesheet" href="table_1.css">
</head>
<body>
	<table class="mt">
		<thead>
			<tr>
				<td>标题</td>
				<td>标题</td>
				<td>标题</td>
				<td>标题</td>
				<td>标题</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
			</tr>
			<tr>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
			</tr>
			<tr>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
			</tr>
			<tr>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
			</tr>
			<tr>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
				<td>表格内容</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

首先是HTML的代码

已经在head里面link到了table_1.css

代码格式一定要规范
我使用的是sublime，装了emmet插件，可以很方便的用以下代码来创建一个表格
比如我要创建一个3行4列的表格
tbody>tr*3>td{表格内容}*4
第一个表格里面我并没有使用th标签
  
table.mt {
	width: 1000px;
	border-spacing: 0px;
	border-right:1px solid #aaa;
	border-bottom:1px solid #aaa;
}
table.mt td {
	border-left:1px solid #aaa;
	border-top:1px solid #aaa;
	padding:10px;
}
table.mt thead tr {
	background: #339;
	color: #fff;
}
table.mt tbody tr:nth-child(even) {
	background: #eee;
}
table.mt tbody tr:hover {
	background: #ccc;
	color: #fff;
}

然后就是table_1.css的代码。

先把border-spacing设置为0；

然后设置整个table.mt的右和下边框，再设置所有td的左和上边框，这样刚好设置了整张表格的边框线

第二张

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="table_2.css">
</head>
<body>
	<div id="box">
		<div id="box_p">
			<p>这是一个大标题</p>
		</div>
		<table class="mt">
			<thead>
				<tr>
					<td>标题</td>
					<td>标题</td>
					<td>标题</td>
					<td>标题</td>
					<td>标题</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
				</tr>
				<tr>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
				</tr>
				<tr>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
				</tr>
				<tr>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
				</tr>
				<tr>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
				</tr>
				<tr>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
				</tr>
				<tr>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
					<td>table内容</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

第二张表格也没有用th标签

* {
	padding: 0px;
	margin: 0px;
	font-family: 微软雅黑;
}
#box {
	border:1px solid #bbb;
	margin: 50px auto;
	width: 620px;
}
#box_p {
	width: 400px;
	position: relative;
	left: 50%;
	margin-left: -200px; 
}
#box_p p {
	text-align: center;
	padding: 10px 0px 0px 0px;
	font-size: 25px;
	font-weight: bold;
	color: #999;
}
table.mt {
	width: 580px;
	margin: 15px 20px 20px 20px;
	border-top: 1px solid #EFD3D2;
	border-spacing: 0px;
	color: #B06A68;
}
table.mt thead tr td,table.mt tbody tr td {
	border-bottom: 1px solid #EFD3D2;
	padding: 10px 20px;
}
table.mt thead tr td {
	font-weight: bold;
}
table.mt tbody tr:nth-child(even) {
	background: #EFD3D2;
}

把整张表格放进了一个盒子中

设置了一个#box_p的盒子居中

第三张表格

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="table_3.css">
</head>
<body>
	<div id="box">
		<table class="mt">
			<thead>
				<tr>
					<caption>标题</caption>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>内容</td>
					<td>内容</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>内容</td>
					<td>内容</td>
					<td>内容</td>
				</tr>
				<tr>
					<td>内容</td>
					<td>内容</td>
					<td>内容</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

第三章表格用了caption标签来写一个大标题

* {
	padding: 0px;
	margin: 0px;
	font-family: 微软雅黑;
}
#box {
	border:1px solid #bbb;
	margin: 50px auto;
	width: 340px;
	background: #fff;
}
table.mt caption{
	font-size: 20px;
	font-weight: bold;
}
#box_p {
	width: 400px;
	position: relative;
	left: 50%;
	margin-left: -200px; 
}
#box_p p {
	text-align: center;
	padding: 10px 0px 0px 0px;
	font-size: 25px;
	font-weight: bold;
	color: #999;
}
table.mt {
	width: 300px;
	margin: 15px 20px 20px 20px;
	border-top: 1px solid #EFD3D2;
	border-spacing: 0px;
	color: #B06A68;
}
table.mt thead tr td,table.mt tbody tr td {
	border-bottom: 1px solid #EFD3D2;
	padding: 10px 20px;
	text-align: center;
}
table.mt thead tr td {
	font-weight: bold;
}
table.mt tbody tr:nth-child(even) {
	background: #eee;
}
table.mt tbody tr td:hover {
	background: #DFD8E8;
}

第三张表格的css。

为tbody里面的tr写了hover效果

总结：

最重要的：格式一定要规范！

用table.mt来框住thead和tbody还可以有tfoot,

这样的话只要创建一个table，设置class为mt，就可以随意调用上面任何一个table.css的样式。

HHLideng
关注
  • 9
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web开发表格建立
03-12
表格的建立，以及改变表格的背景颜色，字体大小，边框修饰
表格(html+CSS)
qq_43701213的博客
09-04 215
* 3.td,table均设置border,且cellspacing="0" */3.td,table均设置border,且cellspacing=“0”/* 4.合并相邻的边框，使重叠的地方变细,且补充上表头单元格 *//* 1.只有table有边框 *//* 2.只有td单元格有边框 */4.合并相邻的边框，使重叠的地方变细。1.只有table有边框。2.只有td单元格有边框。
HTML表格（HTML 表格的使用，收藏这一篇就够了）
最新发布
u013179804的博客
03-18 3575
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。今天聊聊 table。HTML元素用于创建表格，它是一种将数据按行和列组织排列的结构，用于在网页中呈现复杂的数据集。HTML 表格具有以下 2 种主要用途：1、最常见的用途是以表格形式展示数据，如产品价格、学生成绩、电影时间表等。表格可以清晰地展示数据的结构和关系。2、表格可以用于创建网页表单，通过在表格单元格中放置表单控件（如文本框、复选框、下拉菜单等），用户可以方便地输入数据。
纯css打造漂亮的html表格
热门推荐
house_of_web的博客
04-14 3万+
纯css漂亮表格制作兼容各种版本浏览器
Day01-HTML
jjizh的博客
06-06 403
Day01-HTML
CSS样式表
SignalFire的博客
01-21 2240
一 CSS文字属性： color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/
漂亮的表格css+html
06-27
一个很好的表格html代码，里面包含了大量的css表格类型，界面清晰、清爽、相当的漂亮！@
html css表格制作,CSS 表格(Table)
weixin_34357614的博客
06-20 1565
CSS 表格使用CSS可以大大提高HTML表格的外观，下表是通过CSS制作的表格。CompanyContactCountryAlfreds FutterkisteMaria AndersGermanyBerglunds snabbköpChristina BerglundSwedenCentro comercial MoctezumaFrancisco ChangMexicoErnst Hande...
HTML 表格+CSS
星辰_大海的博客
06-11 230
id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="para1":&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;
web表格制作
H_zhiyi的博客
08-20 1万+
1.表格的制作 1、表格元素–<table> 表格中的行–<tr> 表格中的列–<td> 表格中的表头–【居中/加粗】 table标记的边框–border table标记的宽度–width table标记的高度–height table标记的水平对齐方式–align table标记的表格背景色–bgcolor table标记的表格边框色–bordercolor table标记的表格中的内容与边框之间的距离–cellpadding table标记的表格中的边框与边框之间的距
精通HTML5+CSS3+JavaScript网页设计.z01
02-02
精通HTML5+CSS3+JavaScript网页设计是网页设计的精髓的一本书，《精通HTML5 + CSS3+JavaScript网页设计》以应用实例和综合实战案例的形式逐一详解了HTML5网页设计的文档结构、文本、图像、用HTML5创建超链接、表格、...
JavaScript动态生成表格的示例
01-18
通过JS来写动态的表格（有多少组数据，就自动创建多少行表格） 为学习和演示，采用固定的数据，不涉及调用后台数据 代码实现： HTML内容： 姓名 科目 成绩 操作 <tbody></tbody> CSS内容： table ...
Tic_tac_toe:我的第一个项目
05-31
##我是如何做到这一点的，我从创建 HTML 骨架和 CSS 样式开始。 这让我能够决定如何创建盒子和知道我在做什么。 这是我第一次使用标签，它最终工作得很好——很容易将所有内容分成行和列。 对于我的javaScript / ...
pisensors:一个显示Raspberry Pi输出的传感器的Web应用程序
05-15
Pi传感器 我房间的温度是多少？ 我需要给植物浇水吗？... 对于前端，除了HTML ， Javascript和CSS之外，我还使用Jade生成页面。 安装 安装Node.js + npm sudo apt-get install node 选择一个适当的目录并克隆
PHP和MySQL Web开发第4版pdf以及源码
10-13
1.2 创建一个示例应用：Bob汽车零部件商店 1.2.1 创建订单表单 1.2.2 表单处理 1.3 在HTML中嵌入PHP 1.3.1 使用PHP标记 1.3.2 PHP语句 1.3.3 空格 1.3.4 注释 1.4 添加动态内容 1.4.1 调用函数 1.4.2 使用...
[Python从零到壹] 四.网络爬虫之入门基础及正则表达式抓取博客案例
杨秀璋的专栏
09-30 2万+
欢迎大家来到“Python从零到壹”，在这里我将分享约200篇Python系列文章，带大家一起去学习和玩耍，看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解，真心想把自己近十年的编程经验分享给大家。第四篇文章将开启网络爬虫之旅，首先介绍基础知识及正则表达式的爬虫，希望对您有所帮助，文章中不足之处也请海涵。
HTML——table表格总结
weixin_68917948的博客
03-31 75
table表格总结
day2html相关内容
qq_45801179的博客
11-12 101
0.作业 熟悉HTML文件结构，并练习基本标签使用。 //搜索引优化关键字 <title> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <meta name="keyw
写一个使用js，html，css编写的后台监视窗口
08-16
### 回答1： 这是一个简单的后台监视窗口例子，使用了 JavaScript，HTML 和 CSS 来实现。 HTML 部分： ```html <div id="monitor"> <div id="data">Loading...</div> </div> ``` CSS 部分： ```css #monitor { width: 800px; height: 600px; background-color: #f1f1f1; padding: 20px; box-sizing: border-box; } ``` JavaScript 部分： ```javascript setInterval(function() { // 模拟请求后台数据 var data = { "cpu": Math.random(), "memory": Math.random(), "network": Math.random() }; // 更新页面数据 document.getElementById("data").innerHTML = JSON.stringify(data); }, 1000); ``` 请注意，这只是一个简单的例子，只是模拟了请求后台数据并将其显示在页面上，实际应用中还需要进行许多其他操作，如错误处理，页面布局等。 ### 回答2： 使用js，html，css编写后台监视窗口可以如下实现： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>后台监视窗口</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="monitor"></div> <script src="script.js"></script> </body> </html> ``` CSS部分（style.css）： ```css #monitor { width: 800px; height: 400px; background-color: #f2f2f2; border: 1px solid #ccc; padding: 10px; overflow-y: auto; } .log-entry { margin-bottom: 5px; padding: 3px; border-left: 2px solid #ccc; } ``` JavaScript部分（script.js）： ```javascript var monitor = document.getElementById("monitor"); function log(message) { var entry = document.createElement("div"); entry.className = "log-entry"; entry.textContent = message; monitor.appendChild(entry); monitor.scrollTop = monitor.scrollHeight; } // 示例：每隔一秒输出当前时间 setInterval(function() { var date = new Date(); log("当前时间：" + date.toLocaleString()); }, 1000); ``` 上述代码中，HTML部分包含一个 `<div>` 元素，用于显示日志信息。CSS部分定义了监视窗口和日志条目的样式。JavaScript部分定义了一个 `log` 函数，用于输出日志信息到监视窗口中，并示例每隔一秒输出当前时间。 当页面加载完成时，会执行设置的定时器，每隔一秒调用 `log` 函数输出当前时间到监视窗口中。使用 `setInterval` 函数和 `Date` 对象可以动态地更新监视窗口的内容。 以上是一个简单的后台监视窗口示例，你可以根据实际需求添加更多的功能和样式。 ### 回答3： 后台监视窗口是一个用于监控和显示后台处理数据和运行状态的实时窗口。使用JS、HTML和CSS编写的后台监视窗口可以通过以下步骤完成： 第一步是创建HTML结构。可以使用div元素创建一个包含监视信息的容器，并设置其样式和位置。可以使用HTML表格元素创建一个表格，用于显示数据的列和行。 第二步是使用CSS样式文件对监视窗口进行样式设置。可以为容器和表格设置背景颜色、边框样式、字体样式等。 第三步是使用JavaScript编写脚本，实现数据的获取和显示。可以使用AJAX技术向后台发送请求，获取数据。然后，可以使用DOM操作将数据插入到监视窗口的表格中，并更新显示。 在脚本中，还可以设置定时器，定期更新数据和显示，以保持监视窗口的实时性。可以使用通过修改DOM元素的样式，实现动态效果，例如改变颜色、闪烁等来表示不同的状态。 最后，可以在后台程序中处理和发送需要监视的数据，例如CPU使用率、内存占用、磁盘空间等。根据需要，可以在监视窗口中显示这些数据，并进行适当的处理、格式化和可视化。 通过以上步骤，一个使用JS、HTML和CSS编写的后台监视窗口就可以实现了。这个监视窗口可以随时显示后台处理的数据和状态信息，为系统的运行提供实时监控和可视化显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值