首頁 > web前端 > 前端問答 > css怎麼設定table顏色

css怎麼設定table顏色

藏色散人
發布: 2023-01-04 09:35:33
原創
3796 人瀏覽過

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中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板