• 技术文章 >web前端 >前端问答

    css怎么设置table颜色

    藏色散人藏色散人2021-04-09 10:05:56原创99

    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颜色的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css怎么设置不显示文字 下一篇:css图片怎么设置透明度
    第15期线上培训班

    相关文章推荐

    • css怎么实现多行文本溢出隐藏• css怎么设置微软雅黑• css如何实现显示和隐藏• css不可能实现的功能是什么• css怎么排除第一个子元素

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网