HTML에서 테이블 표현하기 (5)

1. 테이블 기본 형식

 

태그 명	태그 역할			특이사항
<table> 태그	HTML에서 테이블을 정의
<tr> 태그 (table row)	테이블에서 하나의 줄(행)을 정의
<td> 태그 (table data)	테이블에서 데이터가 표시되는 표준 셀을 정의			- 반드시 <tr> 태그에서 사용 - 왼쪽 정렬로 표시
<th> 태그 (table header)	테이블 내부에서 행/열의 제목을 표시하는 헤더 셀을 정의			- 반드시 <tr> 태그에서 사용 - 가운데 정렬로 표시
<caption> 태그	테이블 전체에 해당하는 제목을 표시			테이블 상단에 진하게 가운데 정렬로 표시

 

 

테이블 기본 형식 예제

<table border=1 width = 200px> <caption> 테이블 제목 테스트 </caption>  <tr>   <td> 1x1 셀 </td>   <td> 1x2 셀 </td>  </tr>  <tr>   <td> 2x1 셀 </td>   <td> 2x2 셀 </td>  </tr>  <tr>   <th> 3x1 셀 </th>   <td> 3x2 셀 </td>  </tr> </table>

 

테이블 기본 형식 예제 출력

 

 

2.  셀 병합과 요소 배치

 

태그 명	태그 역할			특이사항
<rowspan> 태그	"현재 셀의 위치"에서 n개의 행을 병합			<td>, <th> 태그 내에서만 사용할 수 있음
<colspan> 태그	"현재 셀의 위치"에서 n개의 열을 병합

 

 

셀 병합과 요소 배치 예제

<table border=1 width = 200px> <caption> 테이블 제목 테스트 </caption>  <tr>   <td colspan=2 > 1x1 ~ 1x2 셀 </td>  </tr>  <tr>   <td> 2x1 셀 </td>   <td rowspan = 2> 2x2 ~ 3x2 셀 </td>  </tr>  <tr>   <th> 3x1 셀 </th>  </tr> </table>

 

셀 병합과 요소 배치 예제 출력

 

 

 

3. 행 단위 콘텐츠의 그룹핑

테이블에서 행 단위 콘텐츠를

각각 머리, 몸, 발 부분으로 구분하여 그룹핑하는 태그

 

CSS와 연계하여 태그로 적용된 부분을 스타일링할 수 있다.

태그 명	태그 역할			특이사항
<thead> 태그	테이블의 레이아웃과는 상관 없으며, 각 태그로 스타일을 나눌 수 있음			thead -> tbody -> tfoot 태그 순서로 작성 해야함
<tbody> 태그
<tfoot> 태그

 

행 단위 콘텐츠의 그룹핑 예제

<thead>  <tr>   <th colspan=2> 테이블 제목 테스트 </th>  </tr> </thead> <tbody>  <tr>   <td colspan=2 > 1x1 ~ 1x2 셀 </td>  </tr> </tbody> <tfoot>  <tr>   <td> 2x1 셀 </td>   <td rowspan = 2> 2x2 ~ 3x2 셀 </td>  </tr>  <tr>   <th> 3x1 셀 </th>  </tr> </tfoot> </table>

 

앞에서 다루지는 않았지만,

<style> 태그안에 아래와 같이 적용 후 예제처럼 출력할 수 있다.

 

<Style> 태그 (CSS) 예제

<style>  thead { color : red; }  tbody { color : blue; }  tfoot  { color : green; } </style>

 

행 단위 콘텐츠의 그룹핑 예제

 

 

4.  열 단위 스타일 지정

<colgroup> 태그

 -> 하나 이상의 열들을 모아서 한꺼번에 스타일을 적용할 수 있다.

 

※ 태그 사용 위치

<table><caption><colgroup><thead><tr> ~ </table>

 

태그 명	태그 역할			특이사항
<colgroup> 태그	하나 이상의 열들을 모아서 한꺼번에 스타일을 지정			<caption> 뒤에 위치함
<col> 태그	지정한 열에 대해서 서로 다른 포맷팅을 정의			<colgroup> 태그 내에서만 사용 가능, 종료 태그 없음

 

열 단위 스타일 지정 예제

<table border=1 width = 200px> <colgroup>   <col class="sky">  <col class="tree">  <col class="sun"> </colgroup>  <tr>   <th> 제목 1</th>   <th> 제목 2</th>   <th> 제목 3</th>  </tr>  <tr>   <td> 1x1 셀</td>   <td> 1x2 셀</td>   <td> 1x3 셀</td>  </tr>  <tr>   <td> 2x1 셀 </td>   <td> 2x2 셀</td>  </tr>  <tr>   <td> 3x1 셀 </td>   <td> 3x2 셀 </td>  </tr> </table>

 

앞에서 다루지는 않았지만,

<style> 태그안에 아래와 같이 적용 후 예제처럼 출력할 수 있다.

 

<style> 태그 (CSS) 예제

<style>  .sky { background-color : blue; }  .sun { background-color : red; }  .tree { background-color : green; } </style>

 

열 단위 스타일 지정 예제