购物车
登陆 / 注册
微信扫码登陆

CSS Table(表格)

CSS Table(表格)
table属性通过改变表格的边框,内边距,文本的对齐方式以及颜色来使表格变得更加美观
编辑:前端控 前端控 更新时间:2019-02-01 13:47:50

CSS Table(表格) 

table属性可以使表格外观变得更加美观

表格边框

通过 border 属性可以为CSS设置表格边框

实例

<table border="1">
	<tr>
		<td>示例一</td>
		<td>示例一</td>
		<td>示例一</td>
	</tr>
	<tr>
		<td>示例二</td>
		<td>示例二</td>
		<td>示例二</td>
	</tr>
</table>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

折叠边框

border-collapse 属性可以设置是否将表格边框折叠为单一边框

实例

table,tr,td{
	border: 1px solid #ccc;
}
table{ 
	border-collapse:collapse;

}
</style>
</head>

<body>
<table>
	<tr>
		<td>示例一</td>
		<td>示例一</td>
		<td>示例一</td>
	</tr>
	<tr>
		<td>示例二</td>
		<td>示例二</td>
		<td>示例二</td>
	</tr>
</table>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

表格宽度和高度

通过设置width 和 height 属性来定义表格的宽度和高度

实例

td{
	width:120px;
	height:80px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 19.jpg

表格文本对齐

text-align 和 vertical-align 属性可以用来设置表格中文本的对齐方式。

text-align 属性设置水平对齐方式

vertical-align属性用来设置垂直对齐方式

实例

td{
	width:120px;
	height:80px;
	text-align: center;
	vertical-align:center;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 20.jpg

表格内边距

通过padding属性可以控制表格中内容与边框的距离

实例

td{
	width:120px;
	height:80px;
	text-align: center;
	vertical-align:center;
	padding: 10px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 21.jpg

表格颜色

可以设置边框的颜色,以及文本和背景颜色

实例

td{
	width:120px;
	height:80px;
	text-align: center;
	vertical-align:center;
	padding: 10px;
	background-color: pink;
	color: #fff;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 22.jpg

CSS Table 属性

属性描述
border-collapse设置是否把表格边框合并为单一的边框。
border-spacing设置分隔单元格边框的距离。
caption-side设置表格标题的位置。
empty-cells设置是否显示表格中的空单元格。
table-layout设置显示单元、行和列的算法。
网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
文章列表
教程文档
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号