CSS-设置表格样式

最新推荐文章于 2024-08-02 14:18:20 发布
最新推荐文章于 2024-08-02 14:18:20 发布
阅读量3.2k 收藏 16
点赞数 4
分类专栏： CSS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc098818/article/details/99408352
版权

1、设置表格的边框
Border：设置表格边框；
Border-collapse：设置边框分离，合并 默认是 separate(分离) collapse 合并；
Border-spacing ：设置单元格的间距；
Padding：设置单元格内容和边框之间的距离；


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格的边框</title>
<style type="text/css">
	.t{
		border: 1px gray solid;
		border-spacing: 0px;
		border-collapse: collapse;
	}
	
	.t td{
		border: 1px gray solid;
		padding: 5px;
	}
	
	.t th{
		border: 1px gray solid;
		padding: 5px;
	}
</style>
</head>
<body>
	<table class="t">
		<caption>学生信息</caption>
		<thead>
			<tr>
				<th>序号</th>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>出生日期</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>001</td>
				<td>魏安复</td>
				<td>男</td>
				<td>2012-12-12</td>
			</tr>
			<tr>
				<th>2</th>
				<td>002</td>
				<td>杜子腾</td>
				<td>女</td>
				<td>2011-11-11</td>
			</tr>
			<tr>
				<th>3</th>
				<td>003</td>
				<td>史珍湘</td>
				<td>女</td>
				<td>2010-10-10</td>
			</tr>
			<tr>
				<th>4</th>
				<td>004</td>
				<td>梅读</td>
				<td>女</td>
				<td>2009-10-10</td>
			</tr>
			<tr>
				<th>5</th>
				<td>005</td>
				<td>赖月金</td>
				<td>男</td>
				<td>2008-01-01</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>总计</th>
				<th colspan="4">5条数据</th>
			</tr>
		</tfoot>
	</table>
</body>
</html>

运行结果：
在这里插入图片描述
2、设置表格的宽度
Table-layout
默认 auto 自动方式，根据单元格的内容自动调整宽度；
Fixed 固定方式 表格宽度固定；


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格的宽度</title>
<style type="text/css">
	.t{
		border: 1px gray solid;
		border-spacing: 0px;
		border-collapse: collapse;
		width: 500px;
		table-layout: fixed;
	}
	
	.t td{
		border: 1px gray solid;
		padding: 5px;
	}
	
	.t th{
		border: 1px gray solid;
		padding: 5px;
	}
</style>
</head>
<body>
	<table class="t">
		<caption>学生信息</caption>
		<thead>
			<tr>
				<th>序号</th>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>出生日期</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>001</td>
				<td>魏安复</td>
				<td>男</td>
				<td>2012-12-12</td>
			</tr>
			<tr>
				<th>2</th>
				<td>002</td>
				<td>杜子腾222222222222222222222222222222222222222222222222222222222222222222222222222</td>
				<td>女</td>
				<td>2011-11-11</td>
			</tr>
			<tr>
				<th>3</th>
				<td>003</td>
				<td>史珍湘</td>
				<td>女</td>
				<td>2010-10-10</td>
			</tr>
			<tr>
				<th>4</th>
				<td>004</td>
				<td>梅读</td>
				<td>女</td>
				<td>2009-10-10</td>
			</tr>
			<tr>
				<th>5</th>
				<td>005</td>
				<td>赖月金</td>
				<td>男</td>
				<td>2008-01-01</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>总计</th>
				<th colspan="4">5条数据</th>
			</tr>
		</tfoot>
	</table>
</body>
</html>

运行结果：
在这里插入图片描述
3、设置表格隔行换色


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格隔行换色</title>
<style type="text/css">
	.t{
		border: 1px gray solid;
		border-spacing: 0px;
		border-collapse: collapse;
		width: 500px;
		table-layout: fixed;
	}
	
	.t tr{
		background-color: #CCC;
	}
	
	.t td{
		border: 1px gray solid;
		padding: 5px;
	}
	
	.t th{
		border: 1px gray solid;
		padding: 5px;
	}
	
	tbody tr.even{
		background-color: #AAA;
	}
</style>
</head>
<body>
	<table class="t">
		<caption>学生信息</caption>
		<thead>
			<tr>
				<th>序号</th>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>出生日期</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>001</td>
				<td>魏安复</td>
				<td>男</td>
				<td>2012-12-12</td>
			</tr>
			<tr class="even">
				<th>2</th>
				<td>002</td>
				<td>杜子腾</td>
				<td>女</td>
				<td>2011-11-11</td>
			</tr>
			<tr>
				<th>3</th>
				<td>003</td>
				<td>史珍湘</td>
				<td>女</td>
				<td>2010-10-10</td>
			</tr>
			<tr class="even">
				<th>4</th>
				<td>004</td>
				<td>梅读</td>
				<td>女</td>
				<td>2009-10-10</td>
			</tr>
			<tr>
				<th>5</th>
				<td>005</td>
				<td>赖月金</td>
				<td>男</td>
				<td>2008-01-01</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>总计</th>
				<th colspan="4">5条数据</th>
			</tr>
		</tfoot>
	</table>
</body>
</html>

运行结果：
在这里插入图片描述
4、设置表格列样式


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格列样式</title>
<style type="text/css">
	.t{
		border: 1px gray solid;
		border-spacing: 0px;
		border-collapse: collapse;
		width: 500px;
		table-layout: fixed;
	}
	
	.t tr{
		background-color: #CCC;
	}
	
	.t td{
		border: 1px gray solid;
		padding: 5px;
	}
	
	.t th{
		border: 1px gray solid;
		padding: 5px;
	}
	
	tbody tr.even{
		background-color: #AAA;
	}
	
	th+td{
		text-align: center;
	}
	
	th+td+td+td{
		text-align: center;
		background-color: red;
	}
</style>
</head>
<body>
	<table class="t">
		<caption>学生信息</caption>
		<thead>
			<tr>
				<th>序号</th>
				<th>学号</th>
				<th>姓名</th>
				<th style="width: 50px;">性别</th>
				<th>出生日期</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>001</td>
				<td>魏安复</td>
				<td>男</td>
				<td>2012-12-12</td>
			</tr>
			<tr class="even">
				<th>2</th>
				<td>002</td>
				<td>杜子腾</td>
				<td>女</td>
				<td>2011-11-11</td>
			</tr>
			<tr>
				<th>3</th>
				<td>003</td>
				<td>史珍湘</td>
				<td>女</td>
				<td>2010-10-10</td>
			</tr>
			<tr class="even">
				<th>4</th>
				<td>004</td>
				<td>梅读</td>
				<td>女</td>
				<td>2009-10-10</td>
			</tr>
			<tr>
				<th>5</th>
				<td>005</td>
				<td>赖月金</td>
				<td>男</td>
				<td>2008-01-01</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>总计</th>
				<th colspan="4">5条数据</th>
			</tr>
		</tfoot>
	</table>
</body>
</html>

运行结果：
在这里插入图片描述
5、设置鼠标经过时行变色效果


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置鼠标经过时行变色效果</title>
<style type="text/css">
	.t{
		border: 1px gray solid;
		border-spacing: 0px;
		border-collapse: collapse;
		width: 500px;
		table-layout: fixed;
	}
	
	.t caption{
		font-size: 24px;
	}
	
	.t tr{
		background-color: #CCC;
	}
	
	.t td{
		border: 1px gray solid;
		padding: 5px;
	}
	
	.t th{
		border: 1px gray solid;
		padding: 5px;
	}
	
	tbody tr.even{
		background-color: #AAA;
	}
	
	th+td{
		text-align: center;
	}
	
	th+td+td+td{
		text-align: center;
		background-color: red;
	}
	
	tbody tr:HOVER {
		background-color: aqua;
	}
</style>
</head>
<body>
	<table class="t">
		<caption>学生信息</caption>
		<thead>
			<tr>
				<th>序号</th>
				<th>学号</th>
				<th>姓名</th>
				<th style="width: 50px;">性别</th>
				<th>出生日期</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>001</td>
				<td>魏安复</td>
				<td>男</td>
				<td>2012-12-12</td>
			</tr>
			<tr class="even">
				<th>2</th>
				<td>002</td>
				<td>杜子腾</td>
				<td>女</td>
				<td>2011-11-11</td>
			</tr>
			<tr>
				<th>3</th>
				<td>003</td>
				<td>史珍湘</td>
				<td>女</td>
				<td>2010-10-10</td>
			</tr>
			<tr class="even">
				<th>4</th>
				<td>004</td>
				<td>梅读</td>
				<td>女</td>
				<td>2009-10-10</td>
			</tr>
			<tr>
				<th>5</th>
				<td>005</td>
				<td>赖月金</td>
				<td>男</td>
				<td>2008-01-01</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>总计</th>
				<th colspan="4">5条数据</th>
			</tr>
		</tfoot>
	</table>
</body>
</html>

运行结果：
在这里插入图片描述

娃娃救葫芦爷
关注
专栏目录
漂亮的table样式（内附css）
08-10
漂亮的table样式（内附css） 漂亮的table样式（内附css）
头歌教学实践平台 Web前端开发基础 CSS-表格样式
01-20
"头歌教学实践平台"提供了这个实践课程，帮助学习者掌握CSS在表格样式设计上的应用。 1. **表格的基本结构** HTML表格由`<table>`标签开始，`</table>`标签结束，内部包含`<tr>`（行）标签，`<td>`（单元格）和`...
CSS：设置表格样式
Thumb_的博客
12-11 2924
设置前： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格样式</title> </head> <body> <table> <tr> <th>名称</th> <th>职.
任意选择表格中的td，并添加样式
最新发布
u014645827的博客
08-02 101
任意选择表格中的td，并添加样式
CSS 设置表格，表格样式
gundumw100的专栏
04-10 920
table{   border-collapse: collapse;               //相邻边被合并   background-color: #cccccc;             //设置表格背景色   border-top: 1px solid #000000;        //设置表格上边框颜色   border-left: 1px solid #000000;    
css下设置表格样式
yunxian_19的专栏
11-13 322
table 边：borde：1px solid black 间距border-spaceing 合并（折叠）border-collapse（会覆盖border-spaceing）  table的子元素 内边距padding 待续
08：CSS设置表格样式
fighting_0808的博客
08-17 146
1.一个简单的表格 table.html &amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;amp;gt; &amp;amp;lt
CSS实现的清爽、漂亮的表格样式分享
01-19
效果： 实现代码： 复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<head><... charset=gb2312″ />...CSS实现的清爽、漂亮的表格样式 – jb5t1.net</tit
CSS表格样式1
05-27
由于描述中没有提供具体信息，我将根据常见的CSS表格样式实践进行详细讲解。 首先，我们来了解一下HTML表格的基本结构，由`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）元素组成。CSS可以帮助我们...
仿Word自动套用格式使用CSS设置表格样式实例
12-03
通过这种方式，我们可以使用CSS精确地模拟Word中的表格样式，让网页中的表格同样具有丰富的视觉效果和专业感。这种技巧在构建复杂、美观的数据展示页面时非常有用，使得用户在网页中也能体验到与Word文档类似的功能...
一些CSS3 Tables表格样式设计实例
05-12
摘要:脚本资源,CSS特效,CSS3表格　一些CSS3 Tables表格样式设计实例，CSS特效代码，收集一些常用的用CSS3美化的表格特效代码，方便大家使用，这些表格样式来自国外网站，有的像报表一样，觉得挺有实用价值。
普通table表格样式及代码大全(全)
04-11
各种表格样式的汇总、完全代码展示，附有图片演示！共享给大家了……
css设置表格样式的方法
学习也休闲
11-24 1282
表格常见的应用   表格的颜色   例如   .datalist { color: #0046a6; background-color: #d2e8ff; font-family: Arial; } .datalist th { color: #003e7e; background-color: #7bb3ff;
CSS(九) 设置表格样式
hlfsunshine的专栏
10-07 521
设置表格的边框 Border：设置表格边框； Border-collapse：设置边框分离或者合并，默认是separate(分离)的，值collapse 为合并； Border-spacing ：设置单元格的间距； Padding：设置单元格内容和边框之间的距离； 设置表格的宽度 Table-layout 默认auto 自动方式，根据单元格的内容自动调整宽度； Fixe
CSS：表格样式（设置表格边框/文字/背景的样式）
books1958的专栏
12-22 6195
CSS：表格样式（设置表格边框/文字/背景的样式）
CSS表格样式
xiangxiongfly
07-21 1万+
CSS表格样式 caption-side 标题位置 border-collapse 边框合并 border-spacing 边框间距 css样式（推荐使用）
用标准的CSS定义你的表格样式
weixin_34270606的博客
09-13 116
CSS标准化了的表格原文链接：A CSS styled table version 2本文介绍如何正确使用xHTML语言里的table标签——他应该只为展示数据所用。本文将帮助你赋予您的表格可达性，并教会你如何用CSS来定义你的表格以获得需要的视觉效果。XHTML部分如果你读过我关于表格问题的 第一篇文章，你可能还记得我建议你读一读Roger的 ‘Bring on the tables’ [表格全...
CSS复习之用CSS设置表格样式
Java学习之乐的博客
05-12 1679
今日目录：        1、设置表格的边框        2、设置表格的宽度        3、设置表格隔行还色        4、设置表格列样式        5、设置鼠标经过时变色效果一、设置表格的边框Border：设置表格边框；Border-collapse：设置边框分离，合并 默认是 separate(分离) collapse 合并；Border-spacing ：设置单元格的间距；Pa...
如何使用 CSS 设置 HTML 表格样式
热门推荐
allway2的博客
05-30 1万+
在 Web 开发的早期，HTML 表格非常基础，缺乏广泛的样式选项。然而，今天，大多数表格的样式都旨在为用户创造更美观和更实用的体验。 CSS 为样式表提供了许多属性。这些属性允许您（除其他外）分隔表格中的单元格、指定表格边框以及指定表格的宽度和高度。 本教程将通过示例讨论如何使用 CSS 设置表格样式。在本教程结束时，您将成为这方面的专家。 HTML 表格 HTML 代码定义了表格的结构。您使用 <table> 标记来定义表格。<tr>、<th> 和 <t
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值