表格通常用于顯示表格數(shù)據(jù)。
當(dāng)您構(gòu)建沒有任何樣式或?qū)傩缘?a href="../html/html-tables.html">HTML表時，瀏覽器將顯示它們而沒有任何邊框。使用CSS樣式化表格可以大大改善其外觀。
以下各節(jié)將向您展示如何使用CSS控制表格元素的布局和表示方式，以創(chuàng)建優(yōu)雅而一致的表格。
CSS border屬性是定義表格邊框的最佳方法。
下面的實例將設(shè)置一個黑色邊框的<table>，<th>和<td>元素。
table, th, td {
border: 1px solid black;
}測試看看?/?如果您看到了前面示例的輸出，您會注意到每個表格單元格都有單獨的邊框，并且相鄰表格單元格的邊框之間有一定的間隔。發(fā)生這種情況是因為默認(rèn)情況下表格單元格邊界是分隔的。但是，您可以使用元素border-collapse上的屬性將單獨的表格邊框折疊成一個邊框<table>：
在下面的示例中，樣式規(guī)則將折疊表格單元格邊框，并將一個像素的黑色邊框應(yīng)用于表格和表格單元格元素。
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}測試看看?/?您也可以通過CSS的值設(shè)置刪除表格單元格邊框之間的空間border-spacing屬性為0。但是，它只是刪除了空間，但不合并就像當(dāng)你設(shè)定的邊界border-collapse來collapse。
注意：如果<!DOCTYPE>未在HTML文檔中指定a ，則border-collapseCSS屬性可能會產(chǎn)生意外的結(jié)果。
默認(rèn)情況下，瀏覽器創(chuàng)建的表單元格正好足以容納單元格中的數(shù)據(jù)。要在表格單元格的內(nèi)容周圍添加更多空間，可以使用CSS padding屬性，如下所示：
th, td {
padding: 15px;
}測試看看?/?border-spacing如果表格的邊框是分開的（默認(rèn)設(shè)置），則還可以使用CSS 屬性調(diào)整單元格邊框之間的間距。
以下樣式規(guī)則在表格中的所有邊框之間應(yīng)用10像素的間距：
table {
border-spacing: 10px;
}測試看看?/?默認(rèn)情況下，表會擴(kuò)展和收縮以容納其中包含的數(shù)據(jù)。當(dāng)數(shù)據(jù)填充到表中時，只要有空間，數(shù)據(jù)就會繼續(xù)擴(kuò)展。但是，有時需要為表格設(shè)置固定寬度以管理布局。
您可以借助CSS table-layout屬性來執(zhí)行此操作。此屬性定義用于布置表格單元格，行和列的算法。此屬性采用兩個值之一：
auto —使用自動表格布局算法。使用此算法，可以調(diào)整表格及其單元格的寬度以適合內(nèi)容。這是默認(rèn)值。
fixed -使用固定表布局算法。使用這種算法，表格的水平布局不取決于單元格的內(nèi)容；它僅取決于表格的寬度，列的寬度以及邊框或單元格的間距。
在下面的示例中，樣式規(guī)則指示表是使用固定布局算法進(jìn)行布局的，并且具有300像素的固定寬度。
table {
width: 300px;
table-layout: fixed;
}測試看看?/?沒有該table-layout屬性的固定值，在大型表上，用戶將看不到表的任何部分，直到瀏覽器呈現(xiàn)了整個表。
提示：您可以通過指定table-layout屬性來優(yōu)化表呈現(xiàn)性能。此屬性的固定值使表一次呈現(xiàn)一行，從而為用戶提供更快的信息。
該empty-cellsCSS屬性控制邊界，并有在表上沒有明顯的內(nèi)容是一個使用分離的邊框模型細(xì)胞背景的渲染。
這個屬性可以取三個值之一：show，hide或inherit。
以下樣式規(guī)則在table元素中隱藏空單元格。
table {
border-collapse: separate;
empty-cells: hide;
}測試看看?/?該caption-sideCSS屬性設(shè)置表格標(biāo)題框的垂直位置。
以下樣式規(guī)則將表標(biāo)題放在其父表下方。但是，要更改字幕文本的水平對齊方式，可以使用該text-align屬性。
caption {
caption-side: bottom;
}測試看看?/?