7. HTML을 이용해 Table을 만들어 보자

테이블이란 무엇일까요? 테이블 하면 저는 시간표(time table)가 생각납니다. 어느 학교를 들어가던 벽면 한쪽에 <예시1>과 같은 시간표가 항상 붙어있습니다. 오늘은 저런 테이블을 html로 만들어 보려고 합니다. 참고로 예시1 TABLE은 아래 CSS로 꾸며진 테이블처럼 칸이 그려져 있지 않습니다. 테이블을 CSS와 함께 꾸미는 방법은 추후에 배울 테니 걱정하지 마시고 지금은 테이블에 보이지 않는 칸막이 같은 것이 있구나! 이렇게 생각하시면 될 것 같습니다.

<CSS로 꾸민 TABLE>

<예시1>

인트로를 생략하고 바로 본론으로 들어가도록 하겠습니다. 

---

*

아래 나오는 예시의 코드입니다. 참고하셔서 사용하세요.

---

1. 테이블 만들기

<예시2>

<table>

  <tr> 

    <th>Month</th> <th>예금</th>

  </tr>

  <tr>

    <td>January</td> <td>$1000</td>

  </tr>

  <tr>

    <td>February</td> <td>$800</td>

  </tr>

</table>

<예시2>에 보이는 테이블은 행x열이 3x2인 테이블은 가지고 있습니다. 참고로 행은 가로 열은 세로를 뜻합니다. 

1행은 Month 예금

2행은 January $1000

3행은 February $8000

1열은 Month January Febuary

2열은 예금 $1000 $800

이렇게 생각하시면 됩니다. 영어로 행은 row 열은 column이라고 합니다. 잠시 후에 나오는 태그와 관련이 있으니 주의 깊게 봐두시면 좋겠습니다. 

위에 적힌 태그를 하나씩 살펴봅시다. 

<table>

-테이블 태그는 테이블을 만드는 데 사용됩니다. 어떤 테이블을 만들더라고 반드시 있어야 하는 태그입니다. 

<tr>

-테이블 태그 안에는 반드시 tr = table row = 테이블 열 태그가 있어야 합니다. tr태그가 2개라면 2개의 행을, 3개라면 3개의 행을 원하시는 행만큼 tr태그를 작성해주시면 됩니다. 테이블 열을 먼저 작성한 후에 아래 나온 <th> 혹은 <td> 태그를 이용해 테이블을 완성하셔야 합니다.

<th>

-th태그는 테이블 헤더(table heading) 태그입니다. 여기선 month와 예금이 테이블 헤더로 들어와 있습니다. 테이블 헤더는 아래 테이블 데이터 <td>와 다르게 텍스트가 굵게 표시됩니다. 일반적으로 <th>는 행이나 열을 대표하는 곳에 쓰입니다. <예시2>에서는 month가 나머지 열 (Jan / Feb)을 대표하기 때문에 <th>가 사용되었으며, 마찬가지로 예금 또한 그 나머지 열 ($1000 / $800)을 대표하기 때문에 테이블 헤딩이 사용되었습니다

<td>

-td태그는 테이블 데이터(table data)태그입니다. <th>가 아닌 일반 텍스트를 <td>를 이용하여 사용하시면 됩니다. 

---

2. <td></td> 혹은 <td></td> 사이에 아무것도 안쓰면 어떻게 될까? 

<예시 3>

<table>

  <tr>

    <th></th> <th>책 이름</th>  <th>책 가격</th>

  </tr>

  <tr>

    <td>1</td> <td>빅데이터</td> <td>28000원</td>

  </tr>

  <tr>

    <td>2</td> <td>원씽</td> <td>15800원</td>

  </tr>

</table>

코딩을 자세히 살펴보면 3번째 줄에 <th></th>라고만 쓰이고 태그 사이엔 아무 문자도 없는 것을 확인할 수 있습니다. 그리고 <예시3>을 보시면 왼쪽 상단에 공간이 하나 있는 것 또한 관찰하실 수 있습니다. 그렇습니다. <td> 나 <td> 태그 안에 아무것도 적지 않는다면 <예시3> 처럼 empty cell (빈 공간)을 출력하게 됩니다. 그렇다면 <예시1>에도 같은 원리가 적용되었다는 것을 알 수 있겠죠? 시간이 되신다면 <예시1>도 직접 작성해보시면 좋을 것 같습니다. 

 

---

3. 행 늘리기 / 열 늘리기

Table에서 행을 늘리거나 열을 늘릴수 있습니다. 무슨말인지 이해가 안가시죠? 아래 표를 같이 보도록 할게요.

<table>

  <tr>

    <th>Month</th>  <th>예금</th>

  </tr>

  <tr>

    <td>January</td> <td>$1000</td> 

  </tr>

  <tr>

    <td>February</td> <td>$800</td>

  </tr>

  <tr>

    <td colspan="2">Sum: $180</td>

  </tr>

</table>

우선적으로 <예시2>와 달라진 점이 한눈에 들어올 것입니다. 먼저 박스 같은 것이 생겼고 그다음으로 SUM: $180이 추가되어있습니다. 이 예제에서 주목하셔야 할 부분은 SUM 부분 입니다. (참고로, 박스는 시각적인 이해를 위해 CSS로 제가 만들어 넣은 것이니 무시하셔도 됩니다) 

보통의 경우 테이블을 생성하면 한 칸에 하나의 텍스트가 들어왔었죠? 물론 그 칸에 아무것도 안 들어갈 수도 있습니다. (예시, <td></td>). 하지만 이 예제는 하나의 텍스트가 두 칸을 차지하고 있습니다. 확인되시나요? 과연 어떻게 구현을 하면 저렇게 출력이 될까요?

정답은 colspan(column span=열 늘리기), rowspan(row span = 행 늘리기) 라는 속성에 있습니다. 함께 자세히 보시죠. 

<td colspan="칸의 갯수">

colspan은 칼럼(열)을 늘린다는 말입니다. 쉽게 말하면, 열을 합친다고 생각하시면 됩니다.. 칸의 개수는 합치고 싶은 열의 개수를 의미합니다. 위에 Sum:$180을 보시면, 열이 원래 2개여야 하는데 Sum이 다 차지를 하고 있습니다. 그 말은 즉 colspan="2"라는 속성때문에, Month의 열과 예금의 열 사이의 칸이 합쳐져 하나가 되었다는 얘기입니다. 그렇기 때문에, Sum이 2칸을 다 차지하고 있습니다. 

만약에 네 번째 행에 안녕이라는 <td>태그를 추가하면 어떤 결과가 나올까요?

  <tr>

    <td colspan="2">Sum: $180</td>  <td>안녕</td> 

  </tr>

결과는 이와 같습니다. 

보시다시피 Sum이 두 칸을 이미 차지했기 때문에 그다음에 오는 <td>는 그 옆으로 밀리게 됩니다. 

<td rowspan="칸의 갯수">

rowspan은 colspan과 반대로 열(row)과 열을 합친다는 것을 의미합니다. 예시부터 함께 보시죠. 

혹시라고 궁금해하시는 분이 계실까봐 테이블 주변에 테두리 생성하는 코드까지 붙였습니다. 이 코드는 css 파트이기 때문에 눈으로만 보시면 됩니다. 나중에 css 파트에서 자세히 설명해드리겠습니다. 여러분이 주목하실 코드는 <table> ... </table>까지의 내용입니다. 

colspan과 다르게 이 예제는 rowspan 즉, 열과 열이 합쳐진 모양을 출력하고 있습니다. 

  <tr>

    <td>January</td>

    <td>$100</td>

    <td rowspan="2">$180</td>

  </tr>

  <tr>

    <td>February</td>

    <td>$80</td>

  </tr>

위에서 <td rowspan="2">$180</td> 여기에 주목해 봅시다. $180이 있는 위치는 위치상으로 2번째 행(가로)에 위치합니다. 

하지만 rowspan ="2"라는  속성을 사용함으로써 3번째 행까지 잡아먹어버렸습니다. 즉, 3번째 행이랑 합쳐졌습니다. 

이러한 이유 때문에, 세 번째 줄은 더이상 마지막 칼럼(세로 줄)에 무언가를 쓰지 못 합니다. 그래서 세 번째 행에는 <td>가 보시다시피 February와 $80 두 개 밖에 없습니다. 

마찬가지로 세번째 줄에 <td>태그를 하나 더 삽입하면 어떤 결과가 나올까요?

  <tr>

    <td>February</td>

    <td>$80</td>

    <td>안녕</td>

  </tr>

이번에도 안녕이 밀려서 삐져나오게 됩니다. 

 

간단히 정리하자면 colspan은 열을 합쳐주는 속성을 가지고 있으며 rowspan을 행을 합쳐주는 속성을 가지고 있다고 보시면 됩니다. 그리고 얼만큼 합칠 것이냐는 colspan= "합칠 열의 개수" , rowspan = "합칠 행의 개수"에 따라 달라집니다. 이 속성을 통해 저희는 보다 더 다양하게 테이블을 꾸밀 수 있습니다. 

오늘은 따로 연습문제를 드리지 않겠습니다만, 예제에 있는 테이블을 그대로 출력해보시는 연습을 하시면서 감을 잡아 놓으셨으면 좋겠습니다.

이상으로 HTML Table 태그 강의는 여기서 마치겠습니다.