04. HTML의 태그 - 테이블 태그

테이블 태그

테이블이란 여러 데이터를 행과 열으로 정렬하여 표현한 표를 말한다. HTML에서는 <table> 을 비롯한 아래의 태그들을 통해 테이블을 생성할 수 있다. CSS를 통해 테두리를 설정해주지 않을 경우 테두리 없이 셀의 텍스트가 왼쪽 정렬 되어 있는 테이블이 생성된다.

※이 글에서는 CSS를 사용해 테이블의 테두리를 설정하고, 텍스트를 중앙으로 정렬함

테이블 관련 태그

• <table>: 테이블을 생성하는 태그
• <tr>: 테이블의 행 태그
• <td>: 행 내부의 일반 셀 태그 (행의 내용)
• <th>: 행 내부의 제목 셀 태그
• <caption>: 테이블의 제목이나 설명을 작성하는 태그
• <thread>: 테이블의 머리글
• <tfoot>: 테이블의 꼬리말
• <tbody>: 테이블의 본문
• <col> & <colgroup>: 열의 스타일을 지정할 때 사용하는 태그

테이블 관련 속성

• colspan: 열을 병합하는 속성
• rowspan: 행을 병합하는 속성
• span: colgroup에서 사용하는 속성, 열의 개수를 지정
• scope: 웹 접근성을 위해 사용하는 속성. 열 또는 행의 제목을 명시

  - scope = "row": 해당 셀이 행의 제목임을 명시
  - scope = "col": 해당 셀이 열의 제목임을 명시
  - scope = "rowgroup": 해당 셀이 행의 그룹을 위한 제목임을 명시
  - scope = "colgroup": 해당 셀이 열의 그룹을 위한 제목임을 명시

테이블의 기본 구조

table 태그 안에 tr 태그를 넣어 행을 추가하고, 제목 셀에는 th 태그를 내용 셀에는 td 태그를 넣어 데이터를 입력해준다. th 태그는 td 태그와 달리, 텍스트에 bold를 적용시키고, 정렬을 가운데 정렬으로 맞춰준다.

<table>
  <tr>
    <th scope="col">번호</th>
    <th scope="col">이름</th>
    <th scope="col">취미</th>
  </tr>
  <tr>
    <td>1</td>
    <td>김우빈</td>
    <td>음악 감상</td>
  </tr>
  <tr>
    <td>2</td>
    <td>나유림</td>
    <td>그림 그리기</td>
  </tr>
</table>

테이블 병합하기

테이블을 병합할 때 사용하는 속성은 colspan과 rowspan이다. colspan은 가로 방향으로 셀을 병합해주고, rowspan은 세로 방향으로 셀을 병합해준다.

셀 병합을 할 때, 주의해야 할 점은 병합할 범위에 있는 셀을 제거해주어야 한다는 점이다. 병합할 범위에 있는 셀을 제거해주지 않을 경우 셀이 밀려나게 된다.

잘못 작성한 코드

<table>
  <tr>
    <th scope="col">학년</th>
    <th scope="col">이름</th>
    <th colspan="2" scope="col">취미</th>
  </tr>
  <tr>
    <td rowspan="2">1</td> <!-- 병합할 범위의 셀, 제거해야 함-->
    <td>김우빈</td>
    <td>음악감상</td>
    <td>작곡</td>
  </tr>
  <tr>
    <td>1</td>
    <td>나유림</td>
    <td>그림 그리기</td>
    <td>컬러링북</td>
  </tr>
  <tr>
    <td>2</td>
    <td>나다현</td>
    <td>판타지 소설 읽기</td>
    <td>독서 감상문 쓰기</td>
  </tr>
</table>

제대로 작성한 코드

<table>
  <tr>
    <th scope="col">학년</th>
    <th scope="col">이름</th>
    <th colspan="2" scope="col">취미</th>
  </tr>
  <tr>
    <td rowspan="2">1</td>
    <td>김우빈</td>
    <td>음악감상</td>
    <td>작곡</td>
  </tr>
  <tr> 
    <!-- 병합할 범위의 셀이 제거가 됨-->
    <td>나유림</td>
    <td>그림 그리기</td>
    <td>컬러링북</td>
  </tr>
  <tr>
    <td>2</td>
    <td>나다현</td>
    <td>판타지 소설 읽기</td>
    <td>독서 감상문 쓰기</td>
  </tr>
</table>

웹 접근성 고려하기

caption, thead, tfoot, tbody는 레이아웃이 아닌 웹 접근성을 위해 사용하는 태그이다. 스크린 리더기가 데이터를 읽는 순서를 지정해주고, 테이블의 전체적인 정보를 제공해주는 역할을 하는 태그이기 때문에 레이아웃에는 아무런 영향을 주지 않는다.

caption

테이블의 제목과 요약된 내용을 전달하는 태그이다. 시각 장애인이나 스크린 리더기를 사용하는 독자가 테이블의 모든 정보를 듣지 않고도 해당 테이블의 정보가 필요한 정보인지 판단할 수 있도록 전체적인 정보를 주는 역할을 한다. table 태그의 최상단, 즉 첫번째 자식으로만 올 수 있고, 화면상엔 비노출된다.

thead, tfoot, tbody

thead는 테이블의 제목 영역, tfoot은 데이터의 합계와 같은 결과 영역, tbody는 표의 본문 영역임을 나타내는 태그이다. 여기서 주의해야 할 점은 tfoot이 tbody보다 먼저 와야 된다는 것이다. 이 세 가지는 테이블의 데이터에 모두 들어갈 수도 있고, 빠질 수도 있다.

<table>
  <caption>3월 이용 요금표</caption>
  <thead>
    <tr>
      <th rowspan="2" scope="col">기간</th>
      <th colspan="3" scope="colgroup">주중</th>
      <th colspan="2" scope="colgroup">주말 및 공휴일</th>
    </tr>
    <tr>
      <th scope="col">구분</th>
      <th scope="col">시간대</th>
      <th scope="col">가격</th>
      <th scope="col">구분</th>
      <th scope="col">가격</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="6">매주 월요일(주중): 100,000원 </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th rowspan="4" scope="rowgroup">03/01 ~ 03/31</th>
      <td rowspan="3">1부</td>
      <td>10:00 ~ 12:59</td>
      <td>90,000원</td>
      <td rowspan="3">1부</td>
      <td rowspan="3">145,000원</td>
    </tr>
    <tr>
      <td>13:00 ~ 15:59</td>
      <td>100,000원</td>
    </tr>
    <tr>
      <td>16:00 ~ 18:59</td>
      <td>100,000원</td>
    </tr>
    <tr>
      <td>2부</td>
      <td>19:00 ~ 22:00</td>
      <td>130,000원</td>
      <td>2부</td>
      <td>155,000원</td>
    </tr>
  </tbody>
</table>

열 스타일 지정

colgroup 태그는 테이블 열에 같은 스타일을 지정해줄 때 사용한다. caption 태그가 있을 경우 caption 태그 아래에 작성하고, 없을 경우 table 태그의 최상단에 작성한다.

<table>
  <caption>3월 이용 요금표</caption>
  <colgroup>
    <col span="2" style="background-color:#FBEFEF;">
    <col span="2">
    <col style="background-color:#FBEFEF;">
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col">기간</th>
      <th colspan="3" scope="col" style="background-color:linen;">주중</th>
      <th colspan="2" scope="col" style="background-color:linen;">주말 및 공휴일</th>
    </tr>
    <tr>
      <th scope="col">구분</th>
      <th scope="col">시간대</th>
      <th scope="col">가격</th>
      <th scope="col">구분</th>
      <th scope="col">가격</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="6" style="background-color:white;">매주 월요일(주중): 100,000원 </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th rowspan="4">03/01 ~ 03/31</th>
      <td rowspan="3">1부</td>
      <td>10:00 ~ 12:59</td>
      <td>90,000원</td>
      <td rowspan="3">1부</td>
      <td rowspan="3">145,000원</td>
    </tr>
    <tr>
      <td>13:00 ~ 15:59</td>
      <td>100,000원</td>
    </tr>
    <tr>
      <td>16:00 ~ 18:59</td>
      <td>100,000원</td>
    </tr>
    <tr>
      <td>2부</td>
      <td>19:00 ~ 22:00</td>
      <td>130,000원</td>
      <td>2부</td>
      <td>155,000원</td>
    </tr>
  </tbody>
</table>