[html 태그] table 태그 (tr, th, td태그)

예전에는 table 태그를 레이아웃을 구축하는 용도로 많이 사용했지만

요즘엔 table 태그는 단순한 테이블 영역을 위해 사용된다.

 

1. table 태그의 기본 구조

table 태그는 단독으로 사용되진 않는다.

자식 요소로 thead, tbody, colgroup, caption, tr, th, td 등의 여러 태그들과 함께 쓰인다.

 

가장 기본적인 구조는 하나 이상의 tr, th, td 태그들과 함께 구성이 된다.

 

과목	점수
수학	100점
국어	80점

 

<table>
  <tr>
     <th>과목</th>
     <th>점수</th>
  </tr>
  <tr>
     <td>수학</td>
     <td>국어</td>
  </tr>
  <tr>
     <td>100점</td>
     <td>80점</td>
  </tr>
</table>

위의 소스는 가장 기본적인 구조인 tr, th, td 태그만 사용해서 적용한 모습이다.

 

<table>
  <thead>
     <tr>
       <th>과목</th>
       <th>점수</th>
     </tr>
  </thead>
  <tbody>
    <tr>
       <td>수학</td>
       <td>100점</td>
    </tr>
    <tr>
       <td>국어</td>
       <td>80점</td>
    </tr>
  </tbody>
</table>

위와 같은 소스라면 thead 영역에 tbody의 각 영역들에 대한 제목을

tbody 영역에는 thead의 제목에 대한 정보나 데이터가 노출될 수 있도록 한다.

 

2. tr 태그

tr태그는 table 태그에서 필수요소이며 th, td로 이루어져 있고

하나의 행(row)을 나타낸다.

즉, tr이 사용되면 tr 안에 있는 요소들은 하나의 행으로 처리가 된다.

 

3. th 태그

th는 테이블에서 요소별 제목을 나타낸다.

<table>
  <tr>
    <th>이름</th>
    <td>철수</td>
  </tr>
</table>

위의 소스에서 본다면 이름 : 철수가 노출되는 테이블에서

해당 행의 제목은 '이름' 이라는 정보이며 제목에 대한 데이터는 '철수' 라는 것을 알 수 있다.

 

주로 사용하는 속성은 rowspan, colspan, scope 등이 있다.

 

3-1. rowspan : 행 병합

<table>
  <tr>
    <th rowspan="2">이름</th>
    <td>철수</td>
  </tr>
  <tr>
    <td>영희</td>
  </tr>
</table>

 

이름	철수
	영희

 

3-2. colspan : 열 병합

<table>
  <tr>
    <th colspan="2">이름</th>
  </tr>
  <tr>
    <td>철수</td>
    <td>영희</td>
  </tr>
</table>

 

이름
철수	영희

 

3-3. scope : th에서만 사용할 수 있는 속성으로 해당 th가 어떤 데이터와 연결이 되고 있는지 명시할 수 있다.

<table>
  <tr>
    <th scope="col">이름</th>
    <th scope="col">나이</th>
  </tr>
  <tr>
    <td>철수</td>
    <td>10살</td>
  </tr>
  <tr>
    <td>영희</td>
    <td>11살</td>
  </tr>
</table>

위의 경우 이름, 나이 라는 제목이 각각

이름은 철수, 영희가 포함된 열을

나이는 10살, 11살이 포함된 열의 제목으로 존재한다는 것을 명시한다.

 

scope 속성은 화면상 드러나는 시각적 효과는 없지만 스크린 리더와 같은 장치에서 데이터를 읽을 때 활용이 된다.

 

4. td 태그

th태그에서 정의한 제목 영역에 대한 데이터 및 정보를 나타낸다.

 

주로 사용하는 속성은 th와 비슷하게 colspan, rowspan 등을 사용하고

th와는 다르게 scope 속성은 사용할 수 없다. (html5 이전에는 사용할 수 있었다고 한다.)