CSSでテーブルの色を設定する方法-フロントエンドQ&A-php.cn

CSSでテーブルの色を設定する方法

藏色散人

リリース： 2023-01-04 09:35:33

オリジナル

3784 人が閲覧しました

CSS でテーブルの色を設定する方法: まず、設定する必要があるテーブルコードコンテンツを見つけて開きます。次に color 属性を使用してテーブル内のテキストの色を設定し、最後にテーブルの背景色を設定します。背景属性を介してテーブル。

CSSでテーブルの色を設定する方法

この記事の動作環境: 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 ビデオチュートリアル】

以上がCSSでテーブルの色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。