[HTML 기초] table 요소

삐개·2022년 1월 12일
0

Table

Table 태그는 표를 만들 때 사용할 수 있는 태그입니다.
레이아웃을 잡을 때도 사용할 수 있지만, 요새는 flexboxgrid-system이 매우 잘 되어있기 때문에 레이아웃 용도로 사용하진 않습니다.

table

작성 예시

<table></table>

테이블의 기본 요소입니다.
모든 테이블 요소를 감싸서 사용합니다.
표의 테두리를 구분지어줍니다.

tr, td, th

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, tbody, tfoot

thead는 table-head로, th를 하나로 묶어줍니다.
HTML에서 header처럼 의미적으로 묶는 역할입니다.

tbody는 table-body로, 내용을 묶어줍니다.
HTML에서 main의 역할을 합니다.
tbodytable에 필수적이지만, 입력되지 않았어도 브라우저에 의해 알아서 생성됩니다.

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

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입니다.

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, colspantd, 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
profile
병아리 개발자

0개의 댓글