11. table태그 _ 표 태그

table태그는 표를 만들어주는 태그입니다.

옛날 테이블코딩 때문에 테이블 자체가 웹표준에 어긋난다고 알고 있는 분들이 간혹 있는데요.
표가 필요하면 table 써야죠. 어쩌겠어요.
웹표준에 맞게 쓰시면 됩니다. 알아봅시다.

<table width="613" border="1" cellspacing="0" cellpadding="0" >
   <tr>
       <th>제목1</th>	
       <th>제목2</th>
       <th>제목3</th>	
   </tr>
   <tr>
       <td>내용1</td>	
       <td>내용2</td>
       <td>내용3</td>	
   </tr>
</table>
 

tr, th, td

tr태그는 행을 만들어 주는 태그입니다.
tr들이 주르륵 모이면 열이 되지요.
tr 안에는 th와 td로 채워져 있습니다.
th는 제목을 나타내는 셀, td는 내용 셀입니다.

caption

caption은 표 전체의 제목 태그입니다.
table태그를 열자마자 제일 위에 위치해야 합니다.
따로 값을 주지 않으면 가운데 정렬로 나타나지요
caption이 들어가면 어떻게 보이는지 확인해 봅시다.
참고로 table뒤에 붙는 border는 테이블 선의 여부를 결정하는 것으로 1또는 ""값을 가집니다.
그 외에 width는 넓이, cellspacing과 cellpadding은 셀 간격을 설정하는데
요새는 css로 제어하는 편이기 때문에 설명없이 css에서 다루도록 하겠습니다.
일단은 눈에 보여야 하니 쳐넣도록 합시다.

<table width="613" border="1" cellspacing="0" cellpadding="0">
   <caption> 내가 진정한 제목이지</caption>
   <tr>
       <th>과일이름</th>	
       <th>가격</th>	
   </tr>
   <tr>
       <td>사과</td>	
       <td>1,000</td>	
   </tr>
   <tr>
       <td>바나나</td>	
       <td>3,000</td>	
   </tr>
</table>
 

내가 진정한 제목이지

과일이름	가격
사과	1,000
바나나	3,000

행,열 합치기

표를 그리다 보면 행과 열이 합쳐진 경우가 있습니다.
행과 열을 병합하는 법을 알아 볼게요.
먼저 행을 합칠때는 합쳐지는 행에서 제일 앞에 있는 태그에 colspan="숫자" 라고 넣어줍니다.
여기서 숫자는 몇개의 셀을 합칠것인지 따라 넣으면 됩니다.
같은 방식으로 열을 합칠때는 열에서 제일 위에 있는 태그에 colspan="숫자" 라고 넣어줍니다.

<table width="613" border="1" cellspacing="0" cellpadding="0">
   <tr>
       <th>과일이름</th>	
       <th colspan="2">가격</th>
       <th>색깔</th>
   </tr>
   <tr>
       <td rowspan="2">사과</td>	
       <td>1,000</td>
       <td>1,500</td>
       <td>빨강</td>
   </tr>
   <tr>
       <td>1,000</td>
       <td>2,000</td>
       <td>초록</td>
   </tr>
   <tr>
       <td>바나나</td>	
       <td>3,000</td>	
       <td>3,500</td>
       <td>노랑</td>
   </tr>
</table>
 

과일이름	가격		색깔
사과	1,000	1,500	빨강
	1,000	2,000	초록
바나나	3,000	3,500	노랑

thead, tfoot, tbody

셋은 행을 묶어 그룹화 시킨후 제어하는 역할을 하는 태그이다.
이름에 맞게 thead는 table의 head부분, tbody는 body, tfoot은 foot이다.
thead와 tfoot은 한 테이블 안에서 한번만 쓰여야 하나 tbody는 갯수에 제한이 없다.
표기는 thead-tfoot-tbody 순으로 하나 thead-tbody-tfoot의 순서로 출력된다.
thead나 tfoot이 생략되는 경우가 많은데 데이터값이 많아져서 문서상으로 2장 이상이 되는 경우,
thead와 tfoot을 써줘야지만 각각의 문서에 상단과 하단에 제목이나 꼬리말이 출력된다.

<table width="613" border="1" cellspacing="0" cellpadding="0">
   <thead>
      <tr>
         <th>과일이름</th>
         <th>갯수</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td>합계</td>
         <td>3</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>사과</td>
         <td>2</td>
      </tr>
      <tr>
         <td>바나나</td>
         <td>1</td>
      </tr>
   </tbody>
</table>
 

과일이름	갯수
합계	3
사과	2
바나나	1

테이블 예제

처음 배우고 취직해서도 한동안 table 잘 못썼습니다.
은근 어렵고 헷갈려요 요게..
많이 해봅시다. 예제 하나 해볼께요.

<table width="613" border="1" cellspacing="0" cellpadding="0">
   <thead>
      <tr>
         <th rowspan="2">품목</th>
         <th rowspan="2">수량</th>
         <th>단가</th>
         <th rowspan="2">가격</th>
      </tr>
      <tr>
         <th>정가</th>
         <th>세일가</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td>합계</td>
         <td colspan="4">17,090</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>소주</td>
         <td>15</td>
         <td>1,100</td>
         <td>1,000</td>
         <td>15,000</td>
      </tr>
      <tr>
         <td>맥주 1.6L</td>
         <td>3</td>
         <td>4030</td>
         <td>-</td>
         <td>12,090</td>
      </tr>
   </tbody>
</table>
 

품목	수량	단가		가격
		정가	세일가
합계	17,090
소주	15	1,100	1,000	15,000
맥주 1.6L	3	4030	-	12,090

* 개인적인 공부를 정리하는 블로그입니다.