CSS表格

最新推荐文章于 2024-06-13 01:26:35 发布
最新推荐文章于 2024-06-13 01:26:35 发布
阅读量741 收藏
点赞数
分类专栏： CSS 实例 CSS 文章标签： CSS 表格 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengyuezuixue/article/details/81165717
版权

指定一个表的Th，TD元素和黑色边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			table,th,td{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table>
	</body>
</html>

使用border-collapse

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			table {
				border-collapse:collapse;
			}
		
			table,th,td{
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table>
		
		<p><b>注意：</b> 如果没有指定 !DOCTYPE  border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>
		
	</body>
</html>

指定表格的宽度和高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			table,th,td{
				border:1px solid black;
			}
			
			table {
				width:100%;
			}
			
			th {
				height:50px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
				<th>Savings</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
				<td>$150</td>
			</tr>
			<tr>
				<td>Joe</td>
				<td>Swanson</td>
				<td>$300</td>
			</tr>
			<tr>
				<td>Cleveland</td>
				<td>Brown</td>
				<td>$250</td>
			</tr>
		</table>
	
		
	</body>
</html>

设置内容的水平对齐方式(文本对齐)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			table,th,td{
				border:1px solid black;
			}
			
			td{
				text-align:right;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
				<th>Savings</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
				<td>$150</td>
			</tr>
			<tr>
				<td>Joe</td>
				<td>Swanson</td>
				<td>$300</td>
			</tr>
			<tr>
				<td>Cleveland</td>
				<td>Brown</td>
				<td>$250</td>
			</tr>
		</table>
	
		
	</body>
</html>

设置内容的垂直对齐(垂直对齐)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			table,th,td{
				border:1px solid black;
			}
			
			td{
				height:50px;
				vertical-align:bottom;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
				<th>Savings</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
				<td>$150</td>
			</tr>
			<tr>
				<td>Joe</td>
				<td>Swanson</td>
				<td>$300</td>
			</tr>
			<tr>
				<td>Cleveland</td>
				<td>Brown</td>
				<td>$250</td>
			</tr>
		</table>
	
		
	</body>
</html>

指定TH和TD元素的填充

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			table,th,td{
				border:1px solid black;
			}
			
			td{
				padding:15px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
				<th>Savings</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
				<td>$150</td>
			</tr>
			<tr>
				<td>Joe</td>
				<td>Swanson</td>
				<td>$300</td>
			</tr>
			<tr>
				<td>Cleveland</td>
				<td>Brown</td>
				<td>$250</td>
			</tr>
		</table>
	
		
	</body>
</html>

指定表格边框的颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			table,th,td{
				border:1px solid green;
			}
			
			th{
				background-color:green;
				color:white;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
				<th>Savings</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
				<td>$100</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
				<td>$150</td>
			</tr>
			<tr>
				<td>Joe</td>
				<td>Swanson</td>
				<td>$300</td>
			</tr>
			<tr>
				<td>Cleveland</td>
				<td>Brown</td>
				<td>$250</td>
			</tr>
		</table>
	
		
	</body>
</html>

指定表格标题的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			caption {caption-side:bottom;}
		</style>
	</head>
	<body>
		<table border="1">
		<caption>Table 1.1 Customers</caption>
		<tr>
		  <th>Company</th>
		  <th>Contact</th>
		  <th>Country</th>
		</tr>
		<tr>
			<td>Alfreds Futterkiste</td>
			<td>Maria Anders</td>
			<td>Germany</td>
		</tr>
		<tr>
			<td>Berglunds snabbköp</td>
			<td>Christina Berglund</td>
			<td>Sweden</td>
		</tr>
		<tr>
			<td>Centro comercial Moctezuma</td>
			<td>Francisco Chang</td>
			<td>Mexico</td>
		</tr>
		<tr>
			<td>Ernst Handel</td>
			<td>Roland Mendel</td>
			<td>Austria</td>
		</tr>
		<tr>
			<td>Island Trading</td>
			<td>Helen Bennett</td>
			<td>UK</td>
		</tr>
		<tr>
			<td>Magazzini Alimentari Riuniti</td>
			<td>Giovanni Rovelli</td>
			<td>Italy</td>
		</tr>
		<tr>
			<td>North/South</td>
			<td>Simon Crowther</td>
			<td>UK</td>
		</tr>
		</table>

		<p><b>注意:</b>如果 !DOCTYPE 指定 IE 8 支持 caption-side 属性 .</p>
	
		
	</body>
</html>

创建一个奇特的表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			#customers
			{
				font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
				width:100%;
				border-collapse:collapse;
			}
			#customers td, #customers th 
			{
				font-size:1em;
				border:1px solid #98bf21;
				padding:3px 7px 2px 7px;
			}
			#customers th 
			{
				font-size:1.1em;
				text-align:left;
				padding-top:5px;
				padding-bottom:4px;
				background-color:#A7C942;
				color:#ffffff;
			}
			#customers tr.alt td 
			{
				color:#000000;
				background-color:#EAF2D3;
			}
		</style>
	</head>
	<body>
		<table id="customers">
		<tr>
		  <th>Company</th>
		  <th>Contact</th>
		  <th>Country</th>
		</tr>
		<tr>
			<td>Alfreds Futterkiste</td>
			<td>Maria Anders</td>
			<td>Germany</td>
		</tr>
		<tr class="alt">
			<td>Berglunds snabbköp</td>
			<td>Christina Berglund</td>
			<td>Sweden</td>
		</tr>
		<tr>
			<td>Centro comercial Moctezuma</td>
			<td>Francisco Chang</td>
			<td>Mexico</td>
		</tr>
		<tr class="alt">
			<td>Ernst Handel</td>
			<td>Roland Mendel</td>
			<td>Austria</td>
		</tr>
		<tr>
			<td>Island Trading</td>
			<td>Helen Bennett</td>
			<td>UK</td>
		</tr>
		<tr class="alt">
			<td>Königlich Essen</td>
			<td>Philip Cramer</td>
			<td>Germany</td>
		</tr>
		<tr>
			<td>Laughing Bacchus Winecellars</td>
			<td>Yoshi Tannamuri</td>
			<td>Canada</td>
		</tr>
		<tr class="alt">
			<td>Magazzini Alimentari Riuniti</td>
			<td>Giovanni Rovelli</td>
			<td>Italy</td>
		</tr>
		<tr>
			<td>North/South</td>
			<td>Simon Crowther</td>
			<td>UK</td>
		</tr>
		<tr class="alt">
			<td>Paris spécialités</td>
			<td>Marie Bertrand</td>
			<td>France</td>
		</tr>
		</table>
	</body>
</html>

参考：

https://www.yuque.com/docs/share/5c252603-873c-4f5c-9cc9-44e46c2ecf5f

冷月醉雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS表格样式1
05-27
由于描述中没有提供具体信息，我将根据常见的CSS表格样式实践进行详细讲解。 首先，我们来了解一下HTML表格的基本结构，由`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）元素组成。CSS可以帮助我们...
CSS 表格
weixin_30642305的博客
06-05 134
使用CSS可以大大提高HTML表格的外观。 CompanyContactCountry Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang Mex...
CSS入门到精通——表格样式
最新发布
m0_73614626的博客
06-13 778
在实际情况中，我们可以根据需求设置表格对齐方式。设置表格中文字对齐的方式，与设置段落文字对齐的方式相同，都是使用。表格颜色设置十分简便，与设置文字颜色的方式相同。设置表格样式，使表格更优美。同样的，设置表格文字粗细与设置段落文字粗细相同，都是使用。设置表格样式，使表格更好看。设置表格样式，使表格更好看。但是，这样设置的通讯录表格有双边框。表格才会看起来更符合我们平时使用的表格。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。
CSS中的表格
liu0218的博客
08-06 4837
一、语法 二、表格的相关属性 三、高级表格应用 1.单元格间距 2.合并相邻单元格边框 3.无内容时单元格的设置 4.显示单元格行和列的算法 4.1 值为auto时(默认值) 4.2 值为fixed时 5.表格列标题 6.表格标题 设置表格标题的位置 7.数据行分组 8.数据列分组...
CSS 表格样式
03-18
在实际项目中，可以结合`myhome`这个压缩包中的源码来进一步学习和实践这些CSS表格样式的应用。通过不断试验和调整，你可以创造出独特且符合项目需求的表格样式。记得保持代码的简洁和可读性，这将对后期维护...
8款非常好看的css表格
08-04
本文将深入探讨8款非常出色的CSS表格，这些表格设计独特，功能丰富，能为你的网站增添专业且美观的展示效果。 1. **Pure CSS Data Tables** 这款表格完全依赖CSS实现，无需JavaScript插件，轻量级且响应式。通过...
8款好看的css表格.rar
08-05
本资源“8款好看的css表格.rar”提供了一系列由国外设计师编写的精美CSS表格示例，这些表格在视觉呈现上极具吸引力，能够为网页增加专业且现代的外观。 CSS表格的设计主要围绕以下几个方面展开： 1. **布局与结构*...
漂亮的表格css+html
02-11
一个很好的表格html代码，里面包含了css表格类型，界面清晰、清爽、相当的漂亮！
css表格
hoho_12
08-03 407
css表格
Css表格
海贼王
04-27 3399
Css表格 Css表格 css表格属性可以帮助你极大的改善表格的外观 1.表格内间距 2.折叠边框 border-collapse属性设置是否将表格边框折叠为单一边框： table { border-collapse:collapse; } 3.表格边框 下面的例子为table、th以及td设置了蓝色边框：
css制作表格
03-07 123
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> <style> *{ margin: 0; padding: 0; } table{...
CSS 表格：Table
梁辰兴的博客
09-19 2813
CSS折叠边框是一种用于实现边框缩小或扩张的CSS技巧，主要通过设置边框的宽度和高度，使边框在需要缩小或扩张时根据实际需要进行折叠。请注意，这只是一种模拟折叠边框的方法，实际的折叠边框效果可能需要使用其他技术或者配合其他属性来实现。如果单元格中的内容超出了单元格的宽度或高度，可以使用CSS的溢出处理方式来处理，例如使用。同时，在表格内部，单元格之间的边框是默认不显示的，如果需要显示，需要给单元格也设置。需要注意的是，对于表格的行高或单元格宽度，可以通过设置单元格的。CSS 表格属性可以用来改变表格的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值