成都创新互联网站制作重庆分公司

css3中的表格属性是什么

小编给大家分享一下css3中的表格属性是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名申请、虚拟空间、营销软件、网站建设、施秉网站维护、网站推广。

css3表格属性:1、border-collapse;2、border-spacing;3、caption-side;4、empty-cells;5、table-layout;6、width;7、padding;8、text-align等。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

1.CSS表格

使用 CSS 可以使 HTML 表格更美观。指定CSS表格边框,使用border属性。

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

可以设置的属性分别(按顺序):border-width,border-style,border-color。(即边框的宽度、边框的样式、边框的颜色)

如果上述值缺少一个没有关系,例如border:#FF0000;是允许的。

1.1 border属性

说明
border-width指定边框的宽度
border-style指定边框的样式
border-color指定边框的颜色

1.2 border-width属性

描述
thin定义细的边框。
medium默认。定义中等的边框。
thick定义粗的边框。
length允许您自定义边框的宽度。

1.3 border-style属性

描述
none定义无边框。
hidden与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted定义点状边框。在大多数浏览器中呈现为实线。
dashed定义虚线。在大多数浏览器中呈现为实线。
solid定义实线。
double定义双线。双线的宽度等于 border-width 的值。
groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
inset定义 3D inset 边框。其效果取决于 border-color 的值。
outset定义 3D outset 边框。其效果取决于 border-color 的值。

1.4 border-color属性

说明
color指定背景颜色。
transparent指定边框的颜色应该是透明的。这是默认

小实例:



	
		
		CSS简单学习
		
			table,th,td {
				border: 1px solid black;
			}
		
	
	
	
		
英文名 中文名
HTML 超文本标记语言
CSS 层叠样式表

css3中的表格属性是什么

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

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

1.5 border-collapse属性

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


	
		
		CSS简单学习
		
			table {
				border-collapse: collapse;
			}
			table,th,td {
				border: 1px solid black;
			}
		
	
	
	
		
英文名 中文名
HTML 超文本标记语言
CSS 层叠样式表

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元素的高度的表格:

小实例:



	
		
		CSS简单学习
		
			table,th,td {
				border: 1px solid black;
			}
			table {
				width: 30%;
			}
			th {
				height: 30px;
			}
			td {
				height: 20px;
			}
		
	
	
	
		
姓名 性别 年龄
张三 31
李四 43
王五 24

css3中的表格属性是什么


3.CSS表格的文字对齐方式(text-align)

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

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

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

小实例:



	
		
		CSS简单学习
		
			table,th,td {
				border: 1px solid black;
			}
			th {
				width: 40%;
				height: 30px;
				text-align: center;
			}
			td {
				width: 40%;
				height: 20px;
				text-align: center;
			}
		
	
	
	
		
姓名 性别 年龄
张三 31
李四 43
王五 24

css3中的表格属性是什么


4.CSS表格填充(padding)

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

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

小实例:



	
		
		CSS简单学习
		
			table,th,td {
				border: 1px solid black;
			}
			th,td {
				padding: 15px;
			}
		
	
	
	
		
姓名 性别 年龄
张三 31
李四 43
王五 24

css3中的表格属性是什么


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



	
		
		CSS简单学习
		
			table,th,td {
				border: 1px solid black;
			}
			th {
				background-color: burlywood;
				color: aqua;
			}
			td {
				background-color: chartreuse;
				color: brown;
			}
			caption {
				caption-side: bottom;
			}
		
	
	
	
		
表1.1-学生个人信息表
姓名 性别 年龄
张三 31
李四 43
王五 24

css3中的表格属性是什么


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



	
		
		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;
			}
		
	
	
	
		
			表6.66-英雄联盟娱乐信息表
			
				英雄名称
				定位
				推荐符文
				可选神话装备
			
			
				熔岩巨兽
				辅助
				不灭之握
				霜火护手
			
			
				战争女神
				AD Carry
				致命节奏
				海妖杀手
			
			
				战争之影
				打野
				征服者
				三项之力
			
			
				诺克萨斯之手
				上单
				征服者
				渴血战斧
			
			
				疾风剑豪
				中单
				征服者
				不朽盾弓
			
		
	

css3中的表格属性是什么

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


本文标题:css3中的表格属性是什么
分享链接:http://cxhlcq.com/article/jjhioi.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部