[테이블/표]에 사용하는 태그 : table, tr, td

테이블/표에 사용하는 태그 

<table>...</table>

<tr> ... </tr>

<td> ... </td>

<table>태그 그룹은 표를 만들 때 사용한다. <table>태그는 단독으로 사용할 수 없고 <tr>과 <td>태그가 함께 사용한다. 하나의 <table></table>태그 사이에는 반드시 하나 이상의 <tr></tr>태그가 들어가야하며 <tr>태그 안에는 다시 <td></td>태그가 들어가야 한다. 

<tr></tr>은 행을 추가할 때 사용한다. 5행짜리 테이블을 만들기 위해서는 <table></table> 사이에<tr></tr>이 5개 있어야 한다.

<td>는 한 행을 몇개의 칸(열)으로 나눌지 결정한다.  열이 5개인 표를 만들고 싶으면 <tr></tr>안에 <td></td>가 5개 있어야 한다.

위의 예제처럼 2행, 2열, 총 4칸짜리 테이블을 만들기 위해서는 행을 그려주는 <tr>이 2번, 칸을 그려주는 <td>가 <tr>안에 각각 2번씩 4번 나와야 한다. 

테이블은 가로 2칸을 병합하거나 세로 2칸을 병합하는 등 좀 더 복잡한 구조를 가질 수 있다. 

테이블의 속성인 rowsapn과 colspan은  <td>태그에 사용하는 속성으로 행과 열을 병합할 때 쓴다. 행과 열을 병합할 때는 표의 정확한 구조를 파악하지 않으면 표가 제대로 그려지지 않을 수 있으니 주의해야 한다.

◈ <a href="URL"> </a> 태그 문법◈

<table border="1">

   <tr>

       <td>1행 1열</td>

       <td>1행 2열</td>

       <td>1행 3열</td>

   </tr>

   <tr>

       <td>2행 1열</td>

       <td>2행 2열</td>

       <td>2행 3열</td>

   </tr>

</table>

<p><br /></p>

<p>□ 변형 테이블 </p>

<table border="1">

   <tr>

       <td rowspan="2">2행 병합</td>

       <td>1행 2열</td>

   </tr>

   <tr>

       <td>2행 2열</td>

   </tr>

   <tr>

       <td colspan="2">1열 병합</td>

   </tr>

</table>

<p><br /></p>

<p>□ colspan, rowspan을 잘못 사용할 경우 </p>

<p>colspan, rowspan을 잘못 사용하면 행과 열의 위치가 제대로 배열되지 않고, 칸이 없는 영역이 생길 수도 있다. </p>

  

<table border="1">

   <tr>

       <td rowspan="2">2행 병합</td>

       <td>1행 2열</td>

       <td>1행 3열</td>

   </tr>

   <tr>

       <td>2행 1열</td>

  <td>2행 2열</td>

       <td>2행 3열</td>

   </tr>

   <tr>

       <td colspan="2">1열 병합</td>

       <td>3행 2열</td>

  <td>3행 3열</td>

   </tr>

</table>

table_tag_sample.html

□ 사용 가능한 속성

속성	값	설명
boder	숫자	표에 테두리를 그려준다. 0은 테두리 없는 표가 그려지고, 1부터 테두리 두께가 정해진다.
rowspan	숫자	세로 행을 숫자만큼 병합. td 태그에 사용
colspan	숫자	가로 열을 숫자만큼 병합. td 태그에 사용