Home > Backend Development > PHP Problem > How to change table background color in php

How to change table background color in php

PHPz
Release: 2023-04-24 15:47:32
Original
1391 people have browsed it

PHP (Hypertext Preprocessor) is a scripting language widely used in website development, mainly used to develop dynamic data-driven websites. In website development, tables are one of the very important components, which can be used to display data, layout web pages, etc. The appearance of the table is also important to the user experience, including the background color of the table.

This article will introduce in detail how to change the background color of the table through PHP.

1. Use style sheets (CSS)

The easiest way to define the background color of a table in HTML is to use a style sheet. Place a CSS style sheet file in the root directory of the website, with the file name style.css. Define all styles in the style sheet file, and then reference the style sheet file in the HTML file. The following is an example of a style sheet file:

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;
}
Copy after login

In the style sheet file, we define the background color of the table to be white (#fff), the odd-numbered rows to be light gray (#f2f2f2), and the header background color to be Dark gray (#555), color is white (#fff), table cell border is 1 pixel wide, gray border (#ddd), text content is left 8 pixels above, below, and right.

Add the following code to the tag of the HTML file:

<link rel="stylesheet" href="style.css">
Copy after login

Here, we have introduced the style.css file.

Next, we create a table in the HTML file.

<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>
Copy after login

In this HTML code, we create a simple table, including table header and table content.

Open the HTML file in the browser, you will find that the background color of the table has been changed according to the style sheet.

2. Use PHP to dynamically change the background color of the table

In some cases, we need to dynamically change the background color of the table in PHP. For example, when generating a table based on database content, different colors are displayed based on different data. In this case, we can change the background color of the table using the following method.

  1. Use conditional statements
<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>
Copy after login

In this PHP code, we use conditional statements to determine whether the current row is an even number, and if so, set the table background color to light gray , otherwise it defaults to white.

  1. Using Arrays
$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++;
}
Copy after login

In this PHP code, we create an array containing three color codes and then use $i%3 to cycle through the color codes .

Summary

In this article, we introduced two methods to change the background color of a table: using a style sheet and changing it dynamically using PHP. Either way, you need to understand the basic syntax of HTML and CSS. Through these methods, you can flexibly control the appearance of the table and improve the user experience of the website.

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template