2022-02-10 17:30 작성

HTML TABLE 기초

Table of contents

HTML TABLE 기초

Table은 무엇인가?

Table은 행과 열로 이루어진 구조화된 data set을 말한다(=tabular data). Table은 서로 다른 종류의 data를 어떤 방식으로 연결시켜 쉽고 빠르게 값을 찾을 수 있게 한다. 예를 들어, 사람과 나이, 일주일 각각의 단위 일 또는 시간표가 있다. Table은 인간 사회에서 매우 흔하게 사용되어 왔다. 1800년대 US 인구 조사 문서가 그 증거다. 따라서 web의 창시자들이 tabular data를 구조화하고 표시하는 방법을 제공하는 것은 당연한 것이며 의심의 여지가 없다.

Table은 어떻게 작동하는가?

Table의 초점은 엄격함에 있다. 정보는 행과 열의 header(카테고리) 사이에서 시각적 연합을 만들어냄으로써 쉽게 해석된다. 아래의 Table 예시를 보고 62개의 달을 가진 Jovian gas giant를 찾아보라. 아마 관련된 행과 열의 header를 참고해 쉽게 답을 찾을 수 있을 것이다.

Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric.
		Name	Mass (10²⁴kg)	Diameter (km)	Density (kg/m³)	Gravity (m/s²)	Length of day (hours)	Distance from Sun (10⁶km)	Mean temperature (°C)	Number of moons	Notes
Terrestrial planets		Mercury	0.330	4,879	5427	3.7	4222.6	57.9	167	0	Closest to the Sun
		Venus	4.87	12,104	5243	8.9	2802.0	108.2	464	0
		Earth	5.97	12,756	5514	9.8	24.0	149.6	15	1	Our world
		Mars	0.642	6,792	3933	3.7	24.7	227.9	-65	2	The red planet
Jovian planets	Gas giants	Jupiter	1898	142,984	1326	23.1	9.9	778.6	-110	67	The largest planet
	Gas giants	Saturn	568	120,536	687	9.0	10.7	1433.5	-140	62
	Ice giants	Uranus	86.8	51,118	1271	8.7	17.2	2872.5	-195	27
	Ice giants	Neptune	102	49,528	1638	11.0	16.1	4495.1	-200	14
Dwarf planets		Pluto	0.0146	2,370	2095	0.7	153.3	5906.4	-225	5	Declassified as a planet in 2006, but this remains controversial.

올바르게 실행되었을 때, Screen readers와 같은 접근성 도구에서도 HTML tables가 정상적으로 작동한다. 따라서 성공적인 HTML table을 통해 시각이 보이는 사람이나 손상된 사람에게 비슷한 경험을 선사할 수 있어야 한다.

언제 HTML table을 사용해서는 안 될까?

HTML table은 표로 나타낼 수 있는 데이터에 사용되어야 하며 그렇게 하도록 디자인 되었다. 그러나 애석하게도, 많은 사람들이 web page의 layout을 구성하기 위한 용도로 사용하는 경우가 많았다. 예를 들어, 하나의 행을 header로, 다른 하나의 행을 content columns로 그리고 하나의 행을 footer로 사용하는 방식이다. 많은 Browsers를 관통하는 CSS 지원이 끔찍했기에 이런 일들이 빈번히 발생했지만 다행히 오늘날에는 점차 줄어들고 있는 실정이다. 그러나 여전히 web을 돌아다니다 보면 이런 부분들을 확인할 수 있기는 하다.

짧게 말해, 표를 이용해 layout을 만드는 것보다 CSS layout 기술을 사용하는 것이 바람직하다. 주된 이유는 다음과 같다:

Layout tables는 시각적으로 손상된 이용자들의 접근성을 감소시킨다: 시각장애인들이 사용하는 Screenreaders은 HTML page에 있는 tags를 해석해 이용자에게 그 내용을 전달한다. 표는 layout에 있어 올바른 도구가 아니기 때문에, 그리고 markup은 CSS layout 기술들보다 더 복잡하기에 Screenreader의 결과물은 이용자에게 혼란을 줄 수 있다.
Tables는 tag soup(tag 짬뽕탕)을 생산한다: 위에서 이미 언급 되었듯이, Table layout은 일반적으로 적당한 layout 기술보다 더 복잡한 markup 구조를 포함한다. 이것은 code를 쓰기 어렵게 만들 뿐 아니라 유지하기 어렵게 하며 debug에 있어서도 어려움을 야기한다.
Tables는 자동적으로 반응하지 않는다: 적절한 layout containers를 사용했을 때(<header>, <section>, <article>, 혹은 <div>), width의 기본값은 parent element의 100%가 된다. 반면에 Tables는 기본적으로 내부의 내용에 따라 그 사이즈가 정해지므로 기기마다 다른 환경을 적용하려면 추가적인 방법을 필요로 하게 된다.

Table 만들어 보기

모든 Table의 내용은 <table></table> tag로 닫혀 있어야 한다.
하나의 Table에서 가장 작은 container는 table cell이며 <td> element에 의해 생성된다(‘td’는 ‘table data’를 의미).
만약 4개의 cell을 가진 한 개의 행(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>

만약, 늘어나는 행의 cell을 멈추고, 그 다음 행으로 넘기고자 한다면 <tr> element(‘tr’은 ‘table row’를 의미)를 사용한다.

<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>

`<th>` element로 headers 추가하기

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

<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>

위와 같은 예시에서 구분이 되긴 했으나 데이터를 교차 참조하기는 쉽지 않다. 만약 열(column)과 행(row)의 제목이 어떤 방식으로든 두드러진다면 좀 더 나은 모습이 될 것이다.

Table headers(카테고리)

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

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

<table>
  <tr>
    <td>&nbsp;</td>
    <th scope="col">Knocky</th>
    <th scope="col">Flor</th>
    <th scope="col">Ella</th>
    <th scope="col">Juan</th>
  </tr>
  <tr>
    <th scope="row">Breed</th>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <th scope="row">Age</th>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <th scope="row">Owner</th>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <th scope="row">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>

시각적으로나 의미론적으로나 Table headers를 headers로 인식하기 위해 <th> element를 사용할 수 있다(‘th’는 ‘table header’를 의미). <td>와 같은 방식으로 작동하지만 일반적인 cell이 아닌 header의 의미를 가진다는 점에서 차이가 있다.

왜 headers는 유용한가?

Tables headers는 다른 styling을 하지 않아도 두드러진다는 장점이 있다는 것 외에도 다음 기사에서 다룰 scope 속성을 이용할 때의 장점이 있다. 이 속성은 같은 행과 열을 가진 모든 데이터를 각각의 header로 결합하여 좀 더 접근성이 좋은 tables를 만들 수 있게 한다. 그리하여 Screenreaders는 전체 행과 열을 읽을 수 있게 된다는 점에서 유용하다.

Cells에 복수의 행과 열 공간 할당하기

  Animals 
 Hippopotamus 
 Horse Mare 
 Stallion 
 Crocodile 
 Chicken Hen 
 Rooster 

Animals
Hippopotamus
Horse	Mare
Stallion
Crocodile
Chicken	Hen
Rooster

때때로, 우리는 복수의 행과 열 공간을 할당하길 원한다. 그 말은 즉, 위와 같이 데이터 구분이 제대로 되지 않은 tables를 만들지 않기 위해서 공간 할당이 이루어져야 한다는 의미다.

이를 위해서 colspan과 rowspan 속성을 사용할 수 있다. 이 속성들은 위에서 말한 공간을 할당하는 속성들로 이 속성들을 이용해 원하는 길이 만큼 공간을 할당할 수 있다. 예를 들어, colspan="2"는 2개의 column 공간이 할당된다는 의미다.

  Animals 
 Hippopotamus 
 Horse Mare 
 Stallion 
 Crocodile 
 Chicken Hen 
 Rooster 

Animals
Hippopotamus
Horse	Mare
Stallion
Crocodile
Chicken	Hen
Rooster

<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>

열에 일반적인 styling 적용하기

HTML은 <col>과 <colgroup> elements를 통해 전체 열의 styling 정보를 정의할 수 있는 method를 가지고 있다. 이 method는 열들(columns)에 styling을 구체화하는데 있어 비효율적이고 화나는 구간이 있을 수 있기에 존재한다 - 일반적으로 모든 열의 <td> 혹은 <th>에 styling 정보를 구체화해야 한다. 혹은 :nth-child와 같은 심화 선택자를 이용할 수도 있다.

`<col>`로 styling 하기

각각의 개별 cell에 styling 하는 번거러움과 비효율성을 없애기 위해 <col> element로 한 번에 정보를 명시할 수 있다. <col> elements는 열린 <table> tag 바로 아래에서 <colgroup> 안에 구체화하는 방법으로 구현한다. 그리고 이를 통해 각각의 cell에 적용하는 것과 동일한 효과를 얻을 수 있다.

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

<!-- 모든 열에 styling을 적용하고 싶을 경우 하나의 <col> element만 포함시켜도 됨. -->
<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>

저작권

Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다.

이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.