HTML 입문 | HTML 기본 요소 | HTML 테이블(table)
테이블(table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미한다.
HTML에서는 <table> 태그를 사용하여 이러한 테이블을 작성할 수 있다.
<table> 태그는 다음과 같은 태그들로 구성된다.
<tr>태그는 테이블에서 열을 구분해 준다.<th>태그는 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다.<td>태그는 테이블의 열을 각각의 셀(cell)로 나누어 준다.
<table>
<tr>
<th>분류</th>
<th>항목</th>
</tr>
<tr>
<td>과일</td>
<td>사과</td>
</tr>
<tr>
<td>채소</td>
<td>당근</td>
</tr>
</table>
테이블의 스타일(style)
CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있다.
border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리가 표시된다.
<style>
table, th, td { border: 1px solid black }
</style>
위의 예제에서 테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <table> 태그와 <th> 태그, <td> 태그가 모두 자신만의 테두리를 가지고 있기 때문이다.
위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용하면 된다.
border-collapse 속성 값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있다.
<style>
table, th, td { border: 1px solid black; border-collapse: collapse }
</style>
테이블의 열 합치기
colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있다.
<table>
<tr>
<th>분류</th>
<th colspan="2">항목</th>
</tr>
<tr>
<td>과일</td>
<td>사과</td>
<td>배</td>
</tr>
<tr>
<td>채소</td>
<td>당근</td>
<td>감자</td>
</tr>
</table>
테이블의 행 합치기
rowspan 속성을 사용하면 테이블의 행(row)을 합칠 수 있다.
<table>
<tr>
<th>분류</th>
<th>항목</th>
</tr>
<tr>
<td rowspan="2">과일</td>
<td>사과</td>
</tr>
<tr>
<td>배</td>
</tr>
<tr>
<td>채소</td>
<td>감자</td>
</tr>
</table>
테이블의 열과 행 합치기
colspan 속성과 rowspan 속성을 함께 사용하면, 더욱 복잡한 테이블도 표현할 수 있다.
<table>
<tr>
<th>분류</th>
<th colspan="2">항목</th>
</tr>
<tr>
<td rowspan="2">과일</td>
<td>사과</td>
<td>배</td>
</tr>
<tr>
<td>포도</td>
<td rowspan="2">토마토 감자</td>
</tr>
<tr>
<td>채소</td>
<td>당근</td>
</tr>
</table>
테이블의 캡션(caption) 설정
<caption> 태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.
<table style="width:100%">
<caption>장바구니</caption>
<tr>
<th>분류</th>
<th>항목</th>
</tr>
<tr>
<td>과일</td>
<td>사과</td>
</tr>
<tr>
<td>채소</td>
<td>당근</td>
</tr>
</table>
최종 수정 : 2021-08-27