Bagaimana untuk menukar warna latar belakang jadual dalam php

PHPz
Lepaskan: 2023-04-24 15:47:32
asal
1355 orang telah melayarinya

PHP (Hypertext Preprocessor) ialah bahasa skrip yang digunakan secara meluas dalam pembangunan tapak web, terutamanya digunakan untuk membangunkan tapak web dipacu data dinamik. Dalam pembangunan laman web, jadual adalah salah satu komponen yang sangat penting, yang boleh digunakan untuk memaparkan data, susun atur halaman web, dll. Penampilan jadual juga penting kepada pengalaman pengguna, termasuk warna latar belakang jadual.

Artikel ini akan memperkenalkan secara terperinci cara menukar warna latar belakang jadual melalui PHP.

1. Gunakan helaian gaya (CSS)

Cara paling mudah untuk menentukan warna latar belakang jadual dalam HTML ialah menggunakan helaian gaya. Letakkan fail helaian gaya CSS dalam direktori akar tapak web, dengan nama fail style.css. Tentukan semua gaya dalam fail helaian gaya, dan kemudian rujuk fail helaian gaya dalam fail HTML. Berikut ialah contoh fail helaian gaya:

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;
}
Salin selepas log masuk

Dalam fail helaian gaya, kami mentakrifkan warna latar belakang jadual sebagai putih (#fff), baris bernombor ganjil sebagai kelabu muda (# f2f2f2), dan latar belakang pengepala jadual Warna kelabu gelap (#555), warna putih (#fff), sempadan sel jadual ialah 1 piksel lebar, sempadan kelabu (#ddd) dan kandungan teks mempunyai 8 piksel ruang di bahagian atas, bawah, kiri dan kanan.

Tambahkan kod berikut pada teg bagi fail HTML:

<link rel="stylesheet" href="style.css">
Salin selepas log masuk

Di sini, kami telah memperkenalkan fail style.css.

Seterusnya, kami mencipta jadual dalam fail 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>
Salin selepas log masuk

Dalam kod HTML ini, kami mencipta jadual ringkas, termasuk pengepala jadual dan kandungan jadual.

Buka fail HTML dalam penyemak imbas, anda akan mendapati bahawa warna latar belakang jadual telah ditukar mengikut helaian gaya.

2. Gunakan PHP untuk menukar warna latar belakang jadual secara dinamik

Dalam sesetengah kes, kita perlu menukar warna latar belakang jadual dalam PHP secara dinamik. Sebagai contoh, apabila menjana jadual berdasarkan kandungan pangkalan data, warna yang berbeza dipaparkan berdasarkan data yang berbeza. Dalam kes ini, kita boleh menukar warna latar belakang jadual menggunakan kaedah berikut.

  1. Gunakan pernyataan bersyarat
<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>
Salin selepas log masuk

Dalam kod PHP ini, kami menggunakan pernyataan bersyarat untuk menentukan sama ada baris semasa ialah baris genap, dan jika ya, tetapkan warna latar belakang jadual kepada Kelabu muda, jika tidak lalai kepada putih.

  1. Menggunakan tatasusunan
$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++;
}
Salin selepas log masuk

Dalam kod PHP ini, kami mencipta tatasusunan yang mengandungi tiga kod warna dan kemudian menggunakan $i%3 untuk menggelungkannya melalui kod Warna.

Ringkasan

Dalam artikel ini, kami memperkenalkan dua kaedah untuk menukar warna latar belakang jadual: menggunakan helaian gaya dan menukarnya secara dinamik menggunakan PHP. Sama ada cara, anda perlu memahami sintaks asas HTML dan CSS. Melalui kaedah ini, anda boleh mengawal penampilan jadual secara fleksibel dan meningkatkan pengalaman pengguna tapak web.

Atas ialah kandungan terperinci Bagaimana untuk menukar warna latar belakang jadual dalam php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan