HTML_표 만들기 (feat. <table>, <tr>, <td>)

HTMl로 홈페이지를 만들때 주로 사용하진 않지만

기능은 알고 넘어가야 할 것 같아 테이블태그도 정리 하려한다.

<table>태그는 여러가지 하위태그를 가지고있는데

<thead>, <tbody>, <tfoot>, <tr>, <th>, <td> 등 같이 사용되는 태그가 많다.

여기서 thead는 말그대로 머리부분을 작성하게 된다.

thead	thead	thead	thead
tbody	tbody	tbody	tbody
tbody	tbody	tbody	tbody
tfoot			tfoot

위 표처럼 <thead>는 표 내용에서 분류를 서술하는 구역에 사용된다.

ex) 아래와 같은 구역이 thead이다.

번호

이름

나이

연락처

<tbody>는 테이블 내에서 본문에 해당하는 부분이다.

ex) 아래와 같은 구역이 tbody이다.

1	홍길동	15	010-0000-0000
2	흥부	50	010-1111-1111

<tfoot>은 테이블 내에서 정리하는 마지막부분이다.

ex) 아래와 같은 구역이 tfoot이다.

합계

4000원

 

구역을 정의하였으니 이제 테이블을 만들어보자

예재

예재를 보면서 하나씩 해석해보자

먼저 tr은 테이블에서 '행'을 구별해주는 태그이다.

그리고 각 cell(칸)마다 <th> 또는 <td>라는 태그가 붙는데

이는 출력물 예재를 보면 글자의 굵기가 볼드처리, 가운데정렬이 되었음을 확인할 수 있다.

th는 thead에 어울리는 가운데정렬, 볼드처리 기능을 가진 cell생성 태그이다.

td는 기본 cell생성 태그라고 이해하면 되겠다.

 

그리고 합계를 출력하기 위해서 셀병합을 해주어야 하는데,

이는 tfoot-tr-td첫번째 태그의 colspan="2"라는 속성을 눈치챌 수 있다.

이 속성을 통해서 가로의 셀병합을 명령할 수 있다.

반대로 rowpan="n"속성을 사용하면 세로의 셀병합을 할 수 있다.

 

테이블태그는 많이 사용하지 않기때문에 이 정도만 짚고 넘어가도록 하고

실 사용시엔 추가적인 검색을 통해 확실히 알아가는 방향으로 하도록 하자.