当前位置:Gxlcms > 前端框架 > css怎么设置table颜色

css怎么设置table颜色

时间:2021-07-01 10:21:17 帮助过:143人阅读

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

本文操作环境: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颜色的详细内容,更多请关注gxlcms其它相关文章!

人气教程排行