CSS包含一组CSS属性，可以设置HTML表格的样式。 CSS使我们可以操纵页边距，边框，表格单元格上的填充，文本对齐，背景图像等等。本文将解释所有这些CSS属性。

宽度和高度

我们可以使用CSS框模型的教程中所述的width和height属性来设置表格的宽度和高度。

我们还可以设置单个表格单元格的宽度和高度(" td"和" th"元素)。

Margin

我们可以在HTML表格上设置边距，就像使用div，p或者其他元素一样。我的CSS边距教程中介绍了边距。

边框

我们可以像其他HTML元素一样在HTML表格上设置边框。我的CSS边框教程涵盖了边框。

我们可以为整个表格元素设置边框，也可以为表格单元格(th和td元素)设置边框。我们还可以为整个表格和单个表格单元格设置顶部，右侧，底部和左侧边框。

填充表格单元格

我们不能直接在HTML表格上设置填充，但可以在表格单元格上设置填充。这意味着我们可以在th和td元素上设置填充。

我们可以分别为单个表格单元格设置填充，也可以分别为单元格设置顶部，右侧，底部和左侧填充。

关于CSS填充的文字涵盖了通过CSS设置填充的内容。

文字对齐

通过text-align CSS属性可以设置表格单元格中文本的对齐方式。 text-align属性可以应用于整个表格(table元素)，也可以应用于单个表格单元格td和th元素。

" text-align"属性可以采用以下值：

• 开始
• 结束
• 左
• "对"
• 中心
• 合理化

如果浏览器的渲染模式为从左到右，则start的值与left的值相同。如果渲染模式是从右到左，则"开始"与"右"相同。

如果浏览器的渲染模式为从左到右，则end值与right相同。如果渲染模式是从右到左，则" end"与" left"相同。

" left"值使文本向表格单元格的左边缘对齐。

" right"值使文本与表格单元格的右边缘对齐。

" center"值使文本在表格单元格中居中。

" justify"值会增加字符和单词之间的间距，直到文本的左右边缘都与表格单元格的左右边缘对齐为止。

垂直对齐

" vertical-align" CSS属性使我们可以指定文本在表格单元格内的垂直对齐方式。我们可以为整个表格或者单独为表格单元设置vertical-alignCSS属性。

vertical-alignCSS属性可以接受以下值：

• top
• middle
• bottom

实际上，" vertical-align" CSS属性可以使用的值更多，但这些值是表中最常用的值。 vertical-alignCSS属性也可以与表格以外的其他HTML元素一起使用。

这是一个HTML表，该表说明了vertical-align值的影响：

背景图像

background-imageCSS属性可用于设置表格的背景图像。在我有关CSS背景图像的文字中将更详细地介绍为HTML元素设置背景图像。

边界间距

当我们在表格单元格上设置边框时，通常表格单元格之间有很小的空间。这是我们可以使用table元素的cellspacing属性来控制的。我们还可以使用CSS属性border-spacing控制此空间。

这是两个"边界间距"示例：

table.noSpace {
    border-spacing : 0px;
    border : 1px solid #cccccc;
}
table.noSpace td {
    border : 1px solid #cccccc;
}

table.withSpace {
    border-spacing : 10px;
    border : 1px solid #cccccc;
}
table.withSpace td {
    border : 1px solid #cccccc;
}

如果使用上述border-spacing加上表格和表格单元格上的边框进行渲染，则这两个表格的外观如下：

注意表单元格之间的不同间距。

边界崩溃

如果查看上一节中显示的两个表(关于"边框间距")，我们会注意到表单元格之间有两个边框。每个表格单元格周围有一个边框，这意味着表格单元格之间将有2个边框。 " border-collapse"属性可以控制是在表格单元格之间绘制一个还是两个边框。

border-collapseCSS属性可以采用以下值：

• 分开
• 崩溃

" separate"值是默认值。此值意味着应该绘制表格单元格上的边框，就像表格单元格是单独的HTML元素一样。

" collapse"值表示表格单元格之间的边界应折叠。因此，即使所有表单元格都具有边框，也将仅绘制一个边框。这是两个border-collapse的例子：

table.withSpace {
    border-spacing  : 10px;
    border          : 1px solid #cccccc;
    border-collapse : separate
}
table.withSpace td {
    border          : 1px solid #cccccc;
}

     
table.withSpace {
    border-spacing  : 10px;
    border          : 1px solid #cccccc;
    border-collapse : separate
}
table.withSpace td {
    border          : 1px solid #cccccc;
}

这是使用上述CSS样式呈现时这两个表的外观：

请注意，带有" border-collapse：塌陷"的第二张表在表格单元格之间或者任何表格单元格与表格边缘之间的边界永远不会超过一个。