How to set table color in css-Front-end Q&A-php.cn

How to set table color in css

藏色散人

Release： 2023-01-04 09:35:33

Original

3784 people have browsed it

How to set the table color in css: first find and open the table code content that needs to be set; then set the color of the text in the table through the color attribute; finally set the background color of the table through the background attribute.

How to set table color in css

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

CSS setting the color of the table

The color setting of the table is very simple, exactly the same as the color setting of the text.

CSS sets the color of the text in the table through the color attribute, and sets the background color of the table through the background attribute.

<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>

Copy after login

At this point, you can see that the background color of the page, the background color of the table, the name color of the rows and columns, and the font have all been changed accordingly. These settings are exactly the same as the CSS settings of the text and are the same as those of the page background. The settings are exactly the same.

【Recommended learning: css video tutorial】

The above is the detailed content of How to set table color in css. For more information, please follow other related articles on the PHP Chinese website!