태그 - 테이블 태그

 

테이블은 열(rows, <tr>태그)을 나누고, 각 열은 데이터 셀(cells, <td>태그)로 나누어 셀에다 테이블 데이터를 표기하는 방법을 제공한다. 이 때 셀에는 텍스트, 링크, 이미지, 리스트, 폼(form)들이 포함될 수 있다.

 

테이블 태그를 사용하면 HTML 문서 안에 표를 만들어 문서를 일목 요연하게 정리할 수 있다. 테이블 태그를 사용할 때는 테이블을 선언한 후 열을 선언하고 그 열에 들어갈 셀을 선언하여 사용한다.

 

표는 일목요연하게 문서의 내용을 정리해 주기 때문에 많이 사용된다. 과거에는 테이블 태그를 사용하여 레이아웃을 만들기도 했으나, 현재는 테이블을 사용하여 레이아웃을 지정하는 것을 추천하지 않는다. 대신 레이아웃을 잡을 때는 <div>태그를 사용하는 것을 권장한다. 이유는 테이블 태그를 표을 제작할 때나 적합하지, 레이아웃에 사용하면 문서의 태그의 양이 많아 지기 때문이다.

 

테이블 태그는 테이블의 제목, 목록을 설명해주는 헤더, 내용으로 나눌 수 있으며, 각 부분은 순차적으로 작성해야 한다. 테이블 태그를 사용하는 기본 방법은 다음과 같다.

 

<table border="1">
 <caption>테이블의 제목</caption>
 <tr>
  <th>행의 제목1(이름)</th>
  <th>행의 제목2(나이)</th>
 </tr>
 <tr>
  <td>홍길동</td>
  <td>20세</td>
 </tr>
  <tr>
  <td>개똥이</td>
  <td>21세</td>
 </tr>
</table>

 

위 HTML의 결과는 아래와 같다.

 

<table>태그는 HTML에서 테이블을 사용한다는 선언일 뿐 직접적으로 셀을 생성하지 않는다. 셀을 생성할 때는 <tr>을 사용하여 열을 선언한 후 <td>태그를 사용해 셀을 생성해야 한다.

 

이렇게 구조화되어 있는 테이블 태그를 사용하면 테이블 태그를 구성하는 각 요소들을 이해하는 것이 중요하다. 이런 차이점은 스타일시트를 작성하여 테이블에 적용할 때 확연히 들어난다. <table>에 스타일로 테두리 값을 지정하면 테이블의 겉 테두리만 생기고 <tr>에 테두리 값을 지정하면 행에만 테두리가 생긴다.

 

 

<table>태그의 속성들

• align: 가로 정렬 방법
• width: 테이블의 가로 사이즈
• bgcolor: 테이블의 배경색
• cellpadding: 셀의 안쪽 여백
• cellspacing: 셀 사이의 여백

<table>에 지정한 속성은 테이블에만 적용되며 셀에는 적용되지 않는다.

 

 

<tr>태그의 속성

• align: 가로 정렬 방법
• valign: 세로 정렬 방법
• bgcolor: 배경색

<tr>태그에 속성을 지정하면 해당 열에만 적용된다.

 

 

<td>태그의 속성

• align: 가로 정렬 방법
• valign: 세로 정렬 방법
• width: 가로 사이즈
• height: 세로 사이즈
• bgcolor: 배경색
• colspan: 가로셀 병합수
• rowspan: 세로셀 병합수