PHP에서 DB에 저장되어 있는 데이터를 가져와서 도표(table) 형태로 표시할 때 모든 행이 같은 색상이면 가독성의 측면에서 바람직하지 않을 것이다. 이럴때 홀수 행의 색상을 약간 다르게 표시하면 가독성이 훨씬 높아 질 것이다.

이럴 경우 CSS를 이용하면 매우 간단하게 처리를 할수가 있다.

아래와 같은 코드가 있다면 이 코드가 생성해 내는 테이블은 짝수 행의 색상이 약간 짙은 회색(#f2f2f2)으로 표현되어 한 행 건너마다 기본 색상과 다르게 표현되어 가독성이 훨신 좋아 질 것이다.

이러한 기능을 하는 핵심 코드가 아래에서 CSS의 #tmTable tr:nth-child(even){background-color: #f2f2f2;}이다.

물로 이를 위해서는 table의 id를 tmTable로 지정해 주어야 하는 것은 당연한 일이다.


<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>TM현황</title>

    <style type="text/css">

     ... 중 략 ...

      #tmTable tr:nth-child(even){background-color: #f2f2f2;}

    </style>

  </head>

  <body>

    <div id="wrap">

      <h1>업체현황</h1>

      <a href="./login.html">로그인</a>

      <table id="tmTable">

        <thead>

          <th>No.</th>

          <th>날짜</th>

          <th>업체명</th>

          ... 중 략 ...

          <th>복합기</th>

        </thead>

    <?php

include_once 'config.php';

$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

if(!$conn){

echo "Error: Unable to connec to MySQL.".PHP_EOL;

echo "Debugging errno: ".mysqli_connect_errno().PHP_EOL;

echo "Debugging error: ".mysqli_connect_error().PHP_EOL;

exit;

}


if(mysqli_connect_errno()){

echo "Failed to connect to TM Database".mysqli_connect_error();

exit;

}


$query = "SELECT * FROM tm order by seq desc;";

$rt = mysqli_query($conn, $query);


while($row = mysqli_fetch_assoc($rt))

{

        echo "<tr>";

          echo "<td>".$row['seq']."</td>";

          echo "<td>".$row['year'].".".$row['month'].".".$row['day']."</td>";

          echo "<td>".$row['company']."</td>";

                            ... 중 략 ...

echo "<td>".$row['copier']."</td>";

        echo "</tr>";

}


mysqli_close($conn);

    ?>

      </table>

    </div>

  </body>

</html>



+ Recent posts