테이블
HTML에서 표를 만들 수 있는 테이블을 알아보겠습니다.
최근에는 레이아웃을 맞출 때 테이블을 잘 안 쓰는 추세기는 하지만, 실제로 표가 필요한 경우는 의외로 많으므로 테이블 태그에 대해 알고는 있어야 합니다.
우리가 만들 페이지는 아래와 같습니다.
이번 챕터의 코드는 https://github.com/koeunyeon/ci4/tree/view-table 에서 보실 수 있습니다.
View 컨트롤러에 아래의 메소드를 추가합니다.
app/Controllers/View.php
public function table(): string
{
$table_data = [ // (1)
["name" => "코드이그나이터", "age" => 10, "gender" => "male"],
["name" => "라라벨", "age" => 25, "gender" => "female"],
["name" => "스프링", "age" => 76, "gender" => "unknown"],
];
return View("/view/table", ['table_data' => $table_data]);
}(1) 뷰에 전달할 데이터를 설정합니다. 일반적인 웹 어플리케이션에서 데이터는 "데이터베이스"에서 전달받습니다. 코드이그나이터4에서도 동일한데, 데이터를 조회하는 "모델" 클래스의 기본값인 array로 리턴 타입을 설정할 경우 $table_data와 동일한 연관배열의 순차배열 형식으로 데이터 조회 결과가 변수에 담깁니다.
뷰를 추가하겠습니다.
app/Views/view/table.php
<table> <!-- (1) -->
<tr> <!-- (2) -->
<th>이름</th> <!-- (3) -->
<th>나이</th>
<th>성별</th>
</tr>
<?php foreach ($table_data as $row) : ?> <!-- (4) -->
<tr> <!-- (5) -->
<td><?= $row['name'] ?></td> <!-- (6) -->
<td><?= $row['age'] ?></td>
<td><?= $row['gender'] ?></td>
</tr>
<?php endforeach; ?>
</table>코드를 확인해 보겠습니다.
(1) HTML에서 표는 <table> 태그로 시작하고 </table> 태그로 끝납니다.
(2) <tr> 은 <table> 태그의 하위 태그로 행(Row)를 나타냅니다. Table Row의 약자입니다.
(3) <th>는 <table> 태그의 하위 태그로 테이블 헤더를 나타냅니다. 즉 각 열(column)이 어떤 의미인지 기술하는 데 사용됩니다. Table Header의 약자입니다.
(4) 실제 데이터를 보여주는 부분은 테이블 헤더가 끝난 부분부터 시작입니다. 매 행마다 데이터를 반복합니다. 반복문에 처음 진입했을 때 $row 변수에는 $table_data의 첫번째 데이터가 담깁니다.
["name" => "코드이그나이터", "age" => 10, "gender" => "male"](5) 매 행마다 줄이 바뀌어야 하므로 반복문 안에 <tr> 태그를 사용합니다.
(6) 개별 데이터는 $row로 표기할 수 있습니다. <td> 태그는 table data의 약자로 표의 개별 항목을 뜻합니다.
브라우저에서 http://localhost:8080/view/table에 접속해 결과를 확인합니다.
