Table
태그는 표를 만들 때 사용할 수 있는 태그입니다.
레이아웃을 잡을 때도 사용할 수 있지만, 요새는 flexbox
나 grid-system
이 매우 잘 되어있기 때문에 레이아웃 용도로 사용하진 않습니다.
작성 예시
<table></table>
테이블의 기본 요소입니다.
모든 테이블 요소를 감싸서 사용합니다.
표의 테두리를 구분지어줍니다.
tr
은 table-row의 약자로, 표의 한 줄을 감싸줍니다.
단독으로 쓰지 않고 안에 td
, th
를 넣어 사용합니다.
td
는 table-data를 의미합니다. 표의 한 칸(column)을 의미하고, 실제 데이터가 들어가는 부분입니다.
th
는 table-header를 의미합니다. 표의 데이터를 분류하는 칸에 사용합니다.
작성 예시
<table>
<tr>
<th>과일</th>
<th>채소</th>
</tr>
<tr>
<td>수박</td>
<td>배추</td>
</tr>
</table>
과일 채소 수박 배추
thead
는 table-head로, th를 하나로 묶어줍니다.
HTML에서 header
처럼 의미적으로 묶는 역할입니다.
tbody
는 table-body로, 내용을 묶어줍니다.
HTML에서 main
의 역할을 합니다.
tbody
는 table
에 필수적이지만, 입력되지 않았어도 브라우저에 의해 알아서 생성됩니다.
tfoot
은 table-footer로, 푸터 콘텐츠를 묶어줍니다.
HTML에서 footer
의 역할을 하며, 주로 합계, 평균, 결과 등의 내용이 표시되는 부분입니다.
위의 세 요소는 모두 레이아웃에 직접적인 영향을 주지 않습니다.
작성 예시
<table>
<thead>
<tr>
<th></th>
<th>과일</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<th>A가게</th>
<td>귤</td>
<td>1500원</td>
</tr>
<tr>
<th>B가게</th>
<td>포도</td>
<td>2000원</td>
</tr>
</tbody>
<tfoot>
<th>계</th>
<td>귤, 포도</td>
<td>3500원</td>
</tfoot>
</table>
결과
과일 가격 A가게 귤 1500원 B가게 포도 2000원 계 귤, 포도 3500원
caption
은 테이블 요소에서 제목에 해당됩니다.
접근성 요소로, 스크린 리더기에 표제를 제공하는 역할입니다.
작성 예시
<table>
<caption>과일 가격표</caption>
<thead>
<tr>
<th></th>
<th>과일</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<th>A가게</th>
<td>귤</td>
<td>1500원</td>
</tr>
<tr>
<th>B가게</th>
<td>포도</td>
<td>2000원</td>
</tr>
</tbody>
</table>
결과
과일 가격표 과일 가격 A가게 귤 1500원 B가게 포도 2000원
표를 만들 때 여러 줄이나 칸을 합치는 경우가 있습니다.
이럴 때 사용할 수 있는 것이 바로 rowspan
, colspan
입니다.
rowspan
은 세로, 즉 행렬에서 열(세로 줄)끼리 합치고 싶을 때 쓸 수 있습니다.
colspan
은 가로, 즉 행렬에서 행(가로 줄)끼리 합치고 싶을 때 쓸 수 있습니다.
작성 예시
<table>
<tr>
<th></th>
<th colspan="2">가격</th>
</tr>
<tr>
<th rowspan="2">과일</th>
<td>귤</td>
<td>1500원</td>
</tr>
<tr>
<td>포도</td>
<td>2000원</td>
</tr>
</table>
결과
가격 과일 귤 1500원 포도 2000원
예시처럼 rowspan
, colspan
은 td
, th
안에 인라인으로 직접 작성하면 됩니다. 늘리고 싶은 칸 수를 속성값으로 적어주면 됩니다.
단, 주의하셔야 할 것은 rowspan
colspan
은 칸을 합치는 것이 아니라는 것입니다.
rowspan
colspan
이 적용된 요소의 가로 또는 세로를 늘려주는 개념입니다.
그러므로 가로 세로가 얼마나 늘어나던 간에, 원래 자리를 차지하던 칸은 여전히 존재한 채로 밀려나게 됩니다.
따라서 우리가 표를 디자인할 땐, rowspan
colspan
이 적용된 칸이 밀어내는 칸을 지워주어야 합니다.
잘못된 작성 예시
<table>
<tr>
<td colspan="2">a</td>
<td></td>
<td>b</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
</table>
결과
a b 1 2 2
위의 예시를 보면, a칸에 colspan="2"
를 적용했습니다. 그러자 a칸과 옆의 빈 칸이 합쳐지는 것이 아니라, 밀려나는 형태가 되어 레이아웃이 망가졌습니다.
따라서 rowspan
colspan
을 쓸 때는, 밀려날 줄/칸을 지워주어야 합니다.
rowspan
colspan
이 헷갈린다면, 우선 합치기 전, 그러니까 모든 td
, th
가 가로세로 한 칸만 차지하는 상태의 레이아웃을 먼저 설계한 후, rowspan
colspan
에 따라서 밀려나는 칸을 하나씩 지워주면 쉽게 표를 그릴 수 있습니다.
올바른 작성 예시
<table>
<tr>
<td colspan="2">a</td>
<td>b</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
</table>
결과
a b 1 2 2