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>
댓글 없음:
댓글 쓰기