CSS 表格

最新推荐文章于 2022-11-08 16:10:23 发布
最新推荐文章于 2022-11-08 16:10:23 发布
阅读量176 收藏
点赞数
分类专栏： CSS 文章标签： CSS 表格 table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80360644
版权

表格边框

   指定CSS表格边框，使用border属性。

<!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</th>
			<td>Griffin</td>
		</tr>
		
		<tr>
			<td>Lois</td>
			<td>Griffin</td>
		</tr>
		
	</table>
</body>  
</html>

    请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

   为了显示一个表的单个边框，使用 border-collapse属性。

折叠边框

   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</th>
			<td>Griffin</td>
		</tr>
		
		<tr>
			<td>Lois</td>
			<td>Griffin</td>
		</tr>
		
	</table>
</body>  
</html>

表框宽度和高度

    Width和height属性定义表格的宽度和高度。

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

表格文字对齐

    表格中的文本对齐和垂直对齐属性。

    text-align属性设置水平对齐方式，像左，右，或中心

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

   垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

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

表格填充

   如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：

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

表格颜色

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

   设置表格标题的位置

<!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>

参考:

https://www.yuque.com/docs/share/0354e4dd-5766-4114-9ab3-fcdc47582157

冷月醉雪
关注
专栏目录
css表格
hewindows的博客
11-11 166
表格 1、表格常用属性 1、边距属性：padding 2、尺寸属性:width,height 3、文本、字体属性 4、背景属性：background … 5、边框属性: border 6、垂直方向对齐：vertical-align 取值：top/middle/bottom text-align 和 vertical-align 属性设置表格中文本的对齐方式。 text-align 属性设置水平对齐...
CSS表格
qq_37881565的博客
08-31 268
表格边框 指定CSS表格边框，使用border属性。 下面的例子指定了一个表格的TH和TD元素的黑色边框: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> table,th,td { border:1px solid black; } </style> </head> <body> <table> &
CSS通用样式3——表格
最新发布
qq_66198247的博客
11-08 6219
上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。表内的样式可以组合使用，多个样式之间只需使用空格隔开即可，并且都支持.table-dark样式，适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。Bootstrap为表格提供了多种状态的样式类，这些状态类的主要作用是为表格中的行或单元格设置不同的背景颜色。样式，可以将表格中的每个单元格增加边框样式。
CSS中的表格
liu0218的博客
08-06 4896
一、语法 二、表格的相关属性 三、高级表格应用 1.单元格间距 2.合并相邻单元格边框 3.无内容时单元格的设置 4.显示单元格行和列的算法 4.1 值为auto时(默认值) 4.2 值为fixed时 5.表格列标题 6.表格标题 设置表格标题的位置 7.数据行分组 8.数据列分组...
CSS表格样式1
05-27
由于描述中没有提供具体信息，我将根据常见的CSS表格样式实践进行详细讲解。 首先，我们来了解一下HTML表格的基本结构，由`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）元素组成。CSS可以帮助我们...
css表格单元格中的长文本如何实现自动换行
12-13
下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 复制代码代码如下: ”wrap”>正常文字的换行...
CSS表格斜线.rar
07-05
标题“CSS表格斜线.rar”和描述“CSS表格斜线”暗示了这个压缩包内容主要涉及如何使用CSS来实现带有斜线的表格效果。在网页设计中，有时我们需要创建具有特殊布局的表格，例如带有分区的单元格，其中包含斜线以指示...
CSS 表格样式
03-18
在实际项目中，可以结合`myhome`这个压缩包中的源码来进一步学习和实践这些CSS表格样式的应用。通过不断试验和调整，你可以创造出独特且符合项目需求的表格样式。记得保持代码的简洁和可读性，这将对后期维护...
CSS中的表格(一)
xvzhengyang的博客
03-05 6039
如何使用HTML来完成一个表格? &lt;table&gt;元素专门负责标记表格数据. &lt;tr&gt;每个tr元素构成表格中的一行 &lt;th&gt;每个th元素分别是某一列的表头;浏览器默认的会用粗体来表示表头. &lt;td&gt;每个td元素包含表格中的一个单元格,每个单元格分别构成一个单独的列;包含一个表格数...
CSS_控制表格样式
子龙修仙的博客
05-14 9493
CSS 表格属性可以极大的改善表格的外观，如表格边框、高度与宽度等。属性描述border表格边框border-collapse折叠边框width表格的宽度height表格的高度text-align 表格文本对齐padding表格内边距Border-radius边框变圆形Table如下： &lt;table class="tab"&gt; &lt;thead&gt; &lt;tr&gt; ...
CSS Table（表格）
隔壁小王的博客
03-20 8928
**首先介绍表格标签**一个完整的表格示例如下<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>table标签：表格 tr标签：表格中的每一行 th标
CSS表格设计
weixin_46102402的博客
10-21 640
CSS表格 这学期要学jsp (什么时候还学jsp)无奈从HTML开始学习，发现html内置的表格不够美观（太难看了） 0. 表格的HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
轻松解决HTML + CSS各种表格问题
shenmill的博客
08-07 9582
表格那些事：简单复杂的表格样式，高度固定表头固定，横向滚动条等。
CSS 导航栏
热门推荐
冷月醉雪的博客
05-25 1万+
垂直 水平   导航栏    熟练使用导航栏，对于任何网站都非常重要。    使用CSS你尅转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表    作为标准的HTML基础一个导航栏是必须的。    导航栏基本上是一个链接链接，所以使用&lt;ul&gt;和&lt;li&gt;元素非常有意义： &lt;!DOCTYPE html&gt; &lt;html&g...
CSS 图像拼合技术
冷月醉雪的博客
05-30 1398
   图像拼合就是单个图像的集合。    有许多图像的网页可能需要很长事件来加载和生成多个服务器的请求。    使用图像拼合会降低服务器的请求数量，并节省带宽。 图像拼合--创建一个导航列表 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;...
CSS 图像透明/不透明
冷月醉雪的博客
05-30 1368
创建透明图像--悬停效果 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; img { opacity:0.4; filte
CSS 伪类(Pseudo-classes)
冷月醉雪的博客
05-24 1328
   CSS伪类是来添加一些选择器的特殊效果。 语法    伪类的语法： selector:pseudo-class {property:value;}    CSS类也可以使用伪类： selector.class:pseudo-class {property:value;}   anchor伪类      在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示： ...
深入解析CSS表格布局
7. **兼容性问题**：CSS表格布局在不同的浏览器间可能存在差异，因此了解各浏览器的兼容性特点并使用适当的 hack 或前缀是确保跨平台一致性的关键。 8. **性能优化**：优化表格的加载速度和渲染性能也是设计师需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值