在本教程中，我们将学习CSS Table样式属性。

边框

我们使用border属性来设置表格边框的样式。

在下面的示例中，我们将边框设置为1px。

table {
	border : 1px solid #333;
}

注意！ th和td具有自己的边界，因此我们必须分别设置边界。

在下面的示例中，我们设置了table，th和td的边框。

table, th, td {
	border : 1px solid #333;
}

border-collapse

我们使用border-collapse属性将边框折叠成一个边框。

在下面的示例中，我们将border-collapse属性设置为collapse。

table {
	border-collapse : collapse;
}

table, th, td {
	border : 1px solid #333;
}

填充

我们使用padding属性来设置th和td的填充。

在下面的示例中，我们将th和td的填充设置为15px；

table, th, td {
	border : 1px solid #333;
}

th, td {
	padding : 15px;
}

宽度

我们使用width属性来设置表格的宽度。

对于固定宽度，我们将表格的宽度设置为固定值。
对于可变宽度，我们使用百分比。

在下面的示例中，我们将表格的宽度设置为250px。

table {
	width : 250px;
}

table, th, td {
	border : 1px solid #333;
}

在下面的示例中，我们将表格的宽度设置为100％。

table {
	width : 100%;
}

table, th, td {
	border : 1px solid #333;
}

高度

我们使用height属性来设置桌子的高度。

在以下示例中，我们将th和td的高度设置为50px。

table, th, td {
	border : 1px solid #333;
}

th, td {
	height : 50px;
}

文字对齐

我们使用text-align属性来将th和td的内容与left，center和right对齐。

在以下示例中，我们将" th"的文本对齐方式设置为居中，将" td"的文本对齐方式设置为向左。

table {
	width : 40%;
}

table, th, td {
	border : 1px solid #333;
}

th {
	text-align : center;
}

td {
	text-align : left;
}

垂直对齐

我们使用vertical-align属性将th和td的内容对齐到top，middle和bottom对齐。

在下面的示例中，我们将第th的垂直对齐设置为Middle，将td的垂直对齐设置为bottom。

table {
	width : 40%;
}

table, th, td {
	border : 1px solid #333;
}

th {
	vertical-align : middle;
	height : 50px;
}

td {
	vertical-align : bottom;
	height : 50px;
}

条纹表格

我们可以使用：nth-child()选择器来创建条纹表。

在下面的示例中，我们将标题行的背景色设置为" lightyellow"，并将偶数位置(第二，第四，...)的所有行设置为" lightblue"。

table {
	width : 100%;
}

table, th, td {
	border : 1px solid #333;
}

tr:nth-child(1) {
	background-color : lightyellow;
}

tr:nth-child(even) {
	background-color : lightblue;
}

悬停表格

当鼠标悬停在表顶部时，我们可以使用：hover使表行突出显示。

在下面的示例中，当鼠标悬停在表格行上方时，表格行的背景颜色将变为浅黄色。

table {
	width : 100%;
}

table, th, td {
	border : 1px solid #333;
}

tr:hover {
	background-color : lightyellow;
}