HTML table basics

김동현·2026년 3월 2일

mdn 학습 번역 - HTML

목록 보기

12/31

HTML 표(Table) 기초

표(Table)란 무엇인가요?

표는 행(row)과 열(column)로 이루어진 구조화된 데이터 세트(이를 표 형태의 데이터(tabular data)라고 부릅니다)예요. 표를 사용하면 다양한 유형의 데이터 간에 어떤 연관성이 있는지を示す 값들을 빠르고 쉽게 찾아볼 수 있습니다. 예를 들어, 특정 사람과 그 사람의 나이, 요일, 혹은 동네 수영장의 시간표 같은 것들이죠.

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

A swimming timetable showing a sample data table

표는 인간 사회에서 아주 흔하게 사용되어 왔고, 아주 오래전부터 쓰여 왔어요. 1800년도에 작성된 이 미국 인구 조사 문서를 보면 알 수 있죠!

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

그러니 HTML의 창시자들이 웹에서 표 형태의 데이터를 구조화하고 보여줄 수 있는 수단을 마련한 것은 어찌 보면 당연한 일입니다.

표는 어떻게 작동하나요?

표의 핵심은 구조가 '단단하게 고정되어 있다(rigid)'는 점이에요. 행 제목과 열 제목을 시각적으로 연결해서 정보를 아주 쉽게 해석할 수 있죠. 예를 들어, 아래 표를 보고 위성이 62개인 목성형 가스 행성(Jovian gas giant)을 찾아보세요. 관련된 행 제목과 열 제목을 연결해 보면 금방 답을 찾을 수 있을 거예요.

💡 강사의 보충 설명 & 팁:
즉, 데이터가 바둑판처럼 행(가로줄)과 열(세로줄)의 격자 구조에 딱 맞게 들어가야 의미를 파악할 수 있다는 뜻입니다. 스크린 리더(시각 장애인용 화면 낭독 프로그램)도 이 규칙적인 구조를 바탕으로 데이터를 읽어주기 때문에 구조를 명확히 하는 것이 중요해요.

<table>
  <caption>
    Data about the planets of our solar system (Source:
    <a href="https://nssdc.gsfc.nasa.gov/planetary/factsheet/"
      >Nasa's Planetary Fact Sheet - Metric</a
    >).
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <th scope="col">Name</th>
      <th scope="col">Mass (10<sup>24</sup>kg)</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Density (kg/m<sup>3</sup>)</th>
      <th scope="col">Gravity (m/s<sup>2</sup>)</th>
      <th scope="col">Length of day (hours)</th>
      <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
      <th scope="col">Mean temperature (°C)</th>
      <th scope="col">Number of moons</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      <td>4,879</td>
      <td>5427</td>
      <td>3.7</td>
      <td>4222.6</td>
      <td>57.9</td>
      <td>167</td>
      <td>0</td>
      <td>Closest to the Sun</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      <td>12,104</td>
      <td>5243</td>
      <td>8.9</td>
      <td>2802.0</td>
      <td>108.2</td>
      <td>464</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>5.97</td>
      <td>12,756</td>
      <td>5514</td>
      <td>9.8</td>
      <td>24.0</td>
      <td>149.6</td>
      <td>15</td>
      <td>1</td>
      <td>Our world</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>0.642</td>
      <td>6,792</td>
      <td>3933</td>
      <td>3.7</td>
      <td>24.7</td>
      <td>227.9</td>
      <td>-65</td>
      <td>2</td>
      <td>The red planet</td>
    </tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <td>1326</td>
      <td>23.1</td>
      <td>9.9</td>
      <td>778.6</td>
      <td>-110</td>
      <td>67</td>
      <td>The largest planet</td>
    </tr>
    <tr>
      <th scope="row">Saturn</th>
      <td>568</td>
      <td>120,536</td>
      <td>687</td>
      <td>9.0</td>
      <td>10.7</td>
      <td>1433.5</td>
      <td>-140</td>
      <td>62</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giants</th>
      <th scope="row">Uranus</th>
      <td>86.8</td>
      <td>51,118</td>
      <td>1271</td>
      <td>8.7</td>
      <td>17.2</td>
      <td>2872.5</td>
      <td>-195</td>
      <td>27</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Neptune</th>
      <td>102</td>
      <td>49,528</td>
      <td>1638</td>
      <td>11.0</td>
      <td>16.1</td>
      <td>4495.1</td>
      <td>-200</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planets</th>
      <th scope="row">Pluto</th>
      <td>0.0146</td>
      <td>2,370</td>
      <td>2095</td>
      <td>0.7</td>
      <td>153.3</td>
      <td>5906.4</td>
      <td>-225</td>
      <td>5</td>
      <td>
        Declassified as a planet in 2006, but this
        <a
          href="https://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/"
          >remains controversial</a
        >.
      </td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}

올바르게 잘 구현된 HTML 표는 화면 판독기(스크린 리더)와 같은 접근성 도구에서도 원활하게 처리됩니다. 따라서 잘 만들어진 HTML 표는 시력이 좋은 사용자뿐만 아니라 시각 장애가 있는 사용자 모두에게 좋은 경험을 제공할 수 있어야 해요.

표 스타일링 (Table styling)

GitHub에 올라와 있는 라이브 행성 데이터 예제도 한번 확인해 보세요! 아마 위 페이지에서 보는 것보다 표가 훨씬 더 읽기 편해 보일 텐데요. 그 이유는 위에서 본 표는 스타일이 최소한으로만 적용되어 있는 반면, GitHub 버전에는 CSS가 훨씬 더 많이 적용되어 있기 때문이에요.

환상은 버리세요. 웹에서 표가 제대로 효과를 발휘하려면 HTML로 뼈대를 튼튼하게 잡는 것뿐만 아니라, CSS를 통해 스타일 정보도 제공해야만 합니다. 이번 레슨에서는 HTML 부분에만 집중할 거고요, 표를 예쁘게 꾸미는 방법은 나중에 표 스타일링(Styling tables) 레슨에서 자세히 배우게 될 거예요.

이번 모듈에서 CSS를 깊게 파고들진 않겠지만, 여러분이 표를 그릴 때 기본 상태보다 훨씬 읽기 편하게 만들어 줄 최소한의 CSS 스타일시트는 미리 준비해 두었습니다. 스타일시트는 여기서 찾을 수 있고, 이 스타일이 적용된 HTML 템플릿도 확인할 수 있어요. 이 두 가지를 활용하면 HTML 표를 연습해 볼 아주 좋은 출발점이 될 겁니다.

HTML 표를 피해야 할 때는 언제인가요?

HTML 표는 오직 표 형태의 데이터(행과 열로 다루기 쉬운 정보)를 위해서만 사용해야 합니다. 그게 바로 표가 만들어진 목적이니까요. 하지만 안타깝게도, 과거에는 웹 페이지의 레이아웃을 잡기 위해 HTML 표를 남용하는 사람들이 정말 많았어요. 예를 들어, 웹사이트의 상단 헤더를 담는 행 하나, 콘텐츠 단을 나누는 행, 하단 푸터를 담는 행... 이런 식으로 말이죠.

과거에 이런 기술이 쓰였던 이유는 브라우저마다 CSS를 지원하는 수준이 너무 제한적이었기 때문이에요. 하지만 최신 브라우저들은 CSS 지원이 아주 탄탄하기 때문에, 더 이상 표 기반 레이아웃은 필요하지 않습니다. 이제 표로 레이아웃을 잡는 곳은 극히 드물지만, 인터넷 구석구석을 돌아다니다 보면 아직 그런 과거의 유산을 마주칠 수도 있어요.

결론적으로 말씀드리면, CSS 레이아웃 기술 대신 표를 레이아웃에 사용하는 것은 정말 좋지 않은 생각입니다. 주된 이유는 다음과 같아요.

레이아웃 테이블은 시각 장애인 사용자의 접근성을 떨어뜨립니다: 시각 장애인들이 사용하는 화면 판독기(스크린 리더)는 HTML 페이지에 있는 태그를 분석해서 내용을 읽어줍니다. 표는 애초에 레이아웃을 위한 도구가 아니고, CSS 레이아웃 기술보다 마크업(태그 구조)이 훨씬 복잡해지기 때문에 스크린 리더 사용자들은 엄청난 혼란을 겪게 됩니다.
표는 '태그 수프(Tag soup)'를 만듭니다: 위에서 언급했듯이, 표 레이아웃은 올바른 레이아웃 기법보다 마크업 구조를 훨씬 복잡하게 만듭니다. 결국 코드를 작성하기도, 유지보수하기도, 버그를 잡기도 힘들어져요.
표는 자동으로 반응형이 되지 않습니다: 올바른 레이아웃 컨테이너(<header>, <section>, <article>, <div> 등)를 사용하면, 요소의 너비는 기본적으로 부모 요소의 100%를 차지하게 됩니다. 반면에 표는 기본적으로 콘텐츠의 양에 따라 크기가 결정되기 때문에, 다양한 기기 화면에서 표 레이아웃이 제대로 작동하게 만들려면 엄청난 추가 조치들이 필요해집니다.

💡 강사의 보충 설명 & 팁:
이 질문은 프론트엔드 면접에서도 종종 등장하는 단골 질문이에요! 면접관이 "예전에는 웹사이트 레이아웃을 table 요소로 잡기도 했는데, 지금은 왜 쓰지 않나요?"라고 묻는다면, 바로 위에서 설명해 드린 3가지(웹 접근성 훼손, 코드 유지보수 악화, 반응형 웹 구현의 어려움)를 자신 있게 대답하시면 됩니다. 완벽한 답변이 될 거예요!

첫 번째 표 만들기

표에 대한 이론적인 이야기는 이쯤 해두고, 실습으로 들어가서 아주 간단한 표를 직접 만들어 봅시다!

먼저 컴퓨터의 새 폴더에 blank-template.html과 minimal-table.css 파일을 복사해서 저장하세요. HTML 템플릿에는 이미 CSS를 연결해 주는 <link> 요소가 포함되어 있으니 그 부분은 신경 쓰지 않으셔도 됩니다.
표의 모든 콘텐츠는 두 개의 태그, 즉 <table></table>로 감싸야 합니다. 이 태그를 HTML 문서의 body 안쪽에 추가해 보세요.
표 내부에서 가장 작은 단위의 컨테이너는 '표 셀(table cell)'이며, <td> 요소로 만듭니다 ("td"는 "table data"의 약자예요). <table> 태그 안에 다음 코드를 추가하세요.

<td>Hi, I'm your first cell.</td>

만약 한 줄(row)에 네 개의 셀이 나오게 하고 싶다면, 이 태그를 세 번 더 복사해야 합니다. 표 안의 내용을 아래와 같이 수정해 보세요.

<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>

직접 해보시면 아시겠지만, 셀들이 위아래로 배치되는 게 아니라 자동으로 같은 줄(행)에 나란히 정렬될 거예요. 각각의 <td> 요소가 하나의 셀을 만들고, 이 셀들이 모여 첫 번째 행(row)을 구성하는 거죠. 셀을 추가할 때마다 줄은 옆으로 점점 길어집니다.

이렇게 한 줄이 계속 길어지는 것을 멈추고, 다음 셀들을 새로운 두 번째 줄(행)에 배치하려면 <tr> 요소가 필요합니다 ('tr'은 'table row'의 약자입니다). 지금 바로 살펴볼까요?

방금 만든 네 개의 셀을 다음과 같이 <tr> 태그로 감싸보세요.

<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>

이제 줄 하나(행 하나)를 완성했으니, 한두 줄 정도 더 만들어 보세요. 각 줄은 추가적인 <tr> 요소로 감싸져야 하고, 그 안에 들어갈 각 셀은 <td> 요소에 담겨야 합니다.

정답 코드를 보려면 여기를 클릭하세요 여러분이 완성한 HTML 코드는 대략 아래와 같은 모습이어야 합니다.

<table>
  <tr>
    <td>Hi, I'm your first cell.</td>
    <td>I'm your second cell.</td>
    <td>I'm your third cell.</td>
    <td>I'm your fourth cell.</td>
  </tr>

  <tr>
    <td>Second row, first cell.</td>
    <td>Cell 2.</td>
    <td>Cell 3.</td>
    <td>Cell 4.</td>
  </tr>
</table>

이 코드는 GitHub의 simple-table.html에서도 확인하실 수 있어요 (라이브로 실행되는 모습 보기).

💡 강사의 보충 설명 & 팁:
태그 이름이 헷갈린다면 약자를 생각하세요!

<table> : 표 전체

<tr> : Table Row (행, 가로줄 하나)

<td> : Table Data (행 안에 들어가는 개별 데이터 셀)
"테이블(table) 안에 행(tr)을 만들고, 그 행 안에 데이터(td)를 넣는다"라고 순서대로 외우면 절대 안 까먹으실 겁니다.

<th> 요소를 사용하여 제목 추가하기

이제 표 제목(Table headers)으로 시선을 돌려볼까요? 표 제목은 행이나 열의 맨 앞부분에 위치해서 해당 행/열에 어떤 데이터가 들어있는지 정의해 주는 특별한 셀을 말합니다 (이 문서 맨 처음에 보았던 예제에서 "Person"이나 "Age" 셀을 생각하시면 됩니다). 이게 왜 유용한지 보여주기 위해 아래 표 예제를 한번 살펴보죠. 먼저 소스 코드입니다.

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

화면에 렌더링된 표는 다음과 같습니다. (강아지들의 이름, 품종, 나이 등을 나타내는 표입니다)

여기서 문제는, 무슨 내용인지 대충 파악할 수는 있지만 원하는 데이터를 찾아서 짝맞춰 보기가 쉽지 않다는 점이에요. 만약 열 제목과 행 제목이 눈에 확 띄게 구분된다면 훨씬 더 보기가 좋겠죠.

강아지 표에 제목(Header) 추가해 보기

자, 이제 방금 본 강아지 표 예제에 제목을 추가해서 표를 개선해 보는 실습을 해볼게요.

먼저 dogs-table.html과 minimal-table.css 파일을 여러분의 컴퓨터 새 폴더에 복사해 주세요.
표의 제목을 시각적으로나 의미론적으로 명확한 '제목'으로 인식시키려면 <th> 요소를 사용하면 됩니다 ("th"는 "table header"의 약자예요). 이 요소는 일반 데이터 셀이 아닌 제목을 나타낸다는 점만 제외하면 <td>와 똑같은 방식으로 동작합니다. HTML 코드를 열고 표의 제목 역할을 해야 할 셀들을 감싸고 있는 <td> 요소들을 모두 <th> 요소로 변경해 보세요.
코드를 저장하고 브라우저에서 열어보면, 변경한 부분들이 정말 제목처럼 돋보이게 바뀐 것을 확인할 수 있을 거예요.

정답 코드를 보려면 여기를 클릭하세요 여러분이 완성한 HTML 코드는 대략 다음과 같아야 합니다.

<table>
  <tr>
    <td>&nbsp;</td>
    <th>Knocky</th>
    <th>Flor</th>
    <th>Ella</th>
    <th>Juan</th>
  </tr>
  <tr>
    <th>Breed</th>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <th>Owner</th>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <th>Eating Habits</th>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

이 코드는 GitHub의 dogs-table-fixed.html 파일에서도 찾을 수 있어요 (라이브로 실행되는 모습 보기).

제목(Header)이 유용한 이유는 무엇일까요?

이 질문에 대해서는 이미 부분적으로 답을 드렸습니다. 제목이 명확하게 눈에 띄면 원하는 데이터를 찾기가 훨씬 쉬워지고, 디자인 측면에서도 전반적으로 보기 좋아지기 때문이에요.

참고: 표 제목(<th>)에는 기본 스타일이 적용되어 있습니다. 여러분이 따로 표에 스타일을 지정하지 않아도 텍스트가 굵게(bold) 표시되고 중앙 정렬(centered)되어서 주변 셀들과 확 구분되도록 도와줍니다.

표 제목은 또 다른 엄청난 장점이 있어요. 바로 다음 문서에서 배울 scope 속성과 함께 사용하면, 각 제목을 동일한 행이나 열에 있는 모든 데이터와 연결시켜 웹 접근성을 훌륭하게 높여준다는 점이에요. 이렇게 되면 스크린 리더가 열이나 행의 모든 데이터를 한 번에 쭉 이어서 읽어줄 수 있기 때문에 아주 유용합니다.

셀이 여러 행과 열을 차지하도록 허용하기 (병합)

때로는 표의 셀이 여러 열이나 여러 행에 걸쳐 합쳐져야 할 때가 있죠. 흔한 동물들의 이름을 보여주는 아래의 간단한 예제를 보세요. 어떤 동물은 암컷과 수컷의 명칭을 별도로 표기해야 하고, 어떤 동물은 구분이 없어서 동물 이름 하나가 표 전체 너비를 다 차지하게 만들고 싶습니다.

먼저 초기 마크업(HTML) 코드는 이렇습니다.

<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

하지만 화면에 출력된 결과를 보면 우리가 원하던 모습이 아닐 겁니다.

`rowspan`과 `colspan`으로 레이아웃 수정하기

우리는 "Animals", "Hippopotamus", "Crocodile" 셀이 2개의 열(가로)을 넓게 차지하도록 만들어야 하고, "Horse"와 "Chicken" 셀은 아래로 2개의 행(세로)을 차지하게 만들어야 합니다. 다행히도 표의 제목과 데이터 셀에는 이런 작업을 가능하게 해주는 colspan과 rowspan이라는 아주 훌륭한 속성이 있어요.

두 속성 모두 단위를 적지 않은 순수 숫자 값을 받으며, 이 숫자는 병합하고 싶은 행이나 열의 개수를 의미합니다. 예를 들어 colspan="2"라고 적으면 해당 셀이 두 개의 열(칸)을 차지하게 됩니다.

이제 이 colspan과 rowspan을 이용해서 표를 수정해 볼까요?

먼저 animals-table.html과 minimal-table.css 파일을 여러분의 컴퓨터에 다운로드하세요. HTML 파일에는 방금 본 동물 표 예제 코드가 들어 있습니다.
다음으로, colspan을 사용하여 "Animals", "Hippopotamus", "Crocodile"이 두 개의 열을 쭈욱 가로지르도록 만드세요.
마지막으로 rowspan을 사용하여 "Horse"와 "Chicken"이 두 개의 행을 아래로 쭉 가로지르도록 만드세요.
코드를 저장한 후 브라우저에서 열어서 깔끔해진 표를 감상하세요.

정답 코드를 보려면 여기를 클릭하세요 여러분이 수정한 최종 HTML 코드는 다음과 같아야 합니다.

<table>
  <tr>
    <th colspan="2">Animals</th>
  </tr>
  <tr>
    <th colspan="2">Hippopotamus</th>
  </tr>
  <tr>
    <th rowspan="2">Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th colspan="2">Crocodile</th>
  </tr>
  <tr>
    <th rowspan="2">Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

이 코드 역시 GitHub의 animals-table-fixed.html에서 확인하실 수 있습니다 (라이브로 실행되는 모습 보기).

💡 강사의 보충 설명 & 팁:
엑셀에서 '셀 병합' 버튼을 누르는 것과 똑같다고 생각하시면 됩니다. 다만 코딩을 할 때는 가로로 칸을 합칠 건지(colspan, column span), 세로로 칸을 합칠 건지(rowspan, row span)를 정확히 명시해 줘야 해요. 실무에서 아주 복잡한 요금제 비교표나 상세한 일정표를 구현할 때 필수적으로 쓰이는 속성입니다!

<colgroup>과 <col>을 사용하여 열 그룹화하기

표 전체의 특정 '열(column)'을 하나로 묶어서 조작해야 할 때가 있습니다. (예를 들어 특정 열에만 스타일을 적용해야 할 때 말이죠. 표 스타일링에 대해서는 CSS 표 스타일링 과정에서 자세히 배우게 됩니다.)

HTML 표를 만들다 보면 하나의 열에 있는 모든 셀에 배경색을 넣는 일이 생각보다 엄청 귀찮고 까다롭다는 걸 깨닫게 되실 텐데요. 바로 이때 <colgroup>과 <col> 요소가 해결사가 되어 줍니다.

<colgroup> 요소는 <table> 요소를 열고 나서 바로 다음, 표의 자식 요소로 위치해야 합니다. 그리고 이 <colgroup> 태그 안에는 한 개 이상의 <col> 요소를 넣을 수 있는데, 이 <col> 요소들이 바로 묶여진 '열 그룹'을 나타냅니다.

<col> 요소에는 span 속성을 사용해서 해당 그룹에 몇 개의 열이 포함되는지 지정할 수 있습니다. 또한 style 같은 전역 속성을 넣어 인라인 스타일을 먹일 수도 있고, class 속성을 넣어 나중에 CSS나 JavaScript에서 클래스 이름으로 쉽게 조작할 수도 있어요. 이 <col> 요소들은 표의 가장 앞쪽 열부터 순서대로 매칭됩니다. (영어권처럼 왼쪽에서 오른쪽으로 읽는 언어 설정에서는 제일 왼쪽 열부터 시작합니다.)

이게 도대체 무슨 말인지 예제를 통해 한번 볼까요? 다음은 학교 시간표를 보여주는 표입니다.

<h1>School language timetable</h1>

<table>
  <colgroup>
    <col span="2" />
    <col class="column-background" />
    <col class="column-fixed-width" />
    <col class="column-background" />
    <col class="column-background-border" />
    <col span="2" class="column-fixed-width" />
  </colgroup>
  <tr>
    <td>&nbsp;</td>
    <th>Mon</th>
    <th>Tues</th>
    <th>Wed</th>
    <th>Thurs</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
  <tr>
    <th>1st period</th>
    <td>English</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>German</td>
    <td>Dutch</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>2nd period</th>
    <td>English</td>
    <td>English</td>
    <td>&nbsp;</td>
    <td>German</td>
    <td>Dutch</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>3rd period</th>
    <td>&nbsp;</td>
    <td>German</td>
    <td>&nbsp;</td>
    <td>German</td>
    <td>Dutch</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>4th period</th>
    <td>&nbsp;</td>
    <td>English</td>
    <td>&nbsp;</td>
    <td>English</td>
    <td>Dutch</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

이 표는 총 8개의 열을 가지고 있습니다. <colgroup>과 <col> 구조를 좀 더 자세히 뜯어보면서 이게 각각의 열에 어떤 영향을 주는지 알아봅시다.

<colgroup>
  <col span="2" />
  <col class="column-background" />
  <col class="column-fixed-width" />
  <col class="column-background" />
  <col class="column-background-border" />
  <col span="2" class="column-fixed-width" />
</colgroup>

<col> 요소들을 차근차근 살펴보면요:

첫 번째 <col>은 span="2"가 설정되어 있습니다. 따라서 왼쪽에서부터 첫 번째 열과 두 번째 열을 한꺼번에 대표합니다. 이 두 열에는 특별한 스타일을 주지 않을 거지만, 그 뒤에 나오는 열들을 제대로 타겟팅하기 위해 반드시 빈칸을 채워두듯 적어주어야 합니다.
두 번째와 네 번째 <col>은 span 속성이 없습니다. 그러므로 각각 단 하나의 열(세 번째 열과 다섯 번째 열)만 대표하게 되죠. 이 두 열에는 column-background라는 클래스가 적용됩니다.
세 번째 <col> 역시 span 속성이 없고, 네 번째 열을 대표합니다. 여기엔 column-fixed-width라는 클래스가 적용되어 있어요.
다섯 번째 <col>도 span 속성 없이 여섯 번째 열을 대표하며, column-background-border라는 클래스가 부여됩니다.
여섯 번째 <col>은 span="2"가 설정되어 있어서 일곱 번째와 여덟 번째 열을 대표합니다. column-fixed-width 클래스가 적용되어 있네요.

이 예제의 전체 CSS를 다 보여드리진 않겠지만, 각 클래스(column-background, column-fixed-width, column-background-border)에 어떤 스타일이 적용되었는지 살짝 보여드릴게요.

.column-background {
  background-color: #97db9a;
}

.column-fixed-width {
  width: 40px;
}

.column-background-border {
  background-color: #dcc48e;
  border: 4px solid #c1437a;
}

column-background 클래스가 있는 <col> 요소는 단색 배경색이 칠해집니다.
column-fixed-width 클래스가 있는 <col> 요소는 너비가 좁게 고정됩니다.
column-background-border 클래스가 있는 <col> 요소는 단색 배경색에 두꺼운 테두리가 그려집니다.

지금 당장은 CSS가 어떻게 작동하는지 너무 신경 쓰지 않으셔도 괜찮습니다. 나중에 CSS 스타일링 기초 모듈에서 아주 자세히 배울 테니까요!

위 코드가 실제로 어떻게 렌더링되는지 한 번 보실까요? 지정된 클래스에 따라 각각의 열이 어떻게 다르게 스타일링되었는지 눈여겨보세요.

참고: 비록 <colgroup>과 <col>이 주로 스타일링을 편리하게 하기 위해 존재하긴 하지만, 어쨌든 HTML 기능이기 때문에 CSS 모듈이 아닌 이곳에서 설명해 드렸습니다. 하지만 솔직히 말씀드리면 이는 제한적인 기능에 가깝습니다. <colgroup> 레퍼런스 문서를 보시면 아시겠지만, <col> 요소에 적용할 수 있는 스타일 속성은 극히 일부에 불과하고, 과거에 사용할 수 있었던 다른 여러 설정들은 대부분 폐기되었거나 곧 폐기될 예정(deprecated)입니다.

💡 강사의 보충 설명 & 팁:
레퍼런스 문서에서도 언급하듯 모든 CSS 속성이 다 먹히는 건 아니지만, 실무에서 표를 짤 때 각 열의 너비(width)를 미리 고정할 때 <colgroup>은 아주 훌륭한 역할을 합니다! 각 열마다 <col style="width: 20%;"> 같은 식으로 뼈대를 잡아두면 데이터가 아무리 길고 지저분하게 들어와도 표 전체의 모양이 와르르 무너지는 것을 막아줄 수 있답니다.

김동현

프론트에_가까운_풀스택_개발자

이전 포스트

HTML video and audio

다음 포스트

HTML table basics

mdn 학습 번역 - HTML

HTML 표(Table) 기초

표(Table)란 무엇인가요?

표는 어떻게 작동하나요?

표 스타일링 (Table styling)

HTML 표를 피해야 할 때는 언제인가요?

첫 번째 표 만들기

<th> 요소를 사용하여 제목 추가하기

강아지 표에 제목(Header) 추가해 보기

제목(Header)이 유용한 이유는 무엇일까요?

셀이 여러 행과 열을 차지하도록 허용하기 (병합)

`rowspan`과 `colspan`으로 레이아웃 수정하기

<colgroup>과 <col>을 사용하여 열 그룹화하기

HTML video and audio

HTML table accessibility

0개의 댓글

HTML table basics

mdn 학습 번역 - HTML

HTML 표(Table) 기초

표(Table)란 무엇인가요?

표는 어떻게 작동하나요?

표 스타일링 (Table styling)

HTML 표를 피해야 할 때는 언제인가요?

첫 번째 표 만들기

<th> 요소를 사용하여 제목 추가하기

강아지 표에 제목(Header) 추가해 보기

제목(Header)이 유용한 이유는 무엇일까요?

셀이 여러 행과 열을 차지하도록 허용하기 (병합)

rowspan과 colspan으로 레이아웃 수정하기

<colgroup>과 <col>을 사용하여 열 그룹화하기

HTML video and audio

HTML table accessibility

0개의 댓글

`rowspan`과 `colspan`으로 레이아웃 수정하기