[table] thead, tbody, tfoot 어떻게 써야 할까?

안녕하세요 웹디자이너 웹코기입니다. 

 

저는 일을 할 때 모르는 기술이 생기면 포털사이트 검색이나 책에서 정보를 얻은 후, 유용한 정보를 메모장에 적는 습관이 있습니다. 이 메모장에 있는 많은 유용한 정보를 여러분들과 공유하고, 소통하고, 제 자신도 글을 쓰면서 다시 개념을 재정리하기 위해 이 블로그를 시작하게 되었습니다. 많은 도움이 되었으면 좋겠습니다.

 

 

여러분은 thead, tbody, tfoot 태그를 아시나요 ?

thead, tbody, tfoot 는 table의 각 부분 (머리글, 본문글, 바닥글)을 지정합니다. 아래를 보시죠.

 

 

 

 

위와 같이 이 태그들은 table에서 머리, 본문, 바닥을 명시해주는 역할을 합니다. 

그러면 태그 위치는 어디에 들어가야 하는지 아래의 코딩을 통해서 보도록 하겠습니다.

 

 

<table>
    <thead>
        <tr>
             <th></th>
             <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
             <td></td>
             <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
             <td></td>
             <td></td>
        </tr>
    </tfoot>
</table>

 

table을 코딩할 때, 이 세개의 요소를 반드시 적어줘야 하는 것은 아닙니다. 

이 세개의 태그를 적어주는 경우는 '각 영역을 구분지어서 사용하고 싶을 때' 적어주면 되는겁니다. 

 

 

하지만 tbody는 thead, tfoot가 필요한 것이 아니라면, 코딩 시 적어주지 않아도 됩니다. 이게 무슨 말이냐?? 아래의 코드를 보시죠.

 

<table>
    <tr>
         <th></th>
    </tr>
    <tr>
         <td></td>
    </tr>
</table>

 

이렇게 tbody를 적지 않고, F12 개발자도구를 눌러보면 아래와 같이 tbody가 자동으로 작성되어 있습니다.

 

이처럼 tbody는 굳이 적어주지 않아도 자동으로 생성이 됩니다.

thead, tfoot과 구분지어 사용하고 싶으시다면 tbody도 적어주면 됩니다 ~!