<html>
<body>
<h1>table : 표</h1>
<table border="1" width="400" height="400" bordercolor="blue">
<tr>
<td>
table 태그 속성<br>
border : 테이블 테두리 두께, 기본 0<br>
width : 테이블 길이<br>
height : 테이블 높이<br>
bordercolor : 테이블 선 색상
</td>
<td>
tr : 테이블 줄<br>
td : 테이블 열
</td>
</tr>
<tr>
<td>
-
</td>
<td>
-
</td>
</tr>
</table>
<table border="1" width="400" height="400" bordercolor="blue" align="center" bgcolor="gray">
<tr>
<td>
table 태그에 align 속성으로 정렬(left,center,right)<br>
table 태그에 bgcolor 속성으로 배경색상<br>
table 태그에 background 속성으로 배경이미지
</td>
<td>
table 태그에 cellspacing 속성으로 셀과 셀사이 간격<br>
table 태그에 cellpadding 속성으로 셀안의 여백 설정<br>
</td>
</tr>
</table>
<table border="1" width="400" height="400">
<tr align="center" bgcolor="silver" valign="top">
<td>
tr 태그에 align 속성으로 줄내 글자 수평 정렬(left,center,right)<br>
tr 태그에 valign 속성으로 줄내 글자 수직 정렬(top,middle,bottom)<br>
tr 태그에 bgcolor 속성으로 배경색상<br>
tr 태그에 background 속성으로 배경이미지
</td>
<td>
-
</td>
</tr>
</table>
<table border="1" width="400" height="400">
<tr>
<td align="center" bgcolor="silver" valign="top">
td 태그에 align 속성으로 셀내 글자 수평 정렬(left,center,right)<br>
td 태그에 valign 속성으로 셀내 글자 수직 정렬(top,middle,bottom)<br>
td 태그에 bgcolor 속성으로 셀 배경색상<br>
td 태그에 background 속성으로 셀 배경이미지
</td>
<td rowspan="2" bgcolor="green">
td 태그에 rowspan 속성으로 셀의 줄을 합칠때...<br>
2번자리 들어갈곳과 합쳐짐.<br>
합칠때는 다음줄에 td하나 비워지게 계산해야함..
</td>
<td colspan="2" bgcolor="green">
td 태그에 colspan 속성으로 셀의 열을 합칠때<br>
</td>
</tr>
<tr>
<td>
1번자리
</td>
<td>
3번자리
</td>
<td>
4번자리
</td>
</tr>
</table>
<br>
해보기 . . . <br> 4*4 테이블 만든다음.
<table border="1">
<tr>
<td>
00---
</td>
<td>
01---
</td>
<td>
02---
</td>
<td>
03---
</td>
</tr>
<tr>
<td>
10---
</td>
<td>
11---
</td>
<td>
12---
</td>
<td>
13---
</td>
</tr>
<tr>
<td>
20---
</td>
<td>
21---
</td>
<td>
22---
</td>
<td>
23---
</td>
</tr>
<tr>
<td>
30---
</td>
<td>
31---
</td>
<td>
32---
</td>
<td>
33---
</td>
</tr>
</table>
<br>
<table border="1" bordercolor="green">
<tr>
<td>
00---
</td>
<td rowspan="2">
01---
</td>
<td>
02---
</td>
<td>
03---
</td>
</tr>
<tr>
<td>
10---
</td>
<td colspan="2" rowspan="2">
12---
</td>
</tr>
<tr>
<td colspan="2">
20---
</td>
</tr>
<tr>
<td>
30---
</td>
<td>
31---
</td>
<td>
32---
</td>
<td>
33---
</td>
</tr>
</table>
<br>
해보기는 해봤으니. 이젠.. 달 ..?<br>
<br>깨져보이는 저것은?
<table bordercolor="gold" border="1">
<tr align="center" valign="middle" height="50">
<td colspan="6">
<b>주 소 록</b>
</td>
</tr>
<tr align="center" valign="middle">
<td rowspan="2" width="100">
이 름
</td>
<td colspan="2">
전 화
</td>
<td rowspan="2" colspan="2">
주 소
</td>
<td rowspan="2" width="100">
나 이
</td>
</tr>
<tr align="center" valign="middle">
<td width="100">집전화</td>
<td width="100">핸드폰</td>
</tr>
<tr align="center" valign="middle">
<td>홍길동</td>
<td>OOOO</td>
<td>OOOO</td>
<td colspan="2" align="left">OOOO</td>
<td>나 이 없어</td>
</tr>
<tr align="center" valign="middle">
<td colspan="2" rowspan="2">
<img src="C:\WINDOWS\Web\bullet.gif"><br>
이미지
</td>
<td rowspan="2">
취미
</td>
<td width="100">
취미1
</td>
<td colspan="2" width="100">
스포츠
</td>
</tr>
<tr align="center" valign="middle">
<td>
취미2
</td>
<td colspan="2">
영화
</td>
</tr>
</table>
<br>
허걱... 원인은 알다시피 크기가 지정된것이 없어서... 깨져보임.<br>
table 태그에 width넣어두고 사용해야함<br>
맨오른쪽이 실제여분보다 커지면 오른쪽으로 늘어남<br>
colgroup 혹은 정녕 빈칸 한줄 넣는 방법도 있죠?<br>
<table bordercolor="gold" border="1" width="600px">
<colgroup>
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
</colgroup>
<tr align="center" valign="middle" height="50">
<td colspan="6">
<b>주 소 록</b>
</td>
</tr>
<tr align="center" valign="middle">
<td rowspan="2">
이 름
</td>
<td colspan="2">
전 화
</td>
<td rowspan="2" colspan="2">
주 소
</td>
<td rowspan="2">
나 이
</td>
</tr>
<tr align="center" valign="middle">
<td>집전화</td>
<td>핸드폰</td>
</tr>
<tr align="center" valign="middle">
<td>홍길동</td>
<td>OOOO</td>
<td>OOOO</td>
<td colspan="2" align="left">OOOO</td>
<td>나 이 없어</td>
</tr>
<tr align="center" valign="middle">
<td colspan="2" rowspan="2">
<img src="C:\WINDOWS\Web\bullet.gif"><br>
이미지
</td>
<td rowspan="2">
취미
</td>
<td>
취미1
</td>
<td colspan="2">
스포츠
</td>
</tr>
<tr align="center" valign="middle">
<td>
취미2
</td>
<td colspan="2">
영화
</td>
</table>
</body>
</html>
