테이블(table), <table> 태그, 테이블을 만드는 순서, 1행, 1열의 테이블(1*1 테이블), 1행에 2개의 칸(열)을 가진 테이블(1*2 테이블)

 

테이블(table)

·       HTML 문서에서 가장 많이 사용되는 태그입니다.

·       표 형식을 만드는 태그입니다.

·       <table>, <tr>, <td> 이 3가지는 가장 기본적인 태그입니다.

·       예전에는 웹사이트의 전체적인 레이아웃을 표 형식의 레이아웃으로 만드는데 사용하였으나 현재는 사용빈도가 많이 줄어들었습니다. (유지보수 비용와 테이블 태그의 한계)

 

 

<table> 태그

태그	설명
<table> </table>	·       표의 시작과 끝을 나타내는 태그
<tr></tr>	·       table row의 약자 ·       표의 한 행을 만들어 주는 태그 ·       단독으로 사용되기 때문에, table나 td에서 사용되는 속성들을 부여하실 수 없습니다
<td></td>	·       table data의 약자 ·       표의 한 칸을 만들어 주는 태그(각 행에 셀을 정의) ·       즉 행에서 칸(열)을 나누는 기능 ·       table에서 사용되는 속성들은 모두 td에서도 사용하실 수 있습니다
<th></th>	·       각 열의 제목을 나타냅니다. ·       모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다.

 

 

 

 

테이블을 만드는 순서

단계	설명
1	테이블(table) 영역을 정의하고,
2	행(tr)을 지정한 다음,
3	그 행을 나누어서 셀(td)을 만듭니다.

 

 

 

 

1행, 1열의 테이블(1*1 테이블)

테이블의 경계선(border)을 지정해주어야 테이블의 모양을 볼 수 있습니다.

<table border="1"> <tr> <td>1*1 셀</td> </tr> </table>

 

 

 

1행에 2개의 칸(열)을 가진 테이블(1*2 테이블)

<table border="1"> <tr> <td>1*1 셀</td> <td>1*2 셀</td> </tr> </table>

 

 

 

행(row)을 확장한 2행 2열을 가진 테이블(2*2 테이블)

<table border="1"> <tr> <td>1*1 셀</td> <td>1*2 셀</td> </tr> <tr> <td>2*1 셀</td> <td>2*2 셀</td> </tr> </table>