1、表格边框

  1. 第一个参数：边框的宽度
  2. 第二个参数：边框线的样式
  3. 第三个参数：边框线的颜色
  4. table, td{
  5.   border: 1px solid black;
  6. }

2、折叠边框

将双边框折叠在一起，只剩下一条边框，即单边框

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

3、表格宽度和高度

  1. table{
  2.   border-collapse: collapse;
  3.   width: 500px;
  4.   height: 60px;
  5. }

4、表格文字对齐试

  1. td{
  2.   /* 设置水平方向的对齐方式 */
  3.   text-align: right;
  4.   /* 设置垂直方向的对齐方式 */
  5.   height: 50px; vertical-align: bottom;
  6. }

5、表格填充

  1. 给文字离边框的上下左右添加15px的空隙。
  2. td { padding:15px;}

6、表格颜色

  1. td { 
  2.   /* 背景颜色 */
  3.   background-color: antiquewhite;
  4.   /* 字体颜色 */
  5.   color: white;
  6. }

示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格属性</title>
  7.     <style>
  8.         table, td{
  9.             border: 1px solid black;
  10.         }
  12.         table{
  13.             border-collapse: collapse;
  14.             width: 500px;
  15.             height: 60px;
  16.         }
  18.         td{
  19.             /* 设置水平方向的对齐方式 */
  20.             text-align: right;
  21.             /* 设置垂直方向的对齐方式 */
  22.             height: 50px; vertical-align: bottom;
  23.             padding:15px;
  24.             /* 背景颜色 */
  25.             background-color: antiquewhite;
  26.             /* 字体颜色 */
  27.             color: white;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <table>
  33.         <tr>
  34.             <td>表格</td>
  35.             <td>表格</td>
  36.             <td>表格</td>
  37.         </tr>
  38.         <tr>
  39.             <td>表格</td>
  40.             <td>表格</td>
  41.             <td>表格</td>
  42.         </tr>
  43.         <tr>
  44.             <td>表格</td>
  45.             <td>表格</td>
  46.             <td>表格</td>
  47.         </tr>
  48.     </table>
  49. </body>
  50. </html>