PHPでテーブルの背景色を変更する方法

PHPz
リリース: 2023-04-24 15:47:32
オリジナル
1337 人が閲覧しました

PHP (ハイパーテキスト プリプロセッサ) は、Web サイト開発で広く使用されているスクリプト言語であり、主に動的なデータ駆動型 Web サイトの開発に使用されます。 Web サイト開発において、テーブルは非常に重要なコンポーネントの 1 つであり、データの表示や Web ページのレイアウトなどに使用できます。テーブルの背景色など、テーブルの外観もユーザー エクスペリエンスにとって重要です。

この記事では、PHPでテーブルの背景色を変更する方法を詳しく紹介します。

1. スタイル シート (CSS) を使用する

HTML でテーブルの背景色を定義する最も簡単な方法は、スタイル シートを使用することです。 CSS スタイル シート ファイルを、style.css というファイル名で Web サイトのルート ディレクトリに配置します。スタイル シート ファイルですべてのスタイルを定義し、HTML ファイルでそのスタイル シート ファイルを参照します。以下はスタイル シート ファイルの例です。

table {
  background-color: #fff;
}

table tr:nth-child(odd) {
  background-color: #f2f2f2;
}

table th {
  background-color: #555;
  color: #fff;
}

table td {
  border: 1px solid #ddd;
  padding: 8px;
}
ログイン後にコピー

スタイル シート ファイルでは、テーブルの背景色を白 (#fff)、奇数行を明るい灰色 ( #f2f2f2)、ヘッダーの背景色はダーク グレー (#555)、色は白 (#fff)、テーブル セルの境界線は幅 1 ピクセル、灰色の境界線 (#ddd)、テキスト コンテンツは上下 8 ピクセル残します。 、そうです。

次のコードを HTML ファイルの タグに追加します:

<link rel="stylesheet" href="style.css">
ログイン後にコピー

ここでは、style.css ファイルを導入しました。

次に、HTML ファイル内にテーブルを作成します。

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    <tr>
      <td>内容7</td>
      <td>内容8</td>
      <td>内容9</td>
    </tr>
  </tbody>
</table>
ログイン後にコピー

この HTML コードでは、テーブル ヘッダーとテーブル コンテンツを含む単純なテーブルを作成します。

ブラウザで HTML ファイルを開くと、表の背景色がスタイル シートに従って変更されていることがわかります。

2. PHP を使用してテーブルの背景色を動的に変更する

場合によっては、PHP でテーブルの背景色を動的に変更する必要があります。たとえば、データベースの内容に基づいてテーブルを生成する場合、異なるデータに基づいて異なる色が表示されます。この場合、次の方法でテーブルの背景色を変更できます。

  1. 条件ステートメントを使用する
<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
  </thead>
  <tbody>
    <?php
      $i = 1;
      while ($row = mysql_fetch_assoc($result)) {
        if ($i % 2 == 0) {
          echo &#39;<tr style="background-color:#f2f2f2;">';
        } else {
          echo '<tr>';
        }
        echo '<td>'.$row['col1'].'</td>';
        echo '<td>'.$row['col2'].'</td>';
        echo '<td>'.$row['col3'].'</td>';
        echo '</tr>';
        $i++;
      }
    ?>
  </tbody>
</table>
ログイン後にコピー

この PHP コードでは、条件ステートメントを使用して現在の行が偶数かどうかを判断し、偶数であればテーブルの背景を設定します。 color をライトグレーに設定します。それ以外の場合はデフォルトで白になります。

  1. 配列の使用
$colors = array('#fff', '#f2f2f2', '#ccc');
$i = 0;
while ($row = mysql_fetch_assoc($result)) {
  echo '<tr style="background-color:&#39;.$colors[$i % 3].&#39;;">';
  echo '<td>'.$row['col1'].'</td>';
  echo '<td>'.$row['col2'].'</td>';
  echo '<td>'.$row['col3'].'</td>';
  echo '</tr>';
  $i++;
}
ログイン後にコピー

この PHP コードでは、3 つのカラー コードを含む配列を作成し、$i%3 を使用してカラー コードを循環します。

概要

この記事では、テーブルの背景色を変更する 2 つの方法、スタイル シートを使用する方法、および PHP を使用して動的に変更する方法を紹介しました。いずれにしても、HTML と CSS の基本的な構文を理解する必要があります。これらの方法により、テーブルの外観を柔軟に制御し、Web サイトのユーザー エクスペリエンスを向上させることができます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート