css怎么设置table颜色-前端问答-PHP中文网

css怎么设置table颜色

藏色散人

发布： 2021-04-09 10:05:56

原创

4107人浏览过

css设置table颜色的方法：首先找到并打开需要设置的table代码内容；然后通过color属性设置表格中文字的颜色；最后通过background属性设置表格的背景颜色即可。

css怎么设置table颜色

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

CSS设置表格的颜色

表格的颜色设置非常简单，和文字的颜色设置完全一样。

CSS通过color属性设置表格中文字的颜色，通过background属性设置表格的背景颜色。

立即学习“前端免费学习笔记（深入）”；

<span style="font-size:24px;"><html>
       <head>
              <title>
                     年度收入
              </title>
              <style>
                     <!--
                     body{
                     background-color:#ebf5ff;
                     margin:0px;
                     padding:4px;
                     text-align:center;
              }
                     .datalist{
                     color:#0046a6;
                     background-color:#d2e8ff;
                     font-family:Arial;
              }
                     .datalistcaption{
                     font-size:18px;
                     font-weight:bold;
              }
                     .datalistth{
                     color:#003e7e;
                     background-color:#7bb3ff;
              }
                     -->
              </style>
       </head>
      
       <body>            
              <tablesummary="This table shows the yearly income for years 2004 through2007" border="1">
                     <caption>年度收入2004-2007</caption>
                     <tr>
                            <th></th>
                            <thscope="col">2004</th>
                            <thscope="col">2005</th>
                            <thscope="col">2006</th>
                            <thscope="col">2007</th>
                     </tr>
                     <tr>
                            <thscope="row">捐款</th>
                            <td>11.980</td>
                            <td>12.650</td>
                            <td>9.700</td>
                            <td>10.600</td>
                     </tr>
                     <tr>
                            <thscope="row">拨款</th>
                            <td>11.980</td>
                            <td>12.650</td>
                            <td>9.700</td>
                            <td>10.600</td>
                     </tr>
                     <tr>
                            <thscope="row">投资</th>
                            <td>11.980</td>
                            <td>12.650</td>
                            <td>9.700</td>
                            <td>10.600</td>
                     </tr>
                     <tr>
                            <thscope="row">募捐</th>
                            <td>11.980</td>
                            <td>12.650</td>
                            <td>9.700</td>
                            <td>10.600</td>
                     </tr>
                     <tr>
                            <thscope="row">销售</th>
                            <td>11.980</td>
                            <td>12.650</td>
                            <td>9.700</td>
                            <td>10.600</td>
                     </tr>
              </table>
       </body>
</html></span>

登录后复制

此时，可以看到页面的背景色、表格背景色、行列的名称颜色、字体都进行了相应的变化，而这些设置和文字的CSS设置完全相同，与页面背景的设置也完全一样。

【推荐学习：css视频教程】

以上就是css怎么设置table颜色的详细内容，更多请关注php中文网其它相关文章！