使用 CSS 可以极大地改善 HTML 表格的外观：

亲自试一试

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下例为 <table>、<th> 和 <td> 元素规定了黑色边框：

实例

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

亲自试一试

注意：上例中的表格拥有双边框。这是因为 table 和 <th> 和 <td> 元素都有单独的边框。

全宽表格

在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为 <table> 元素添加 width: 100%：

实例

table {
  width: 100%;}

亲自试一试

双边框

请注意上面的表格有双边框。这是因为表格和 th、td 元素都有单独的边框。

如需删除双边框，请看下面的例子。

合并表格边框

border-collapse 属性设置是否将表格边框折叠为单一边框：

实例

table {
  border-collapse: collapse;}table, th, td {
  border: 1px solid black;}

亲自试一试

如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性：