HTML 입문 | HTML 기본 요소 | HTML 테이블(table)


테이블(table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미한다.
HTML에서는 <table> 태그를 사용하여 이러한 테이블을 작성할 수 있다.

<table> 태그는 다음과 같은 태그들로 구성된다.

  1. <tr> 태그는 테이블에서 열을 구분해 준다.
  2. <th>태그는 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다.
  3. <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>

코드 실행