[HTML/CSS] Tabular data 📊

Shin Hyun Woo·2022년 4월 5일

멋쟁이사자처럼🦁

목록 보기

16/40

오늘 HTML 한바퀴의 "사이클"이 끝이 났다.
내가 처음 국비 과정으로 배울 때 HTML은 생각보다 긴 과정이였던 것 같은데 금방 끝나서 의아했다.
하지만 강사님께서 "하나를 완벽하게 공부하려고 하면 힘이 들어서 다음 과정을 넘어가는데 힘이 든다. 그러니 완벽하게 하기보다 여러 사이클을 돌면서 다음에 다시 돌아오는 것이 좋다."라는 말씀에 덥석 물어 HTML을 다음에 볼 때까지 보내주고 다음 과정으로 넘어가기로 한다. 😅
~~다음에 보자! HTML!~~

`<table>`

나는 이전부터 HTML을 배울 때 가장 어려웠다기 보단 헷갈리는 부분이 <table> 관련 태그들이었다.
내가 생각하는게 행인지? 열인지? 이게 이렇게 하면 어떻게 합쳐지는지? 아직도 헷갈리는 부분이다.
예전에는 <table>로 웹 레이아웃을 잡았다던데 생각만 해도 아찔하다..

이번을 계기로 한번 제대로 알아보도록 해야겠다.

<table>은 컨테이너 요소로서 테이블을 생성할 때 사용한다. 테이블의 크기는 자식들의 크기에 따라 결정되며 위의 이미지처럼 <tr>이라는 테이블의 행 태그의 집합이라고 생각하면 된다. 그리고 <table>은 기본적으로 반응형이라 창 크기가 줄어들어도 뷰포트에 알맞게 크기 조절을 한다.

<table>
  <!-- table 관련 태그들 -->
</table>

<table>는 혼자서 테이블을 생성하지 않는다. 안의 자식 요소들인 <caption> <tr> <th> <td>가 실질적으로 테이블의 콘텐츠를 채워 테이블을 생성한다.

  <table>
    <caption>
      <h1>이달의 책 판매량</h1>
      <p>2023.04.05</p>
    </caption>
      <tr>
          <th>구분</th>
          <th>이름</th>
          <th>판매량</th>
          </tr>
          <tr>
            <td>1</td>
              <td>해리포터</td>
              <td>100</td>
          </tr>
        <tr>
            <td>2</td>
              <td>트랜스포머</td>
              <td>90</td>
          </tr>
  </table>

`<caption>`

우리는 이미 <caption>이라는 태그를 본 적이 있다. 그렇다. 이미지를 삽입하고 그것에 대한 설명을 추가하는 <figcaption>이다. <table> 태그 내의 <caption>도 그런 역할을 한다.

<caption>은 <table> 태그 내에 작성이 되며 테이블의 제목을 지정하는 역할을 하며 기본적으로 콘텐텐츠의 "중앙 정렬"이 적용된다. 그리고 <caption>은 웹접근성에서 중요한 역할을 한다.

일반인들도 때론 복잡한 테이블을 보기가 힘들다. 하지만 더 힘든 것은 시각장애인이다. 복잡한 테이블의 큰 제목이 없다면 이것이 무엇에 관한 테이블인지 알아볼 수 있는 방법이 없기 때문이다.

그래서 <table>을 만들 때 <caption>을 꼭 추가하도록 하자.
또 주의할 점은 반드시 <table>의 첫번째 자식 요소로 사용해야한다.

아래는 <caption>이 출력된 화면이다.

"중앙 정렬"이 된 것을 볼 수 있고 테이블 상단에 위치해 테이블이 어떤 주제에 대한 것인지 말해준다.

<!-- table 안에 추가 -->
<caption>
	<h1>이달의 책 판매량</h1>
    <p>2023.04.05</p>
</caption>

`<thead>` / `<tbody>` / `<tfoot>`

<caption>처럼 이 태그들 또한 비슷한 것을 우리는 이미 사용하고 있었다.
<header>, <body>나<main>, <footer>처럼 테이블 내에서 섹션을 나누는 태그이다.

<thead> : <table> 태그의 상단에 위치하는 머리글, 주로 <th>를 사용하여 테이블에서 데이터가 어떤 데이터인지 알려주는 태그이다. "table heading"의 약자이다.
<tbody> : <table>의 본문이다. 주로 <tr>, <td>를 이용하여 행과 열에 데이터를 가지고 있는 영역을 말한다.
<tfoot> : <table> 태그의 하단에 위치하는 바닥글, 주로 테이블의 맨 마지막 줄에 사용되는 결과/합계 등의 값을 담고 있는 태그이다.

이 세 가지의 태그는 선택적으로 사용해도 된다. 만약 사용하지 않는다면 <table>의 시작을 행을 구성하기 위해 데이터를 감싸는 <tr>을 사용해도 상관없다.

그리고 이 세 가지 태그는 레이아웃이 바뀌는 것도 없다.

아래의 <thead>와 <tbody>를 추가한 소스 코드와 출력 결과이다. 레이아웃이 전혀 바뀌지 않았다.

  <table>
    <caption>
      <h1>이달의 책 판매량</h1>
      <p>2023.04.05</p>
    </caption>
    <thead>
      <tr>
          <th>구분</th>
          <th>이름</th>
          <th>판매량</th>
      </tr>
    </thead>
    <tbody>
	  <tr>
          <td>1</td>
          <td>해리포터</td>
          <td>100</td>
      </tr>
      <tr>
          <td>2</td>
          <td>트랜스포머</td>
          <td>90</td>
      </tr>
  </table>

`<tr>` / `<th>` / `<td>`

아래 소스 코드를보면 쉽게 어느 코드인지 알 수 있을 것이다.

<!-- <th>으로 구성된 <tr> -->
	<tr>
      <th>구분</th>
      <th>이름</th>
      <th>판매량</th>
	</tr>

<!-- <td>으로 구성된 <tr> -->
	<tr>
      <td>1</td>
      <td>해리포터</td>
      <td>100</td>
	</tr>
	<tr>
      <td>2</td>
      <td>트랜스포머</td>
      <td>90</td>
	</tr>

<tr> : "table row"의 약어, 말 그대로 테이블 내에서 행을 생성하는 태그이다.그리고 <tr>은 width와 height의 값을 적용할 수 없다.
<th> : "table heading"의 약어, 테이블에서 <td>의 값이 무슨 값인지 정의하는 태그이다. 한 단어로 말하자면 "범례"이다. 기본적으로 "콘텐츠 중앙 정렬"과 "bold체"가 적용되어 있다.
<td> : "table data"의 약어, 테이블에서 데어터의 값을 나타내는 태그이다. <td>는 <th>와 다르게 "왼쪽 정렬"을 기본으로 한다.

아래의 이미지를 보면 빨간색 박스는 <th>를 가리키고 파란색 박스는 <td>를 가리킨다.
그리고 이 두 태그끼리 묶은 한 행을 <tr>이라고 한다.

`<th>`과 `<td>`의 colspan, rowspan 속성

colspan과 rowspan은 쉽게 말하면 엑셀에서의 "셀 병합"이다.

사용법은 아래 코드처럼 작성하면 된다.

<td colspan="2">td 가로로 2개의 셀을 병합</td>
<th rowspan="3">th 세로로 3개의 셀을 병합</th>

<table>
    <caption> 이달의 책 판매량 </caption>
    <tr>
        <th colspan="2">구분</th>
        <th>판매량</th>
    </tr>
    <tr>
        <td>1</td>
        <td>해리포터</td>
        <td rowspan="2">100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>트랜스포머</td>
    </tr>
  <tr>
        <td>3</td>
        <td>쥬라기공원</td>
        <td>87</td>
    </tr>
</table>

위의 빨간색 박스인 <th>는 "열의 방향"으로 "2개의 셀"을 병합했고, 파란색 박스인 <td>는 "행의 방향"으로 "2개의 셀"을 병합한 결과이다.

만약 병합을 한다면 합쳐질 셀을 "주석 처리"를 거나 "삭제"를 해야 정상적으로 병합이 된다. 하지않으면 값이 밀려서 이상한 결과를 출력할 것이다.

`<th>`의 scope 속성 🔭

우선 우리는 테이블을 완성했지만 아직 <th>의 데이터가 어떤 <td>인지 연결시켜주지 않았다.

그러기 위해 scope라는 속성을 사용해야한다.

scope는 <th>에 사용하여 방향을 속성값으로 넣어주면 끝이다.

속성값으로는 해당 <th>의 세로에 가리키는 데이터가 있다면 col를, 가로에 가리키는 데이터가 있다면 row를 사용하면 된다.

속성값인 col과 row가 어느 방향인지 확실하게 알고 있어야 한다.

<table>
    <caption> 이달의 책 판매량 </caption>
    <tr>
      	<th scope="col">순위</th>
        <th scope="col">구분</th>
        <th scope="col">판매량</th>
    </tr>
    <tr>
        <td>1</td>
        <td>해리포터</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>트랜스포머</td>
        <td>100</td>
    </tr>
    <tr>
        <td>3</td>
        <td>쥬라기공원</td>
        <td>87</td>
    </tr>
</table>

위의 소스 코드에서 모든 <th>의 데이터들은 세로 방향으로 나열되어 있기 때문에 scope의 값은 col이 된다.

`<colgroup>`과 `<col>`

우리는 테이블을 작성하다보면 하나 하나 스타일을 적용하려하니 머리가 아파올 것이다.
이를 위해 나온 태그가 <colgroup>과 <col>이다.

<colgroup>은 열을 가리키는 <col>의 집합으로 이해하면 된다.

<col>은 각각의 열을 순서대로 가리킨다. 예를 들면 첫번째 <col>은 <th>순위</th>의 열을 가리키고 두번째 <col>은 <th>구분</th>을 가리킨다.

그래서 <col>에 class를 적용해서 지정한 다음 CSS 스타일을 적용하면 열 전체에 다 적용되는 것을 볼 수 있다.

<!-- style -->
<style>
  table{
    width:300px;
    border-collapse:collapse;
  }

  th, tr, td{
    border:1px solid #000;
  }

  .rank{
  	background-color:red;
  	color:white;
  }
  
  .name{
  	background-color:blue;
  	color:white;
  }
  
  .sell{
  	background-color:green;
  	color:white;
  }
</style>

<!-- table -->
  <table>
    <caption> 이달의 책 판매량 </caption>
  	<colgroup>
        <col class="rank" />
        <col class="name" />
        <col class="sell" />
      </colgroup>
    <tr>
      	<th>순위</th>
        <th>구분</th>
        <th>판매량</th>
    </tr>
    <tr>
        <td>1</td>
        <td>해리포터</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>트랜스포머</td>
        <td>100</td>
    </tr>
    <tr>
        <td>3</td>
        <td>쥬라기공원</td>
        <td>87</td>
    </tr>
</table>

HTML의 첫번째 사이클을 마치며 ⛳️

예전에 그렇게 많이 배우고도 쓰지않으면 기억이 나지 않는 HTML... 덕분에 요즘 많은 공부량을 차지하는 부분이 되었다.

특히 <table>같은 경우 배울 때부터 많이 쓰는 태그가 아니라고 들어서 인지 손에 안가기도 했으니.. 잊어버릴 수 밖에 없었던 것 아닌가 생각된다.

그리고 오늘의 HTML 한 사이클이 끝났다는 것에 불과 일주일 조금 넘었지만 별다른 문제없이 강의를 들었다는 것이 스스로 뿌듯하다. 😄

다음 CSS는 재미있겠지? 다음 강의가 기대된다!

Shin Hyun Woo

untiring_dev - Notion 페이지는 정리 중!

이전 포스트

[HTML/CSS] Forms (2) 📝

다음 포스트

[HTML/CSS] Tabular data 📊

멋쟁이사자처럼🦁

`<table>`

`<caption>`

`<thead>` / `<tbody>` / `<tfoot>`

`<tr>` / `<th>` / `<td>`

`<th>`과 `<td>`의 colspan, rowspan 속성

`<th>`의 scope 속성 🔭

`<colgroup>`과 `<col>`

HTML의 첫번째 사이클을 마치며 ⛳️

[HTML/CSS] Forms (2) 📝

[HTML/CSS] About CSS 👨‍🎨

0개의 댓글

[HTML/CSS] Tabular data 📊

멋쟁이사자처럼🦁

<table>

<caption>

<thead> / <tbody> / <tfoot>

<tr> / <th> / <td>

<th>과 <td>의 colspan, rowspan 속성

<th>의 scope 속성 🔭

<colgroup>과 <col>

HTML의 첫번째 사이클을 마치며 ⛳️

[HTML/CSS] Forms (2) 📝

[HTML/CSS] About CSS 👨‍🎨

0개의 댓글

`<table>`

`<caption>`

`<thead>` / `<tbody>` / `<tfoot>`

`<tr>` / `<th>` / `<td>`

`<th>`과 `<td>`의 colspan, rowspan 속성

`<th>`의 scope 속성 🔭

`<colgroup>`과 `<col>`