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

最新推荐文章于 2024-06-13 01:26:35 发布
最新推荐文章于 2024-06-13 01:26:35 发布
阅读量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
    评论
专栏目录
漂亮的表格css+html
06-27
一个很好的表格html代码，里面包含了大量的css表格类型，界面清晰、清爽、相当的漂亮！@
html css表格制作,CSS 表格(Table)
weixin_34357614的博客
06-20 1596
CSS 表格使用CSS可以大大提高HTML表格的外观，下表是通过CSS制作的表格。CompanyContactCountryAlfreds FutterkisteMaria AndersGermanyBerglunds snabbköpChristina BerglundSwedenCentro comercial MoctezumaFrancisco ChangMexicoErnst Hande...
CSS入门到精通——表格样式
最新发布
m0_73614626的博客
06-13 782
在实际情况中，我们可以根据需求设置表格对齐方式。设置表格中文字对齐的方式，与设置段落文字对齐的方式相同，都是使用。表格颜色设置十分简便，与设置文字颜色的方式相同。设置表格样式，使表格更优美。同样的，设置表格文字粗细与设置段落文字粗细相同，都是使用。设置表格样式，使表格更好看。设置表格样式，使表格更好看。但是，这样设置的通讯录表格有双边框。表格才会看起来更符合我们平时使用的表格。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。
HTML 表格+CSS
星辰_大海的博客
06-11 251
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标记的表格中的边框与边框之间的距
HTML_CSS学习：表格、表单、框架标签
m0_74972727的博客
03-21 715
【代码】HTML_CSS学习：表格、表单、框架标签。
Streamit:使用HTML和CSS的简单音乐流应用程序
05-13
Streamit是一个基于HTML和CSS构建的简单音乐流应用程序，它为用户提供了一个轻量级的平台来在线播放音乐。HTML（超文本标记语言）是网页内容的基础结构，而CSS（层叠样式表）则负责这些内容的呈现和布局，使得用户...
Medical-Receipt:使用 HTML、CSS 和 Javascript 开发
07-24
4. **打印功能**：添加一个按钮，点击后直接调用浏览器的打印功能，方便用户打印收据。 5. **表单提交**：处理用户提交收据信息的请求，可能包括存储数据到数据库或发送邮件给患者。 在名为"Medical-Receipt-main...
html，css和js写的登录与注册界面
10-18
本项目提供的"登录与注册界面"是一个良好的起点，可以帮助初学者了解HTML、CSS和JavaScript在实际项目中的应用。通过阅读和修改代码，你可以了解到如何将这三个技术结合起来，构建出具有实际功能的Web界面。同时，这...
ConstellationsWebpage:一个网页，其中包含有关使用HTML，CSS和JavaScript的著名星座的一些信息
05-27
综上所述，"星座网页"项目涉及了HTML、CSS和JavaScript的基础应用，以及响应式设计、动态交互、数据展示和性能优化等多个方面，是一个综合性的网页开发实践。通过这个项目，开发者不仅可以提升网页制作技能，还能...
web开发表格建立
03-12
表格的建立，以及改变表格的背景颜色，字体大小，边框修饰
html css js网页设计.doc
04-29
- **高效管理**：通过外部样式表，可以在多个页面间共享样式，方便管理和维护。 3. **高级特性**： - **布局技术**：Flexbox 和 Grid 提供了更灵活的布局方式。 - **动画效果**：使用 CSS3 的 `transition` 和 `...
使用HTML创建强大的表格
CSDN blog of twy
11-12 526
表格的基本标记——table、tr、td 表格宽度和高度——width、height 表格的标题——caption（默认情况下，大部分可视化浏览器在表格的上方中央显示表格的标题） 表格的表头——th 表格对齐方式——align（left、right、center） 表格的边框宽度——border 表格边框颜色——bordercolor 单元格间距——cellspacing（单元格外）...
WEB基础之：创建表格
f_carey的博客
11-23 3045
创建表格1. 表格的基本结构2. 表格基本属性3. 表格的行属性4. 单元格属性5. 表格的结构 1. 表格的基本结构 1) 表格的基本结构 <table> <tr> <td>表格第一行第一个单元格</td> <td>表格第一行第二个单元格</td> </tr> <tr> <td&
HTML5＋CSS简单表格新手练习
qq_47751331的博客
05-12 616
附上源代码：(仅供参考，并非完美答案） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border:2px solid #122aff; width: 900px; ...
【HTML】如何使用html制作一个简易的表格？
萌萌白白的博客
02-16 9583
如何使用html制作一个简易的表格
HTML5+CSS3 ——【笔记】5、表单和表格（完结）
计算机程序定制、毕业项目
07-07 387
表格，表单的创建、表格表单标签，table标签、tr标签、th标签、td标签、表格结构;CSS控制表格样式，CSS控制表格边框、高和宽；input控件、textarea控件、select控件、全新的form属性、全新的表单控件、全新的input控件类型、全新的input控件属性、autofocus属性、form属性、list属性、multiple属性、min、max和step属性、pattern属性、placeholder属性、required属性、CSS控制表单样式 等知识点.......
HTML5+CSS3网页设计从基础到入门——表格标签
m0_65563303的博客
05-15 337
表格标签 1.表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用就显得很重要，一个清爽简约的表格能够把繁杂的数据表现的很有条理。所以说表格不是用来页面布局的，而是...
使用html+css+js实现一个好看的学生信息管理系统
04-05
2. 使用HTML和CSS创建页面布局和样式，将各种界面元素添加到页面中，并设置不同的样式。 3. 使用JavaScript编写交互逻辑，包括表格的排序、筛选、分页等功能，以及添加、删除、修改学生信息的操作。 4. 后端需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值