<table></table>

테이블태그

개념:

"테이플", "표"라고 불리우는 문서의 형식 중 하나로,

정보 전체를 한눈에 쉽게 볼 수 있도록 행과 열로 이루어진 문서입니다.

문법:

<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>

table : 표를 제작하기 위한 태그
border: 표선 두께
tr : 줄 (행)
td : 칸 (열)
cellpadding : 안 여백
cellspacing : 밖 여백
colspan : 가로칸을 병합할때 사용
rowspan : 세로칸을 병합할때 사용

활용 예제 1: colspan, rowspan, cellpadding, cellpacing

<table border="1" cellpadding="0" cellspacing="0">
<tr height="30" bgcolor="skyblue">
<td width="100">1</td>
<td colspan="2">2</td>
<td width="100">4</td>
</tr>

<tr height="50">
<td>1</td>
<td width=200>2</td>
<td width=400>3</td>
<td rowspan="2">4</td>
</tr>

<tr height="100">
<td colspan="3">1</td>
</tr>
</table>

활용 예제 2: align/valign, target, _self, _blank

<table border="1" cellpadding="0" cellspacing="0" width="200" height="120">
<tr>
<td>1</td>
<!-- 
table 태그에 적용시 align은 body 기준으로 정렬하게 됩니다.
align : left, center, right
 -->
<td align="center">2</td>
</tr>

<tr align="center">
<td>3</td>
<td>4</td>
</tr>
<!--  
valign(세로 정렬) : top, middle, bottom
 -->
<tr>
<td valign="top">5</td>
<td>
<!-- 
target : 페이지 이동시 출력하는 페이지 형태 설정
_self : 현재 페이지 이동
_blank : 신규 탭이 생성되면서 페이지 이동
 -->
<a href="http://naver.com" target="_blank">
<!-- img 태그에 가로,세로크기를 조절함 -->
<img src="./1234.jpg" width="100" height="40">
</a>
</td>
</tr>

</table>