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设置显示单元、行和列的算法。