HTML 과 친해지기 (5)

유수종·2025년 1월 28일

프론트엔드 스터디

목록 보기

5/12

이번시간에는 표(Table) 태그에 대해서 알아볼 예정입니다.
표 태그는 데이터베이스의 표(Table)과 같이 행열의 개념을 사용합니다.

테이블 기본 태그

table: 표 생성. 표 전체를 감싸는 태그
caption: 표의 제목 및 설명 (캡션 태그)
tr: 표의 행. th(제목 열),td(일반 열)의 부모 태그
th: 제목 열. tr 태그의 자식으로 사용.
td: 일반 열. tr 태그의 자식으로 사용.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table tag</title>
  </head>
  <body>
    <h1>기본 테이블</h1>
    <table>
      <caption>
        프로필 테이블
      </caption>
      <tr>
        <th>1행 1열</th>
        <th>1행 2열</th>
        <th>1행 3열</th>
      </tr>
      <tr>
        <td>2행 1열</td>
        <td>2행 2열</td>
        <td>2행 3열</td>
      </tr>
      <tr>
        <td>3행 1열</td>
        <td>3행 2열</td>
        <td>3행 3열</td>
      </tr>
    </table>
  </body>
</html>

테이블의 기본태그를 사용해서 3x3 테이블을 만들어보았는데요, 뭔가 허전하죠?

테이블 속성에 border 를 추가하면?

이렇게 boarder line을 생성해서 테이블을 보기 편하게 만들어줍니다.

다만 boarder 부분이 빨갛게 뜨는게 뭔가 찜찜하지 않으신가요?

이게 html이 문법에 매우 관대하기 때문에 그냥 실행되긴 하지만, 웹 표준을 준수하길 권장하기 때문에 이와 같이 boarder 옵션을 사용하는것을 지양한다고 합니다.

즉 <table> 태그에 boarder 옵션을 사용하는 방법은 웹 표준에 따르면 권장하지 않는 방식인거죠.

웹 표준은 아래와 같은 CSS 방식을 선호하는데요, 아직 CSS를 배우지 않았으니 이런 느낌으로 작성한다 정도만 보고 넘어가도록 하겠습니다.

<style>
    table {
      border: 1px solid black;
    }
    th,
    td {
      border: 1px solid black;
    }
  </style>

테이블 그룹태그

colgroup: 열을 그룹으로 묶는 태그.
col: <colgroup>의 자식태그로 열 단위를 나눔.
(span 속성으로 열을 그룹으로 묶을지 설정.
e.g. <col span = "3">)
thead: 표의 제목 열들을 묶는 그룹태그.
tbody: 표의 일반 데이터들을 묶는 그룹태그.
tfoot: 표의 하단 영역을 묶는 그룹태그.

그룹태그는 테이블의 열 또는 행을 엮어서 한번에 처리해주는 태그인데요 직접 실습해보면서 알아보겠습니다.

</table>
    <hr />
    <h1>테이블 그룹태그</h1>
    <table>
      <tr>
        <th>반</th>
        <th>이름</th>
        <th>국어</th>
        <th>수학</th>
        <th>영어</th>
        <th>CS</th>
      </tr>
      <tr>
        <td>1반</td>
        <td>90</td>
        <td>100</td>
        <td>75</td>
        <td>80</td>
        <td>95</td>
      </tr>
      <tr>
        <td>1반</td>
        <td>50</td>
        <td>80</td>
        <td>70</td>
        <td>65</td>
        <td>95</td>
      </tr>
      <tr>
        <td>1반</td>
        <td>40</td>
        <td>35</td>
        <td>27.5</td>
        <td>87</td>
        <td>99</td>
      </tr>
    </table>

먼저 <hr/> 태그로 선을 긋고 아래에 새로운 테이블을 만들어보았습니다.

`<colgroup>`, `<col>` 태그

<table>
      <colgroup>
        <col class="col1" />
        <col class="col2" />
        <col class="col3" />
        <col class="col4" />
        <col class="col5" />
        <col class="col6" />
      </colgroup>
      <tr>

생성한 테이블에 colgroup 태그를 생성하고 하위 태그인 col 태그를 열의 수에 맞게 생성하였습니다.

생성한 col 태그의 속성을 직접 바꿔줘도 적용이 되긴 하지만 위에서 언급했듯이 웹 표준에 맞지 않기 때문에 CSS를 활용하는 방법을 소개하겠습니다.

CSS를 활용해서 수정하려면 각 컬럼을 구분할 수 있어야 하니까 class 속성으로 각 컬럼의 이름을 명시해주었습니다.

<style>
    table {
      border: 1px solid black;
    }
    th,
    td {
      border: 1px solid black;
    }
    .col1 {
      width: 80;
    }
    .col2 {
      background-color: aqua;
    }
  </style>

이제 이전에 CSS를 다룰때 만들었던 style 태그에 위와 같이 컬럼을 추가해서 width(너비), background-color 등을 수정할 수 있습니다.

`thead`,`tbody`,`tfoot`

<thead>
        <tr>
          <th>반</th>
          <th>이름</th>
          <th>국어</th>
          <th>수학</th>
          <th>영어</th>
          <th>CS</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1반</td>
          <td>90</td>
          <td>100</td>
          <td>75</td>
          <td>80</td>
          <td>95</td>
        </tr>
        <tr>
          <td>1반</td>
          <td>50</td>
          <td>80</td>
          <td>70</td>
          <td>65</td>
          <td>95</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>1반</td>
          <td>40</td>
          <td>35</td>
          <td>27.5</td>
          <td>87</td>
          <td>99</td>
        </tr>
      </tfoot>

<thead>는 <th> 태그로 작성된 제목열들을 묶어주었고, <tfoot>은 최하단 열들을, 마지막으로 남은 중간 열들은 <tbody> 태그로 묶어주었습니다.

사실 표의 외관에는 변화가 없지만 추후에 CSS 스타일링, 유지보수와 개발 용이성 등 때문에 사용한다고 합니다.

colspan, rowspan

<th>,<td>
- colspan : 열 병합
  e.g. <td colspan="2">
- rowspan : 행 병합
  e.g <td rowspan="2">

colspan과 rowspan은 엑셀에서 셀 병합하는 기능과 같다고 보시면 됩니다. <th>태그나 <td>태그에서 사용되며 위에서 나눈 그룹태그 단위로 병합이 가능합니다.

<tbody>
        <tr>
          <td rowspan="2">1반</td>
          <td>90</td>
          <td>100</td>
          <td>75</td>
          <td>80</td>
          <td>95</td>
        </tr>
        <tr>
          <td>50</td>
          <td>80</td>
          <td>70</td>
          <td>65</td>
          <td>95</td>
        </tr>
      </tbody>