HTML 독학을 위한 HTML 표 만들기! <TABLE>, <TR>, <TD>,<TH>

이번에는 HTML을 가지고 표만들기를 한번 진행해 보도록 하겠습니다. <table> 태그에는 하위로 <th>, <thead>, <tfoot>, <tbody>, <tr>, <td>가 있습니다. 우선 가장 많이 사용되는 <tr>태그와 <td>태그에 대해서 한번 알아보겠습니다. 

 

<table>태그의 <tr>, <td>태그 

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

 

<table>은 큰 표를 만드는 것을 선언으로 안쪽 <tr>행<td>열을 구분하여 만들 수 있습니다.

위처럼 1행 3열에 대한 표를 만들고 싶다면 어떻게 소스를 만들면 될까요??

 

<table> // 테이블 시작!
	<tr>  // 1행 만들기
  	  	<td> // 1열 시작
  	      </td> // 1열 끝!
 	       <td> // 2열 시작
  	      </td> // 2열 끝
 	       <td> // 3열 시작
  	        </td> // 3열 끝
	</tr>  // 1행 끝! 
</table>  // 테이블 끝

1열 ~

2열 ~

3열 ~

결과는 바로 위에 보이는 "1열 ~" 과 같이 한 줄의 표가 완성이 되는 것을 확인하실 수 있습니다. 

5행 3열이라면 <tr>의 사용은 5번 <td>의 사용은 3번씩 총 15번을 사용하게 되는 것입니다. 

 

<thead>, <tbody>, <tfoot>, <th> 태그

<table>태그에 속하는 <thead>, <tbody>, <tfoot>에서 t만 빼고 보자 그러면 head, body, foot으로 머리, 몸통, 발 이라는 뜻입니다. 앞에 table의 약자인 t가 붙어있으니 테이블의 머리, 테이블의 몸통, 테이블의 발로 각각의 영역을 구분하는 녀석인 것입니다. 

 

블로그나 웹 글쓰기 에디터를 활용해서 표만들기로 4 * 3칸의 표를 한번 만들어보겠습니다. 

 

1행 1열	1행 2열	1행 3열	1행 4열
2행 1열	2행 2열	2행 3열	2행 4열
3행 1열	3행 2열	3행 3열	3행 4열

기본 표 테마를 적용하여 한번 확인해 보도록 하겠습니다~ 표를 만들었다면 HTML모드를 통해서 해당 소스가 어떻게 생겼는지 확인해 보겠습니다. 

 

소스코드를 살펴보면 행과 열을 지정했는데 <table>태그 바로 밑에 <tbody> 태그를 시작하는 것을 볼 수 있습니다. <tbody>가 왜 생겼을까??? 1행 1열 부터 3행 4열까지가 <table>태그의 몸통임을 알려주는 것 입니다. 

 

<tbody>는 테이블의 몸통임을 확인했습니다. 그러면 몸통위에 머리는 어떻게 만들까? 

<tbody>의 위에 <thead>를 사용해 행(<tr>)과 열(<td> 또는 <th>)을 활용하여 테이블 가장 상단 첫행을 만들어주는 방법이 있습니다. 여기서 <th>는 열을 표시해주지만 표의 제목을 표시하는 기능을 가지고 있습니다. <td>를 사용했을때와 <th>를 사용했을때 어떻게 바뀌는지  아래 결과에서 확인해보겠습니다. 

 

1열 제목	2열 제목	3열 제목	4열 제목
1행 1열	1행 2열	1행 3열	1행 4열
2행 1열	2행 2열	2행 3열	2행 4열
3행 1열	3행 2열	3행 3열	3행 4열

 

<thead>를 사용한 열에는 1열 <tr>에 <th>를 사용하여 굵은 글씨체와 가운데 정렬이 된 것을 보실 수 있습니다. <th>는 꼭 <thead>에서만 사용이 가능한 것은 아닙니다. 현재 적용된 소스 중 2행 2열과 2행 4열의 소스를 <td>에서 <th>로 한번 변경해보겠습니다. 

 

1열 제목	2열 제목	3열 제목	4열 제목
1행 1열	1행 2열	1행 3열	1행 4열
2행 1열	2행 2열	2행 3열	2행 4열
3행 1열	3행 2열	3행 3열	3행 4열

<td>태그에서 <th>태그로 변경한 2행 2열과 2행 4열은 굵게, 가운데정렬로 제목서식으로 변경된 것을 확인하실 수 있습니다. 

 

똑같이 여기에 <tfoot>태그를 추가해 보겠습니다.  <tfoot>은 어디에 추가될까요?? <thead>는 머리로 몸통인 <tbody>의 위에 사용되었습니다. 그렇다면 발은 어디로 들어갈까요?? 발<tfoot>은 몸통<tbody>의 밑에다가 넣어주시면 됩니다.

1열 제목	2열 제목	3열 제목	4열 제목
1행 1열	1행 2열	1행 3열	1행 4열
2행 1열	2행 2열	2행 3열	2행 4열
3행 1열	3행 2열	3행 3열	3행 4열
tfoot 1행 1열	tfoot 1행 2열	tfoot 1행 3열	tfoot 1행 4열

<tfoot>은 테이블의 가장 마지막에 표시되는 테이블 입니다. 보통은 <thead>와 <tbody> 정도 사용되고 <tfoot>까지 사용하는 일은 많이 없던 것 같네요. 그래도 알아두면 요기나게 쓰이기도 합니다. 

 

표의 병합 colspan, rowspan 

위에서는 표를 만드는 방법에 대해서 공부했습니다. 그렇다면 표를 병합하려면 어떻게 해야될까?? 

2행 4열의 표를 만들었습니다. 1행의 2열 3열만 병합하고 싶은대 어떻게 하면 병합이 가능할까?? 

 

 

소스코드를 보면 첫번째 1행의 <tr>태그에는 <td>가 3개이고 2행의 <tr>태그에서 <td>는 4개 입니다. 1행의 <td>의 개수가 적은데 자세히 보면 2번째 <td>에 colspan="2"가 작성되어 있는 것을 확인하실 수 있습니다. 

 

사용법 
<td colspan="2"> </td>
<td colspan="5"> </td> 

colspan은 <td>태그 속에서 사용되어지는 속성 입니다. colspan="2"라고 지정한다면 <td>는 2개의 열크기를 가지게 되는 것입니다. 

 

그렇다면 세로 병합은 어떻게 사용될까?? 

 

세로 병합은 rowspan 속성을 사용합니다. rowspan ="n" 몇칸을 병합할 것이냐!

 

 

<table> 태그를 활용해서 테이블 표를 만들어보고 rowspan과 colspan을 활용해 여러 셀의 병합 세로와 가로 모두 병합하는 방법 등등 다양하게 만들어 보면서 <table>태그를 사용하는데 조금더 익숙해질 수 있도록 공부해보시면 좋습니다. 

 

<table>태그의 경우 나중 PHP나 JSP같은 웹 프로그래밍 언어를 배우게 될때 데이터베이스(DB)와 연동하여 반복문을 통해서 테이블의 내용을 생성하는 프로그램을 만들곤 합니다. 가장 대표적인 것이 "게시판 만들기"에 활용되어지기 때문에 <tr>, <td>, <th> 태그의 사용법과 colspan, rowspan을 활용한 병합기능을 어느정도 여러가지 테스트를 통해서 이해하시는 것이 좋습니다.