javascript : 열 tr /행 td/ colspan

http://www.homejjang.com/03/colspan.php

<th>내용</th>: table head 약자로, 표의 제목을 쓰는 역할  (기본값은 굵은 글씨체에, 중앙 정렬)

<tr> 내용 </tr> : table row 약자로, 가로줄을 만드는 역할 (기본값은 보통 글씨체에, 왼쪽 정렬)

<td>내용 </td>:  table data 약자로, 셀을 만드는 역할 (기본값은 보통 글씨체에, 왼쪽 정렬)

열(TR)과 행(TD)의 확장

테이블은 기본적으로 각 열마다 동일한 행으로 이루어져야 합니다. <table border="1"> <tr>  <td>1*1 셀</td> </tr> <tr>  <td>2*1 셀</td>  <td>2*2 셀</td> </tr> </table> 위와 같이 첫번째 열(row)은 1개의 행(column)을 가지고, 두번째 열(row)은 2개의 행(column)을  가지게 만들면 아래처럼 제대로 모양을 갖추어 지지 않습니다. 1*1 셀 2*1 셀 2*2 셀 첫번째 열을 오른쪽으로 확장시켜 주어야 합니다. 이때 사용하는 속성이 colspan 입니다.  <table border="1"> <tr>  <td colspan="2">1*1 셀</td> </tr> <tr>  <td>2*1 셀</td>  <td>2*2 셀</td> </tr> </table> 위와 같이 colspan="2"로 지정하면 아래와 같이 의도한 대로 모양이 나옵니다. 1*1 셀 2*1 셀 2*2 셀 즉 첫번째 row의 column수가 1개이고, 두번째 row의 column 수가 2개이므로 이를 동일하게  맞추어 주기 위해서 첫번째 row의 셀에서 colspan 속성을 사용하였습니다. 열을 확장할때는 rowspan 이라는 속성을 사용합니다. <table border="1"> <tr>  <td rowspan="2">1*1 셀</td>  <td>1*2 셀</td> </tr> <tr>  <td>2*2 셀</td> </tr> </table> 1*1셀의 열(row)을 확장했으므로 2열(row)에서는 첫번째 셀이 필요없습니다. 1*1 셀 1*2 셀 2*2 셀 여기에서 중요한것은 확장을 하는 방향입니다. 왼쪽에서 오른쪽으로 column을 확장하는 경우 colspan, 위에서 아래로 row를 확장하는 경우는 rowspan 이렇게 기본적으로 기억하면서 colspan과 rowspan 속성을 자유자재로 다룰 수 있어야 합니다. 아주 빈번하게 사용되므로 시간표 같은것을 만들어 보면서 충분한 연습을 해주어야 합니다.