[테이블/표]에 사용하는 태그 : 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 태그에 사용 |