테이블은 데이터를 구조화된 형태로 표현할 때 매우 유용한 HTML 요소입니다. 데이터를 행과 열로 나누어 보여주기 때문에, 사용자는 정보를 보다 쉽게 이해할 수 있습니다. 오늘의 블로그 포스팅에서는 HTML 테이블의 기본 구조와 복잡한 테이블을 만드는 방법에 대해 설명하고, 실제 코드 예제를 통해 이를 실습해 볼 것입니다.
자동목차
이론: 테이블 구조
1. 테이블 기본 태그
- <table>: 테이블을 생성
- <thead>: 테이블의 헤더 (열의 제목) 영역을 정의
- <tbody>: 테이블의 본문 영역을 정의
- <tfoot>: 테이블의 바닥글 (합계 등의 요약 정보) 영역을 정의
- <tr>: 테이블의 행
- <th>: 테이블 헤더 셀 (주로 볼드체와 가운데 정렬)
- <td>: 테이블 데이터 셀
2. 복잡한 테이블
- rowspan 및 colspan: 셀이 여러 행이나 열에 걸쳐서 확장되어야 할 때 사용됩니다.
- <caption>: 테이블의 제목이나 설명을 추가할 때 사용됩니다.
실습: 기본 테이블 만들기
먼저 간단한 테이블을 만들어봅시다.
1. 텍스트 에디터를 열고 다음의 HTML 코드를 입력해보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 만들기</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>HTML 테이블 실습</h1>
<table>
<caption>수강 과목 목록</caption>
<thead>
<tr>
<th>과목코드</th>
<th>과목명</th>
<th>학점</th>
</tr>
</thead>
<tbody>
<tr>
<td>CS101</td>
<td>웹 개발 입문</td>
<td>3</td>
</tr>
<tr>
<td>CS102</td>
<td>프로그래밍 기초</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">전체 학점</td>
<td>7</td>
</tr>
</tfoot>
</table>
</body>
</html>
2. 이 파일을 'table.html'로 저장하고, 웹 브라우저에서 파일을 열어 잘 작동되는지 확인해 보세요.
코드 설명
- <table> 태그로 테이블을 시작합니다.
- <caption>으로 테이블의 제목을 추가했습니다.
- <thead> 내부에 <tr>과 <th> 태그를 사용하여 열 제목을 만들었습니다.
- <tbody> 내부의 <tr>과 <td> 태그를 사용하여 데이터 셀을 추가했습니다.
- <tfoot>에서 총 학점을 나타내는 행을 추가하고, colspan 속성으로 두 열을 합쳤습니다.
- <style> 태그를 사용하여 테이블에 스타일을 적용했습니다. 경계선을 설정하고, 셀에 패딩을 추가하였으며 th 태그에 배경색을 적용했습니다.
마무리
오늘의 실습을 통해 HTML 테이블의 구조를 이해하고 간단한 테이블을 만들 수 있게 되었습니다. 정보를 시각적으로 구조화하여 제시하는 것은 웹사이트에서 중요한 정보 전달 수단 중 하나입니다.
복잡한 테이블을 만들기 위해서는 `rowspan`과 `colspan`을 활용하여 셀을 병합해야 합니다. 테이블 데이터를 정렬하고, 제목, 본문, 바닥글을 구분하여 효율적인 데이터 표현이 가능해집니다.
다음 포스팅에서는 보다 복잡한 테이블을 만드는 방법과 실제 비즈니스 현장에서의 활용 예제에 대해 다루어볼 것입니다. 여러분이 만든 테이블이 웹 페이지의 가독성을 높이고 정보 전달에 기여하길 바랍니다. 즐거운 코딩 생활 되세요!