一般情况下，在 HTML 中，我们主要使用 <table> 元素来显示数据，同时我们也可以使用一些 <table> 相关的 CSS 属性来改善它的外观

表格边框

如果希望表格显示边框，可以使用 border 属性，以下示例为 <table>，<th> 和 <td> 设置蓝色边框

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

请注意，上例中的表格具有双线边框，这是由于 table，th 和 td 的元素各有一个单独的边框

如果要将表的边框设置为单线边框，则可以使用 border-collapse 属性

合并表格边框

我们可以使用 border-collapse 属性将表边框设置为单线边框或双边框

例如，上例中，可以使用 border-collapsecollapse 将表的双边框更改为单个边框

table {
    border-collapse:collapse;
}

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

宽度和高度

我们可以使用 width 和 height 属性定义表的宽度和高度

下面的示例中，我们将表的宽度设置为 100%，将 <th> 元素的高度设置为 50px

table {
    border-collapse:collapse;
    width:100%;
}

th {
    height:50px;
}

文本对齐

我们还可以使用 text-align 和 vertical-align 属性来设置表的文本对齐方式

text-align 属性用于设置水平对齐，例如左对齐 left，右对齐 right 或中心对齐 ceter

td {
    text-align:right;
}

注意: <th> 元素的内容在表格中默认为居中对齐，而 <td> 则默认为左对齐

vertical-align 属性用于设置垂直对齐，例如顶部对齐 top，底部对齐 bottom 或中心对齐 middle

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

注意: 表格中的内容都会默认为垂直居中对齐，也就是 vertical-align:middle

填充 padding

如果想要控制表格内容与边框之间的距离，可以设置 <td> 元素和 <th> 元素的填充属性 padding

th, td {
    padding: 15px;
    text-align: left;
}

颜色

我们可以设置表格边框的颜色，或设置 <th> 元素和 <td> 元素的背景颜色

例如

table {
    border-collapse:collapse;
}

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

th {
    background-color:green;
    color:white;
}

隔行变色

我们可以使用 nth-child() 选择器来为奇偶行设置不同的背景色以达到隔行变色的目的

table {
    border-collapse:collapse;
}

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

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