즐거운 우리집
HTML Table 코딩 본문
HTML의 `<table>` 요소는 데이터를 행과 열로 정리된 표 형태로 표현할 때 사용됩니다. 다음은 HTML 테이블의 주요 태그와 속성, 그리고 사용법을 정리한 내용입니다.
목차
HTML 테이블 기본 구조
<table>
<thead>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
<th>헤더 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
<td>데이터 3</td>
</tr>
<tr>
<td>데이터 4</td>
<td>데이터 5</td>
<td>데이터 6</td>
</tr>
</tbody>
</table>주요 태그
1. <table>
- 테이블 전체를 정의하는 태그입니다.
2. <thead>
- 테이블의 머리 부분(헤더)을 정의합니다.
- <th> 요소와 함께 사용합니다.
3. <tbody>
- 테이블의 본문 데이터를 감쌉니다. 데이터는 <tr>과 <td>로 구성됩니다.
4. <tfoot>
- 테이블의 하단 부분(풋터)을 정의합니다. 합계나 요약 정보를 넣는 데 사용합니다.
5. <tr> (Table Row)
- 테이블의 한 행을 정의합니다.
6. <th> (Table Header)
- 테이블의 열 제목(헤더)을 정의합니다. 기본적으로 텍스트가 굵고 가운데 정렬됩니다.
7. <td> (Table Data)
- 테이블의 데이터를 정의합니다.
테이블 속성
1. border
테두리 두께를 설정합니다.
<table border="1">2. cellpadding & cellspacing
- cellpadding: 셀 내부 여백
- cellspacing: 셀 간격
(HTML5에서는 사용되지 않으며 CSS로 대체)
3. width & height
테이블의 너비와 높이를 설정합니다.
<table width="100%" height="200px">4. align (HTML5에서는 CSS로 대체)
테이블 위치를 조정합니다. (`left`, `center`, `right`)
CSS 스타일 적용
테이블의 디자인을 개선하려면 CSS를 활용합니다.
<style>
table {
border-collapse: collapse; /* 중복 테두리 제거 */
width: 100%;
}
th, td {
border: 1px solid #ddd; /* 셀 테두리 */
padding: 8px; /* 셀 내부 여백 */
text-align: center; /* 텍스트 정렬 */
}
th {
background-color: #f4f4f4; /* 헤더 배경색 */
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9; /* 짝수 행 배경색 */
}
</style>병합 기능
1. colspan (열 병합)
- 하나의 셀이 여러 열을 차지하도록 설정합니다.
<td colspan="2">병합된 셀</td>2. rowspan (행 병합)
- 하나의 셀이 여러 행을 차지하도록 설정합니다.
<td rowspan="3">병합된 셀</td>반응형 테이블
반응형 테이블은 CSS로 스크롤이나 유연한 너비를 설정하여 구현할 수 있습니다.
<style>
.table-container {
overflow-x: auto; /* 가로 스크롤 */
}
table {
width: 100%;
border-collapse: collapse;
}
</style>
<div class="table-container">
<table>
<thead>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용 1</td>
<td>내용 2</td>
</tr>
</tbody>
</table>
</div>접근성 고려
1. caption
테이블에 제목을 추가합니다.
<table>
<caption>2024년 판매 보고서</caption>
</table>2. scope
헤더의 적용 범위를 명시합니다.
<th scope="col">열 헤더</th>
<th scope="row">행 헤더</th>3. ARIA 속성
시각 장애인을 위한 접근성을 개선합니다.
예제: 복합 테이블
<table>
<caption>수업 시간표</caption>
<thead>
<tr>
<th>시간</th>
<th>월요일</th>
<th>화요일</th>
<th>수요일</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00-10:00</td>
<td>수학</td>
<td rowspan="2">과학</td>
<td>영어</td>
</tr>
<tr>
<td>10:00-11:00</td>
<td>체육</td>
<td>음악</td>
</tr>
</tbody>
</table>이렇게 하면 테이블 코딩의 핵심을 이해하고 다양한 스타일과 기능을 적용할 수 있습니다.