Thursday, May 18, 2006
HTML-CSS : 표/테이블 table 태그의 기초
각종 표를 만드는 테이블 <table> 태그의 사용법은 좀 복잡하기 때문에, 여기서는 우선 가장 기초적인 것을 설명합니다.
테이블 table 태그로 엑셀처럼 전문적인 도표를 그릴 수도 있지만, 간단한 사각형 하나를 그릴 때 쓰기도 합니다. 사각형은 div 태그로 구현하는 것이 간편하긴 한데 div 태그는 IE와 파이어폭스에서 크기 차이가 나는 경우가 많아서, table 태그로 사각형을 그리는 것이 무난하더군요.
가장 단순한 표는 이것입니다:
칸(cell)이 하나뿐인 가장 간단한 표입니다. (border="1" 속성을 주지 않으면 테두리가 보이지 않기에 표인지 아닌지 알 수 없게 됩니다.)
<tr> 태그는 <td> 태그가 횡으로 나란히 놓이는, 가로 공간을 정의합니다. 위의 경우에는 <tr> 태그가 하나밖에 없기 때문에 표가 1줄이라는 사실을 알 수 있습니다.
<td> 태그는 칸(cell)을 만듭니다. 사실상 <td> 태그가, 표의 알맹이라고 할 수 있습니다.
위의 태그들은 모두 <table> 안에 들어 있어야 합니다.
<tr> 태그가 2개로 늘어났기에, 표도 이제 2줄이 되었습니다.
<td> 바로 뒤에 <td> 태그를 또 추가하면 칸이 더 생깁니다.
각 <tr> 들에 속한 <td> 태그의 개수는 동일해야 합니다. <td></td> 이렇게 비어 있는 태그라도 있어야 합니다.
또는 아래와 같은 방법으로 칸의 개수를 조정할 수 있습니다:
rowspan 속성을 사용해, 밑에 있어야 할 칸과 하나로 합칠 수 있습니다.
colspan 속성을 사용해, 옆에 있어야 할 칸과 하나로 합칠 수 있습니다.
colspan 과 rowspan 속성은 2 이상의 값을 가져야 합니다. 또한 이 속성을 CSS로 조정할 수 없습니다. 이것은 표의 '스타일'이 아니라, 표의 '내용'의 일부이기 때문입니다. (colspan 과 rowspan 속성은 XHTML 규약에도 위배되지 않습니다.)
▶▶ 블로거(blogger.com)에서, 테이블(table) 태그 위쪽 여백의 문제 해결
▶▶ HTML-CSS] 수직선 태그, 세로 줄 긋기, 다단 편집; Vertical Line Tag
테이블 table 태그로 엑셀처럼 전문적인 도표를 그릴 수도 있지만, 간단한 사각형 하나를 그릴 때 쓰기도 합니다. 사각형은 div 태그로 구현하는 것이 간편하긴 한데 div 태그는 IE와 파이어폭스에서 크기 차이가 나는 경우가 많아서, table 태그로 사각형을 그리는 것이 무난하더군요.
가장 단순한 표는 이것입니다:
<table border="1">
<tr>
<td>td 는 표의 내용</td>
</tr>
</table>
<tr>
<td>td 는 표의 내용</td>
</tr>
</table>
| td 는 표의 내용 |
칸(cell)이 하나뿐인 가장 간단한 표입니다. (border="1" 속성을 주지 않으면 테두리가 보이지 않기에 표인지 아닌지 알 수 없게 됩니다.)
<tr> 태그는 <td> 태그가 횡으로 나란히 놓이는, 가로 공간을 정의합니다. 위의 경우에는 <tr> 태그가 하나밖에 없기 때문에 표가 1줄이라는 사실을 알 수 있습니다.
<td> 태그는 칸(cell)을 만듭니다. 사실상 <td> 태그가, 표의 알맹이라고 할 수 있습니다.
위의 태그들은 모두 <table> 안에 들어 있어야 합니다.
칸(셀)들을 2행으로
<table border="1">
<tr>
<td>td 는 표의 내용</td>
</tr>
<tr>
<td>td 는 표의 내용</td>
</tr>
</table>
<tr>
<td>td 는 표의 내용</td>
</tr>
<tr>
<td>td 는 표의 내용</td>
</tr>
</table>
| td 는 표의 내용 |
| td 는 표의 내용 |
<tr> 태그가 2개로 늘어났기에, 표도 이제 2줄이 되었습니다.
칸(셀)을 4개로
<table border="1">
<tr>
<td>td 는 표의 내용</td><td>td 는 표의 내용</td>
</tr>
<tr>
<td>td 는 표의 내용</td><td>td 는 표의 내용</td>
</tr>
</table>
<tr>
<td>td 는 표의 내용</td><td>td 는 표의 내용</td>
</tr>
<tr>
<td>td 는 표의 내용</td><td>td 는 표의 내용</td>
</tr>
</table>
| td 는 표의 내용 | td 는 표의 내용 |
| td 는 표의 내용 | td 는 표의 내용 |
<td> 바로 뒤에 <td> 태그를 또 추가하면 칸이 더 생깁니다.
틀린 경우
<table border="1">
<tr>
<td>td 는 표의 내용</td><td>td 는 표의 내용</td>
</tr>
<tr>
<td>td 는 표의 내용</td>
</tr>
</table>
<tr>
<td>td 는 표의 내용</td><td>td 는 표의 내용</td>
</tr>
<tr>
<td>td 는 표의 내용</td>
</tr>
</table>
| td 는 표의 내용 | td 는 표의 내용 |
| td 는 표의 내용 |
각 <tr> 들에 속한 <td> 태그의 개수는 동일해야 합니다. <td></td> 이렇게 비어 있는 태그라도 있어야 합니다.
또는 아래와 같은 방법으로 칸의 개수를 조정할 수 있습니다:
rowspan 속성으로, 아래쪽 칸과 하나로 합치기
<table border="1">
<tr>
<td rowspan="2">1행 1번째 내용</td><td>1행 2번째 내용</td>
</tr>
<tr>
<td>2행 1번째 내용</td>
</tr>
</table>
<tr>
<td rowspan="2">1행 1번째 내용</td><td>1행 2번째 내용</td>
</tr>
<tr>
<td>2행 1번째 내용</td>
</tr>
</table>
| 1행 1번째 내용 | 1행 2번째 내용 |
| 2행 1번째 내용 |
rowspan 속성을 사용해, 밑에 있어야 할 칸과 하나로 합칠 수 있습니다.
colspan 속성으로, 옆 칸과 하나로 합치기
<table border="1">
<tr>
<td colspan="2">1행 1번째 내용</td>
</tr>
<tr>
<td>2행 1번째 내용</td><td>2행 2번째 내용</td>
</tr>
</table>
<tr>
<td colspan="2">1행 1번째 내용</td>
</tr>
<tr>
<td>2행 1번째 내용</td><td>2행 2번째 내용</td>
</tr>
</table>
| 1행 1번째 내용 | |
| 2행 1번째 내용 | 2행 2번째 내용 |
colspan 속성을 사용해, 옆에 있어야 할 칸과 하나로 합칠 수 있습니다.
colspan 과 rowspan 속성은 2 이상의 값을 가져야 합니다. 또한 이 속성을 CSS로 조정할 수 없습니다. 이것은 표의 '스타일'이 아니라, 표의 '내용'의 일부이기 때문입니다. (colspan 과 rowspan 속성은 XHTML 규약에도 위배되지 않습니다.)
▶▶ 블로거(blogger.com)에서, 테이블(table) 태그 위쪽 여백의 문제 해결
▶▶ HTML-CSS] 수직선 태그, 세로 줄 긋기, 다단 편집; Vertical Line Tag
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home