[테이블] 틀만들기 - ⑤ 칸 안쪽여백 <cellpadding=숫자> 태그
▒요약
칸 안쪽여백 <cellpadding=숫자> 태그
테이블 안쪽 내용들이 너무 빡빡하게 붙어있으면 답답하죠. 보기도 힘들고.
내용일 길고 많을 수록 더욱 그러합니다.
이렇게 칸 안에 내용과 칸과의 여백을 만드는 속성 태그로
<cellpadding=숫자>
태그를 사용합니다.
<table> 태그에 끼워넣어 사용합니다.
숫자가 클수록 간격, 즉 여백이 커집니다.
이미지와 텍스트 (그림과 글자) 모두 적용되며
같은 테이블 모든 칸에 적용되는 속성태그입니다.
셈플소스를 보고 실습해보면 더 쉽게 이해 하실 수 있습니다.
■ 소스 ■
사랑해 소스 cellpadding=0
<html>
<body>
<table border=1 cellpadding=0 >
<tr> <td> <img src='http://www.hanshigan.co.kr/image/etc/heart.gif'> </td> <td> 사랑해 </td> </tr>
<tr> <td> 사랑해 </td> <td> 사랑해 </td> </tr>
</table>
</body>
</html>
사랑해 소스 cellpadding=10
<html>
<body>
<table border=1 cellpadding=10 >
<tr> <td> <img src='http://www.hanshigan.co.kr/image/etc/heart.gif'> </td> <td> 사랑해 </td> </tr>
<tr> <td> 사랑해 </td> <td> 사랑해 </td> </tr>
</table>
</body>
</html>
해용 소스 cellpadding=0
<html>
<body>
<table border=1 cellpadding=0 >
<tr> <td> <img src='http://www.hanshigan.co.kr/image/etc/hy_01.gif'> </td> <td> 해용(22세) </td> </tr>
<tr> <td> 태그공부중 </td> <td> 애인구함^^* </td> </tr>
</table>
</body>
</html>
해용 소스 cellpadding=20
<html>
<body>
<table border=1 cellpadding=20 >
<tr> <td> <img src='http://www.hanshigan.co.kr/image/etc/hy_02.gif'> </td> <td> 해용(22세) </td> </tr>
<tr> <td> 태그공부중 </td> <td> 애인구함^^* </td> </tr>
</table>
</body>
</html>
■ 결과보기 ■
사랑해 소스 cellpadding=0
| 사랑해 |
| 사랑해 | 사랑해 |
사랑해 소스 cellpadding=10
|
| 사랑해 |
| 사랑해 | 사랑해 |
해용 소스 cellpadding=0
| 해용(22세) |
| 태그공부중 | 애인구함^^* |
해용 소스 cellpadding=20
| 해용(22세) |
| 태그공부중 | 애인구함^^* |
[테이블] 틀만들기 - ⑥ 칸과 칸 사이 여백 <cellspacing=숫자> 태그
▒요약
칸과 칸 사이 여백 <cellspacing=숫자> 태그
테이블 안에 칸 내용들이 잘 정리되었으면 이제 칸과 칸 사이의 여백도 잘 정리해야겠죠?
잘 정리된 칸들 사이를 여백을 주어 조절하는 속성 태그로
<cellspacing=숫자>
태그를 사용합니다.
<table> 태그에 끼워넣어 사용합니다.
숫자가 클수록 간격, 즉 여백이 커집니다.
border=숫자 : 테이블의 바깥쪽! 테두리를 조절하는 태그이고
cellspacing=숫자 : 테이블 안쪽! 안쪽에 칸들 사이의 여백을 조절하는 태그죠.
여기에 'border=색깔' 태그와 'bgcolor=색깔' 태그를 적절히 함께 끼워넣으면
다양한 테이블 모양을 만들수 있습니다.
셈플소스를 보고 실습해보면 더 쉽게 이해 하실 수 있습니다.
■ 소스 ■
border=1 cellspacing=0
<html>
<body>
<table border=1 cellspacing=0>
<tr><td>5천만</td><td>프로젝트</td></tr>
<tr><td>컴으로</td><td>허자허자!</td></tr>
</table>
</body>
</html>
border=1 cellspacing=10
<table border=1 cellspacing=10>
<tr><td>5천만</td><td>프로젝트</td></tr>
<tr><td>컴으로</td><td>허자허자!</td></tr>
</table>
</body>
</html>
border=1 bordercolor=pink cellspacing=10
<table border=1 bordercolor=pink cellspacing=10>
<tr><td>5천만</td><td>프로젝트</td></tr>
<tr><td>컴으로</td><td>허자허자!</td></tr>
</table>
</body>
</html>
border=10 bordercolor=D6D6FF cellspacing=0
<table border=10 bordercolor=D6D6FF cellspacing=0 >
<tr><td>5천만</td><td>프로젝트</td></tr>
<tr><td>컴으로</td><td>허자허자!</td></tr>
</table>
</body>
</html>
border=1 bordercolor=D6D6FF cellspacing=10
<table border=1 bordercolor=D6D6FF cellspacing=10 >
<tr><td>5천만</td><td>프로젝트</td></tr>
<tr><td>컴으로</td><td>허자허자!</td></tr>
</table>
</body>
</html>
border=10 bordercolor=hotpink cellspacing=10
<table border=10 bordercolor=hotpink cellspacing=10 >
<tr><td>5천만</td><td>프로젝트</td></tr>
<tr><td>컴으로</td><td>허자허자!</td></tr>
</table>
</body>
</html>
border=10 bordercolor=hotpink cellspacing=10 bgcolor=pink
<table border=10 bordercolor=hotpink cellspacing=10 bgcolor=pink>
<tr><td>5천만</td><td>프로젝트</td></tr>
<tr><td>컴으로</td><td>허자허자!</td></tr>
</table>
</body>
</html>
■ 결과보기 ■
border=1 cellspacing=0
| 5천만 | 프로젝트 |
| 컴으로 | 허자허자! |
border=1 cellspacing=10
| 5천만 | 프로젝트 |
| 컴으로 | 허자허자! |
border=1 bordercolor=pink cellspacing=10
| 5천만 | 프로젝트 |
| 컴으로 | 허자허자! |
border=10 bordercolor=D6D6FF cellspacing=0
| 5천만 | 프로젝트 |
| 컴으로 | 허자허자! |
border=1 bordercolor=D6D6FF cellspacing=10
| 5천만 | 프로젝트 |
| 컴으로 | 허자허자! |
border=10 bordercolor=hotpink cellspacing=10
| 5천만 | 프로젝트 |
| 컴으로 | 허자허자! |
border=10 bordercolor=hotpink cellspacing=10 bgcolor=pink
| 5천만 | 프로젝트 |
| 컴으로 | 허자허자! |
[테이블] 틀만들기 - ⑦ 칸 나누기-가로 <colspan=숫자> 태그
▒요약
칸 나누기-가로 <colspan=숫자> 태그
테이블을 배우며 가장 중요한 부분입니다.
반드시 익혀놓아야 합니다.
테이블의 칸을 나누다 보면 '가로x세로' 형태의 기본모양으로 나눠집니다.
이 때 나눠진 칸은 상하좌우 똑같이 맞춰서 나눠지게되며
'n x m'이 됩니다.
하지만 html로 웹 페이지를 만들다보면, 칸 나누기가 'n x m'의 형태가아닌
정말 다양한 칸의 테이블을 만들게 됩니다.
즉, 첫째줄은 3칸. 두째줄은 1칸. 3째줄은 2칸. 인 테이블을 만들어야 할 때가있습니다.
예)
| 첫 | 째 | 줄 |
| 두 째 줄 | ||
| 세째 | 줄 | |
이렇게 'n x m'의 기본 형태가 아닌 다양한 칸나누기가 필요합니다.
이렇게 자유로운 칸나누기를 할 수 있는 태그를 몇회에 걸쳐 배워봅니다.
칸 나누기는 두가지 패턴이 있습니다.
①가로형, ②세로형 두가지 형태입니다.
규칙적으로 정렬된 칸의 기본 모양에서 가로로 칸을 합치는 것이 가로형이고
세로로 칸을 합치는것이 세로형입니다.
이 시간에는 '가로형'에 대해 공부합니다.
가로로 칸을 합칠 때 사용하는 태그로
<colspan=숫자>
태그를 사용합니다.
합쳐지는 칸의 <td> 태그에 끼워넣어 사용합니다.
아래와 같은 기본 테이블을
| ① | ② |
| ③ | ④ |
두째줄을 합쳐서
첫째줄은 2칸으로, 두째줄은 한칸으로 만들고자 할 때
이렇게 -_-;;
| ① | ② |
| ③ + ④ | |
③번칸 <td> 태그에 끼워넣으면 됩니다.
colspan=숫자 에서 숫자는 합쳐지는 칸의 숫자를 뜻합니다.
위에 예제는 숫자가 몇일까요?
그렇습니다 2입니다. 2칸을 합친다라는 명령입니다.
응용하실수 있겠죠?
3x3, 4x2, 2x6 등 등 다양한 테이블의 가로칸을 합할 수 있습니다.
몇 개의 예제와 소스를 올리지만 꼭 실습을 해보고 이해를 하셔야
자유롭게 칸을 만들 수 있습니다.
셈플소스를 보고 실습해보면 더 쉽게 이해 하실 수 있습니다.
■ 소스 ■
첫째줄 2칸. 두째줄 1칸
<html>
<body>
<table border=1 width=200 height=100 >
<tr><td align=center> ① </td> <td align=center> ② </td> </tr>
<tr><td align=center colspan=2> ③ + ④ </td> </tr>
</table>
</body>
</html>
| ① | ② |
| ③ + ④ | |
첫째줄 1칸. 두째줄 2칸
<html>
<body>
<table border=1 width=200 height=100 >
<tr><td align=center colspan=2> ① + ② </td> </tr>
<tr><td align=center> ③ </td> <td align=center> ④ </td> </tr>
</table>
</body>
</html>
| ① + ② | |
| ③ | ④ |
첫째줄 3칸. 두째줄 1칸. 세째줄 2칸
<html>
<body>
<table border=1 width=200 height=100 >
<tr><td>첫</td> <td>째</td> <td>줄</td> </tr>
<tr><td colspan=3> 두 째 줄 </td> </tr>
<tr><td colspan=2> 세째 </td> <td>줄</td> </tr>
</table>
</body>
</html>
| 첫 | 째 | 줄 |
| 두 째 줄 | ||
| 세째 | 줄 | |
첫째줄 1칸. 두째줄 2칸. 활용
<html>
<body>
<table border=2 width=300 height=200>
<tr><td colspan=2 height=100><img src='http://www.hanshigan.co.kr/image/etc/sample_logo.gif'></td> </tr>
<tr><td width=150 align=center>만화로 배우는 <br>쉽고, 재밌는</td> <td width=150 align=center>태그공부<br>포토샵공부</td> </tr>
</table>
</body>
</html>
 | |
| 만화로 배우는 쉽고, 재밌는 |
태그공부 포토샵공부 |
첫째줄 2칸. 두째줄 1칸. 활용1
<html>
<body>
<table border=2 width=400 height=300>
<tr>
<td width=150 align=center bgcolor=000000><font color=ffffff>
<b>모닥불</b></font></td>
<td width=150 align=center bgcolor=000000><font color=ffffff>박인희</font></td>
</tr>
<tr><td colspan=2 height=200><img src='http://www.hanshigan.co.kr/image/etc/sample_fire.gif'></td>
</tr>
</table>
</body>
</html>
| 모닥불 | 박인희 |
 | |
첫째줄 2칸. 두째줄 1칸. 활용2
<html>
<body>
<table border=2 width=400 height=300>
<tr>
<td width=150 align=center > <font size=6> <b>SLK-Class</b> </font> </td>
<td width=150 align=center > <font size=4> 2004 NEW benz </font> </td>
</tr>
<tr><td colspan=2 height=200><img src='http://www.hanshigan.co.kr/image/etc/sample_benz.gif'></td>
</tr>
</table>
</body>
</html>
| SLK-Class | 2004 NEW benz |
 | |
|
|