이제 html 문서 내에서 표를 만드는 방법을 살펴볼 차례입니다. 일반적으로 워드프로세서나 게시판의 텍스트 에디터에서는 표 생성 도구가 제공되기 때문에 아주 간편하게 드래그나 행/열 칸 수만 입력해서 자유롭게 표를 만들어왔을 것입니다. 하지만 html로 표를 생성하는 방법은 생각보다 까다롭게 느껴질 것입니다.
하지만 목록 리스트 생성과 마찬가지로, 표 작성 방법은 다양한 방식으로 CSS와 함께 사용되면서 중요한 역할을 하기 때문에, 귀찮게 느껴지더라도 꼭 배워야 할 내용임을 기억해야 합니다.
우선 가장 기본적으로 알아야 할 것은 당연히 행(row)과 열(column)의 개념입니다. 가로(행)와 세로(열)가 만나서 생기는 하나의 데이터 영역은 셀(cell)이라고 칭하게 됩니다. 앞으로 표를 다루는 데 있어서 모든 기준은 행과 열을 통해서 다루게 됩니다.
○ 표 기본 생성과 제목 - <table>, <caption>
기본적으로 표를 생성하는 태그는 <table> </table>입니다. 테이블 태그를 선언한 다음, 이 사이에 해당 표에 관련된 태그와 내용을 작성하게 됩니다. 덧붙여, 표의 '제목'을 설정하기 위해서는 <caption> </caption> 태그를 사용하게 됩니다. 참고로 제목은 표의 중앙 윗부분에 위치하게 됩니다.
○ 행을 생성하는 태그 - <tr>
이제 표의 기본 생성을 진행했으니, 다음으로는 행을 하나씩 생성합니다. 참고로 기본적인 표를 생성할 때는 행(row)을 기준으로 표를 선언한다고 생각해 줍시다. <tr> </tr> 태그를 작성하고, 이곳에 내용을 작성하게 되면 작성 내용에 따라 셀이 생성됩니다.
○ 셀을 생성하는 태그 - <td>, <th>
위에서 설명했다시피, 표의 한 행이 <tr>로 생성되면, 그 행 안에 순차적으로 열에 해당하는 콘텐츠를 작성해주고 그 결과 하나의 셀이 생성됩니다. 여기서 하나의 <tr> 내부에 <td> </td>태그를 통해서 셀의 내용을 작성할 수 있게 됩니다. 하나의 <tr> 태그 내에 <td> 태그로 작성하는 순서대로 1열, 2열, 3열... 이 되는 것입니다.
그럼 <th> </th> 태그는 무엇일까요? <td>와 같은 레벨의 태그인데 "제목 행"에 사용하는 태그입니다. 제목 행의 경우에는 가운데 정렬과 함께 셀의 색상이 진하게 표시되므로 제목 행임을 강조할 수 있게 됩니다.
여기서 하나 추가로, 제목 행과 내용 행을 구분하는 태그도 존재합니다. 바로 <thead>와 <tbody>, <tfoot> 태그입니다. 태그 명만 보더라도 이해가 가실 텐데요, <table> 태그 다음에 <thead> 또는 <tbody> 태그를 생성하고, 그 사이에 <tr>을 통해 행을 생성합니다. 그리고 <td> 또는 <th>로 셀을 작성하는 순서로 작업하면 됩니다.
참고로 thead와 tbody, tfoot은 개념적으로는 각각 제목 / 본문 / 요약을 뜻하게 됩니다. 이렇게 표를 태그로 구분해 놓게 되면 다른 태그의 경우와 마찬가지로, CSS를 통해 각각의 영역에 다른 스타일을 적용하는 것도 가능해집니다. 또한 기능적으로 thead 영역과 tfoot 영역은 고정해 두고 tbody 영역만 스크롤링을 적용하는 등의 작업도 가능해집니다.
위에 설명한 내용을 종합해 하나의 표를 생성하는 예시를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<caption>표 제목 예시</caption>
<thead>
<tr>
<th>분류</th>
<th>이름</th>
<th>색상</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>CPU</td>
<td>i9-13genth</td>
<td>black</td>
<td>재고없음</td>
</tr>
<tr>
<td>VGA</td>
<td>RTX9999</td>
<td>green</td>
<td>재고있음</td>
</tr>
</tbody>
</table>
</body>
</html>
| 분류 | 이름 | 색상 | 비고 |
|---|---|---|---|
| CPU | i9-13genth | black | 재고없음 |
| VGA | RTX9999 | green | 재고있음 |
'Programming > HTML+CSS' 카테고리의 다른 글
| 2. 내용 입력하기(3) - 표 생성하기 3 (0) | 2023.02.27 |
|---|---|
| 2. 내용 입력하기(3) - 표 생성하기 2 (0) | 2023.02.26 |
| 2. 내용 입력하기(2) - 목록 생성하기 (0) | 2023.02.23 |
| 2. 내용 입력하기(1) - 텍스트 입력 2 (0) | 2023.02.22 |
| 2. 내용 입력하기(1) - 텍스트 입력 1 (0) | 2023.02.22 |
