css3属性手册(css显示表格)-柠檬ai自媒体

边肖将与您分享css3中的表属性。相信大部分人还不太了解，所以分享这篇文章给大家参考。希望你看完这篇文章会有很多收获。我们一起来看看吧！

Css3表属性：1。边界崩溃；2、边框间距；3、字幕侧；4、空细胞；5、表格布局；6、宽度；7、填充物；8.文本对齐等。

本教程操作环境：windows7系统，CSS3HTML5第5版，戴尔G3电脑。

00-1010使用CSS可以让HTML表格更加美观。指定CSS表格边框，并使用边框属性。

缩写边框属性设置声明中的所有边框属性。

可以设置的属性有(按顺序):border-width，border-style，border-color。（即边框的宽度、边框的样式、边框的颜色）.

以上值缺一不要紧，比如边框：# ff0000这是允许的。

1.1 border属性

描述值边框宽度指定边框的宽度边框样式指定边框的样式边框颜色指定边框的1.2 border-width属性 颜色。

值描述细定义了细边框。中等违约。定义一个中间边框。粗定义粗边框。长度允许您自定义边框的宽度。1.3 border-style属性

值none没有定义边框。隐藏与“无”相同。除非应用于表格。对于表，隐藏用于解决边界冲突。虚线定义了虚线边框。它在大多数浏览器中显示为实线。虚线定义虚线。它在大多数浏览器中显示为实线。实线定义实线。Double定义了一条双线。双线的宽度等于边框宽度的值。凹槽定义三维凹槽边界。效果取决于边框颜色的值。脊定义三维脊边界。效果取决于边框颜色的值。插图定义3dinsert边框。效果取决于边框颜色的值。开始定义三维开始边界。效果取决于边框颜色的值。1.4 border-color属性

值颜色指定背景颜色。透明指定边框颜色应该是透明的。这是默认实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>CSS简单学习</title>
		<style type="text/css">
			table,th,td {
				border: 1px solid black;
			}
		</style>
	</head>
	
	<body>
		<table>
			<tr>
				<th>英文名</th>
				<th>中文名</th>
			</tr>
			<tr>
				<td>HTML</td>
				<td>超文本标记语言</td>
			</tr>
			<tr>
				<td>CSS</td>
				<td>层叠样式表</td>
			</tr>
		</table>
	</body>
</html>

css3中的表格属性是什么

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

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

1.5 border-collapse属性

值	说明
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			table {
				border-collapse: collapse;
			}
			table,th,td {
				border: 1px solid black;
			}
		</style>
	</head>
	
	<body>
		<table>
			<tr>
				<th>英文名</th>
				<th>中文名</th>
			</tr>
			<tr>
				<td>HTML</td>
				<td>超文本标记语言</td>
			</tr>
			<tr>
				<td>CSS</td>
				<td>层叠样式表</td>
			</tr>
		</table>
	</body>
</html>

css3中的表格属性是什么

1.6 border-spacing 属性

（1）作用：该属性指定分隔边框模型中单元格边界之间的距离。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

（2）可能的值：

值

描述

length length

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

如果定义一个length参数，那么定义的是水平和垂直间距。

如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距。

1.7 caption-side属性

（1）作用：设置表格标题的位置，该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。

（2）可能的值：

值	描述
top	默认值。把表格标题定位在表格之上。
bottom	把表格标题定位在表格之下。

（3）浏览器的兼容性：除IE外的所有主流浏览器都支持 caption-side 属性。如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side属性。

1.8 empty-cells 属性

（1）作用：该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate，否则将忽略这个属性。

（2）可能的值：

值	描述
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。

（3）浏览器的兼容性：除IE外的所有浏览器都支持 empty-cells 属性。如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 属性。

1.9 table-layout属性

（1）作用：来显示表格单元格、行、列的算法规则，该属性指定了完成表布局时所用的布局算法。

（2）两种算法：

<1>固定表格布局: fixed

#优点：允许浏览器更快地对表格进行布局, （在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。）；

#缺点：不太灵活。

<2>自动表格布局：automatic

#优点：更能反映传统的 HTML，（在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。）；

#缺点：自动算法比较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

（3）可能的值：

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

2.CSS表格的宽度和高度（width、height）

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

下面的例子是设置30％的宽度，30像素的th元素，20像素的td元素的高度的表格：

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			table,th,td {
				border: 1px solid black;
			}
			table {
				width: 30%;
			}
			th {
				height: 30px;
			}
			td {
				height: 20px;
			}
		</style>
	</head>
	
	<body>
		<table>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>31</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>43</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>24</td>
			</tr>
		</table>
	</body>
</html>

css3中的表格属性是什么

3.CSS表格的文字对齐方式（text-align）

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

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

vertical-align属性设置垂直对齐方式，比如顶部，底部或中间。

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			table,th,td {
				border: 1px solid black;
			}
			th {
				width: 40%;
				height: 30px;
				text-align: center;
			}
			td {
				width: 40%;
				height: 20px;
				text-align: center;
			}
		</style>
	</head>
	
	<body>
		<table>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>31</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>43</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>24</td>
			</tr>
		</table>
	</body>
</html>

css3中的表格属性是什么

4.CSS表格填充（padding）

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

值	说明
length	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的填充
inherit	指定应该从父元素继承padding

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			table,th,td {
				border: 1px solid black;
			}
			th,td {
				padding: 15px;
			}
		</style>
	</head>
	
	<body>
		<table>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>31</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>43</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>24</td>
			</tr>
		</table>
	</body>
</html>

css3中的表格属性是什么

5.CSS表格的背景颜色及字体颜色（background-color、color）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			table,th,td {
				border: 1px solid black;
			}
			th {
				background-color: burlywood;
				color: aqua;
			}
			td {
				background-color: chartreuse;
				color: brown;
			}
			caption {
				caption-side: bottom;
			}
		</style>
	</head>
	
	<body>
		<table>
			<caption>表1.1-学生个人信息表</caption>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>31</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>43</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>24</td>
			</tr>
		</table>
	</body>
</html>

css3中的表格属性是什么

6.CSS表格多属性综合练习

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			/*对应整个表格的样式*/
			#LOL {
				font-family: "楷体", sans-serif;
				width: 50%;
				height: 100%;
				text-align: center;
				border-collapse: collapse;
			}
			/*对应表格中的边框线的样式*/
			#LOL th,#LOL td {
				font-size: 20px;
				border: 1px solid #00FFFF;
				padding-top: 3px;
				padding-bottom: 3px;
				padding-left: 5px;
				padding-right: 10px;
			}
			/*对应表格表头的样式*/
			#LOL th {
				font-size: 30px;
				padding-top: 3px;
				padding-bottom: 3px;
				padding-left: 5px;
				padding-right: 10px;
				background-color: #7FFF00;
				color: deeppink;
			}
			/*对应表格中行为a的列的样式*/
			#LOL tr.a td {
				background-color: #DEB887;
				color: #FF0000;
			}
			/*对应表格中行为b的列的样式*/
			#LOL tr.b td {
				background-color: antiquewhite;
				color: #FF1493;
			}
			/*对应表格标题的样式*/
			caption {
				font-size: 16px;
				caption-side: bottom;
			}
		</style>
	</head>
	
	<body>
		<table id="LOL">
			<caption>表6.66-英雄联盟娱乐信息表</caption>
			<tr>
				<th>英雄名称</th>
				<th>定位</th>
				<th>推荐符文</th>
				<th>可选神话装备</th>
			</tr>
			<tr class="a">
				<td>熔岩巨兽</td>
				<td>辅助</td>
				<td>不灭之握</td>
				<td>霜火护手</td>
			</tr>
			<tr class="b">
				<td>战争女神</td>
				<td>AD Carry</td>
				<td>致命节奏</td>
				<td>海妖杀手</td>
			</tr>
			<tr class="a">
				<td>战争之影</td>
				<td>打野</td>
				<td>征服者</td>
				<td>三项之力</td>
			</tr>
			<tr class="b">
				<td>诺克萨斯之手</td>
				<td>上单</td>
				<td>征服者</td>
				<td>渴血战斧</td>
			</tr>
			<tr class="a">
				<td>疾风剑豪</td>
				<td>中单</td>
				<td>征服者</td>
				<td>不朽盾弓</td>
			</tr>
		</table>
	</body>
</html>

css3中的表格属性是什么

以上是“css3中的表格属性是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！

内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/152579.html

css3属性手册(css显示表格)

2.CSS表格的宽度和高度（width、height）

3.CSS表格的文字对齐方式（text-align）

4.CSS表格填充（padding）

小实例：

5.CSS表格的背景颜色及字体颜色（background-color、color）

6.CSS表格多属性综合练习

相关推荐

C#如何实现SQL封装

对我影响最大的人,对我影响最大的人妈妈作文

如何理解mysql的锁机制

如何快速给Hadoop集群加上弹性

英语的时态,英语七大时态结构，用法

【死磕Java并发】—–深入分析volatile的实现原理