CSS 表格

CSS 表格属性可以帮助您极大地改善表格的外观。

表格边框

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

下面的例子为 table、th 以及 td 设置了蓝色边框：

  1. table, th, td
  2.   {
  3.   border: 1px solid blue;
  4.   }

请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

折叠边框

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

  1. table
  2.   {
  3.   border-collapse:collapse;
  4.   }
  5.  
  6. table,th, td
  7.   {
  8.   border: 1px solid black;
  9.   }

表格宽度和高度

通过 width 和 height 属性定义表格的宽度和高度。

下面的例子将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px：

  1. table
  2.   {
  3.   width:100%;
  4.   }
  5.  
  6. th
  7.   {
  8.   height:50px;
  9.   }

表格文本对齐

text-align 和 vertical-align 属性设置表格中文本的对齐方式。

text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：

  1. td
  2.   {
  3.   text-align:right;
  4.   }

vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：

  1. td
  2.   {
  3.   height:50px;
  4.   vertical-align:bottom;
  5.   }

表格内边距

如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：

  1. td
  2.   {
  3.   padding:15px;
  4.   }

表格颜色

下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：

  1. table, td, th
  2.   {
  3.   border:1px solid green;
  4.   }
  5.  
  6. th
  7.   {
  8.   background-color:green;
  9.   color:white;
  10.   }

CSS Table 属性

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

更多实例

制作一个漂亮的表格

本例演示如何创造一个漂亮的表格。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #customers
  5.   {
  6.   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  7.   width:100%;
  8.   border-collapse:collapse;
  9.   }
  11. #customers td, #customers th 
  12.   {
  13.   font-size:1em;
  14.   border:1px solid #98bf21;
  15.   padding:3px 7px 2px 7px;
  16.   }
  18. #customers th 
  19.   {
  20.   font-size:1.1em;
  21.   text-align:left;
  22.   padding-top:5px;
  23.   padding-bottom:4px;
  24.   background-color:#A7C942;
  25.   color:#ffffff;
  26.   }
  28. #customers tr.alt td 
  29.   {
  30.   color:#000000;
  31.   background-color:#EAF2D3;
  32.   }
  33. </style>
  34. </head>
  36. <body>
  37. <table id="customers">
  38. <tr>
  39. <th>Company</th>
  40. <th>Contact</th>
  41. <th>Country</th>
  42. </tr>
  44. <tr>
  45. <td>Apple</td>
  46. <td>Steven Jobs</td>
  47. <td>USA</td>
  48. </tr>
  50. <tr class="alt">
  51. <td>Baidu</td>
  52. <td>Li YanHong</td>
  53. <td>China</td>
  54. </tr>
  56. <tr>
  57. <td>Google</td>
  58. <td>Larry Page</td>
  59. <td>USA</td>
  60. </tr>
  62. <tr class="alt">
  63. <td>Lenovo</td>
  64. <td>Liu Chuanzhi</td>
  65. <td>China</td>
  66. </tr>
  68. <tr>
  69. <td>Microsoft</td>
  70. <td>Bill Gates</td>
  71. <td>USA</td>
  72. </tr>
  74. <tr class="alt">
  75. <td>Nokia</td>
  76. <td>Stephen Elop</td>
  77. <td>Finland</td>
  78. </tr>
  81. </table>
  82. </body>
  83. </html>

显示表格中的空单元

本例演示是否显示表格中的空单元。 

  1. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <style type="text/css">
  6. table
  7. {
  8. border-collapse: separate;
  9. empty-cells: hide;
  10. }
  11. </style>
  12. </head>
  13. <body>
  15. <table border="1">
  16. <tr>
  17. <td>Adams</td>
  18. <td>John</td>
  19. </tr>
  20. <tr>
  21. <td>Bush</td>
  22. <td></td>
  23. </tr>
  24. </table>
  26. <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 属性。</p>
  28. </body>
  29. </html>

设置表格边框之间的空白

本例演示如何设置单元格边框之间的距离。 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <style type="text/css">
  6. table.one 
  7. {
  8. border-collapse: separate;
  9. border-spacing: 10px
  10. }
  11. table.two
  12. {
  13. border-collapse: separate;
  14. border-spacing: 10px 50px
  15. }
  16. </style>
  17. </head>
  18. <body>
  20. <table class="one" border="1">
  21. <tr>
  22. <td>Adams</td>
  23. <td>John</td>
  24. </tr>
  25. <tr>
  26. <td>Bush</td>
  27. <td>George</td>
  28. </tr>
  29. </table>
  31. <br />
  33. <table class="two" border="1">
  34. <tr>
  35. <td>Carter</td>
  36. <td>Thomas</td>
  37. </tr>
  38. <tr>
  39. <td>Gates</td>
  40. <td>Bill</td>
  41. </tr>
  42. </table>
  44. <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 border-spacing 属性。</p>
  46. </body>
  47. </html>

设置表格标题的位置

本例演示如何定位表格的标题。 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <style type="text/css">
  6. caption
  7. {
  8. caption-side:bottom
  9. }
  10. </style>
  11. </head>
  12. <body>
  14. <table border="1">
  15. <caption>This is a caption</caption>
  16. <tr>
  17. <td>Adams</td>
  18. <td>John</td>
  19. </tr>
  20. <tr>
  21. <td>Bush</td>
  22. <td>George</td>
  23. </tr>
  24. </table>
  26. <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side 属性。</p>
  28. </body>
  29. </html>