|
앞서 테이블의 기본 태그들을 살펴보았다. 이번에는 이를 응용한 예쁜 표와 그림 조각내어 맞추기, 중첩 테이블의 활용 등을 예제를 통하여 습득하게 될 것이다. |
1. 예제-1 (셀내 간격과 셀간의 간격이 기본값 또는 0일 경우)
|
[Source] |
|
<html>
<head>
<title>
셀내 간격과 셀간의 간격이 기본값 또는 0일 경우
</title>
</head>
<body>
<table border="1" width="500" height="100" cellpadding="1" cellspacing="2">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html> |
| [Result] |
|
▲ <Cellpadding>과 <Cellspacing>의 기본값은 각각 1, 2이다. 0일 경우는 아래와 같다.
▲ 비슷한것 같지만 다르다. 잘 살펴보면 약간 다른점이 보일 것이다. |
2. 예제-2 (테두리 얇게 만들기)
|
[Source] |
|
<html>
<head>
<title>
테두리 얇게 만들기
</title>
</head>
<body>
<table border="1" width="500" height="100" cellpadding="0" cellspacing="0" bordercolor="#FF6600">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html> |
| [Result] |
|
▲ <Border>를 1로 주어도 테두리는 얇아지지 않는다.
▲ <bordercolorlight="#ffffff">를 추가하면 똑같이 <Border>가 1이라 하더라도 얇은 선을 얻을 수 있다.
▲ <bordercolordark="#ffffff">를 사용하면 마치 끊어진 선처럼 보이게 된다. |
3. 예제-3 (큰 그림 조각내어 하나처럼 맞추기)
|
[Source] |
|
<html>
<head>
<title>
큰 그림 조각내어 하나처럼 맞추기
</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="1.jpg"></td>
<td><img src="2.jpg"></td>
</tr>
<tr>
<td><img src="3.jpg"></td>
<td><img src="4.jpg"></td>
</tr>
<tr>
<td><img src="5.jpg"></td>
<td><img src="6.jpg"></td>
</tr>
</table>
</body>
</html> |
| [Result] |
|
▲ 테이블 및 그림 크기는 별도로 지정하지 않아도 그림 크기에 맞춰 자동 맞춤된다. 마치 하나의 그림처럼 보이지만 실제로는 6개로 조각난 그림이다. 작게 조각내면 로딩 속도가 향상되겠죠? |
4. 예제-4 (중첩 테이블의 활용)
|
[Source] |
|
<html>
<head>
<title>
중첩 테이블의 활용
</title>
</head>
<body>
<table width="500" height="250" border="0" cellpadding="0" cellspacing="0" bordercolordark="#FFFFFF">
<tr>
<td height="55" colspan="2" align="center">
<img src="http://www.webmadang.net/main/logo.gif"></td>
</tr>
<tr>
<td width="265" height="200" align="center">
<table width="260" height="160" align="center" cellpadding="0" cellspacing="0" bordercolorlight="#FFFFFF" valign="middle">
<tr>
<td height="32" align="center">
<img src="http://www.webmadang.net/main/service_title.gif"></td>
</tr>
<tr>
<td width="259" align="center">
<table width="250" height="140" align="center" cellpadding="0" cellspacing="0" bordercolorlight="#FFFFFF" valign="middle">
<tr>
<td width="71" align="center">
<img src="http://www.webmadang.net/main/service_develop.gif"></td>
<td width="177">ASP, ASP.NET, PHP</td>
</tr>
<tr>
<td width="71" align="center">
<img src="http://www.webmadang.net/main/service_webdesign.gif"></td>
<td>포토샵, 일러스트</td>
</tr>
<tr>
<td width="71" align="center">
<img src="http://www.webmadang.net/main/service_script.gif"></td>
<td>자바스크립트, CSS</td>
</tr>
<tr>
<td width="71" align="center">
<img src="http://www.webmadang.net/main/service_database.gif"></td>
<td>데이타베이스</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="235" height="200">
<table width="200" height="160" align="center" cellpadding="0" cellspacing="0" bordercolorlight="#FFFFFF" valign="middle">
<tr>
<td height="42" align="left">
<img src="http://www.webmadang.net/main/flashgame.gif"></td>
</tr>
<tr>
<td width="214" align="center">
<table width="200" height="140" align="center" cellpadding="0" cellspacing="0" bordercolorlight="#FFFFFF" valign="middle">
<tr>
<td width="204">
<img src="http://www.webmadang.net/main/point.gif">마이크로 올림픽</td>
</tr>
<tr>
<td>
<img src="http://www.webmadang.net/main/point.gif">스트리트 파이터</td>
</tr>
<tr>
<td>
<img src="http://www.webmadang.net/main/point.gif">재미있는 볼 게임</td>
</tr>
<tr>
<td>
<img src="http://www.webmadang.net/main/point.gif">추억의 1945게임</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> |
| [Result] |
|
|
|
|
|
|
ASP, ASP.NET, PHP, JSP |
|
|
포토샵, 일러스트, 플래시 |
|
|
자바스크립트, CSS, HTML |
|
|
데이타베이스 | | |
|
|
 마이크로 올림픽 |
| 추억의 게임 스트리트 파이터 |
| 재미있는 볼 게임 |
| 추억의 1945게임 | | | |
▶ 중첩테이블은 좀 복잡하긴 하지만 그 활용도가 높아 실무에서도 많이 사용되므로 꼼꼼히 살펴볼 필요가 있겠다. 많은 도움이 되었는지 모르겠다. 혹, 머리가 아파온다면 커피 한잔 하면서 머리를 식히는 것도 좋지 않을까?...
작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이 | 
컴쟁이
