HTML - Tables

Create a Table

HTML에서도 데이터를 표현하는 방식 중 하나인 Tables(표)를 구현할 수 있다. 테이블을 구현하는 방법은 다음과 같다.

1. table 태그를 작성해준다.

   <table>
   
   </table>

2. 테이블은 행(row)과 열(column)로 구성되어 있다. table 태그 내에서 tr 태그를 작성하여 테이블의 행을 먼저 만들어준다.

    <table>
        <tr>            
            <!-- 첫 번째 행 -->
        </tr>
        <tr>
            <!-- 두 번째 행 -->
        </tr>
    </table>

tr은 table row의 약자이다.

3. 각 테이블의 cell에 해당하는 데이터를 td 태그를 사용하여 넣어준다.

    <table>
        <tr>            
            <td> 첫 번째 행의 데이터</td>
        </tr>
        <tr>
            <td> 두 번째 행의 데이터</td>
        </tr>
    </table>

td는 table data의 약자이다. 여기까지 코드를 작성한 결과이다.

첫 번째 행의 데이터

두 번째 행의 데이터

4. Table Heading을 추가한다

각 데이터로 구성된 열이 의미하는 바를 나타내는 Table Heading을 넣어주는 것은 테이블을 구현할 때 필수적인 항목이다. 보통 첫 번째 행이나 열에서 th 태그를 작성하여 heading을 구현할 수 있다.

  <table>
      <tr>
          <!-- 첫 번째 행-->
          <th>주변 카페 목록</th>
      </tr>
      <tr>
          <!-- 두 번째 행-->
          <td>스타벅스</td>
      </tr>
    
      <tr>
          <!-- 세 번째 행-->
          <td>파스쿠찌</td>
      </tr>
  </table>

th의 약자는 table heading이다. 위 코드를 작성하면 다음과 같은 결과가 나타난다.

주변 카페 목록
스타벅스
파스쿠찌

또한 th 태그의 scope라는 속성을 이용해 현재 th 태그가 행(row)에 대한 heading인지 열(column)에 대한 heading인지 브라우저에게 구체화 시켜줄 수 있다.

ex)

<th scope=“row”>이 heading은 행(row)에 대한 heading입니다. </th>  
<th scope=“col”>이 heading은 열(column)에 대한 heading입니다. </th>

5. 하지만 테이블의 각 셀을 구별할 수 있는 경계선이 없으면 그 테이블은 어색해지기 마련이다. table 태그의 속성 중 하나인 border를 활용해 경계선을 만들어주도록 하자.

ex)

<table border="1px solid gray">

주변 카페 목록
스타벅스
파스쿠찌

하지만 이런 식으로 table 태그의 border 속성을 이용하는 것은 Codecademy에 의하면 deprecated 즉, 권장되지 않는다고 한다. 대신 CSS를 활용하는 것을 권장하고 있다.

Spanning Columns, Rows

엑셀에서는 셀을 병합한다고 표현한다. 이를 HTML table에 표현하려면 td 태그의 colspan, rowspan 속성을 사용한다.

ex)

<td rowspan=“2”>2개의 행을 병합<td>
<td colspan=“3”>3개의 열을 병합<td> 

colspan을 활용한 열 병합

  <table border="1px solid gray">
    <tr>
      <th>월요일</th>
      <th>화요일</th>
      <th>수요일</th>
    </tr>
    <tr>
      <td colspan="2">부재중</td>
      <td>근무중</td>
    </tr>
</table>

월요일	화요일	수요일
부재중	근무중

rowspan을 활용한 행 병합

   <table border="1px solid gray">
        <tr>
            <th>월요일</th>
            <th>화요일</th>
            <th>수요일</th>
        </tr>
        <tr>
            <th>아침</th>
            <td rowspan="2">근무중</td>
            <td rowspan="3">휴식</td>
        </tr>
        <tr>
            <th>점심</th>    
        </tr>
        <tr>
            <th>저녁</th>
            <td>저녁식사</td>
        </tr>
    </table>

월요일	화요일	수요일
아침	근무중	휴식
점심
저녁	저녁식사

Table Body, Table Head, Table Footer

테이블에 많은 양의 데이터가 들어가 크기가 점점 커지면. 테이블의 영역을 명확히 구분해줘야 한다.

· Table의 각 셀에 대한 제목들은 thead 태그를 사용한다. 앞서 공부했던 th 태그가 안에 들어갈 수 있다.

· Table의 데이터는 tbody 태그를 사용하여 분류해준다.

· 간혹, 예산의 총합과 같은 테이블 내의 데이터들의 합산을 표현할 때 이러한 데이터들은 주로 테이블의 마지막 열에 정리되어 있다. 이를 구분하기 위해 tfoot 태그를 적절하게 활용해줄 수 있다.