묻고답하기
테이블 문의 드려요
2009.11.30 22:41
http://w60501.cafe24.com/kims/index.html
제가 만들어본 메인 페이지 입니다.
헌데 정열이 중앙 정열이 안된것 같더라구요.
테이블을 잘못짠건지 센터정열이 힘듭니다.
좌측정열에서 중앙 정열료 다시 테이블을 맞추려면?
댓글 3
-
DuRi
2009.12.01 00:27
-
Style:D
2009.12.01 00:59
홈페이지 디자인 이쁘네요^^ 좋은 홈페이지가 만들어졌으면 하는 바램에서 답글남깁니다.
수정하려고 살펴봤는데...꽤 많이 복잡하더군요;; 내가짠게아니라그런가 ㅋ;;
테이블을 정리하면서 다시 한번 코딩하는게 빠를듯 싶습니다... 해서 아래 올려드려요^^;
아마 원본과 많이틀리진않을거라는 개인적인생각;?
아래는 테이블코딩만 있으므로 원본에 플래시삽입 스크립트는 따로 넣으셔야합니다^^
<html>
<body>
<!-- 아래 테이블코딩은 홈페이지의 가로를 임의로 870으로 맞추었습니다. 혹시 맞지않으시면 직접 숫자를 바꾸시면됩니다.
또 테이블을 알아보기 쉽도록 bgcolor값을 넣어놨으니 사용하실때는 주석과 함께 지워주시면 됩니다^^ -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#999999" align="center">
<table width="870" height="85" cellpadding="0" cellspacing="0" bgcolor="#99CC00">
<tr>
<td width="100" bgcolor="#66FFFF">
<!--좌측공백-->
</td>
<td width="670">
<!--상단 타이틀 플래시가 들어가는 공간입니다-->
<div>TopTitle</div>
</td>
<td width="100" bgcolor="#66FFFF">
<!--우측공백-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#CCCCCC" align="center">
<table width="870" height="87" cellpadding="0" cellspacing="0" bgcolor="#006666">
<tr>
<td width="100" bgcolor="#66CCFF">
<!--좌측공백-->
</td>
<td width="670">
<!--상단 메뉴 플래시가 들어가는 공간입니다-->
<div>TopMenu</div>
</td>
<td width="100" bgcolor="#66CCFF">
<!--우측공백: 일단 100px로 우측공백을 놔두긴 했습니다만 만약 필요없으시면
두개의 우측공백을 줄여주시던지 td를 지워주시고 없어진 픽셀만큼 좌측공백이나
메뉴플래시공간에 매꿔주시면됩니다. (table이 870px이므로 width 합쳐서 870이면됨)-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#CCFFCC" align="center">
<table width="870" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="149" height="103">
<!--좌측 네비게이션 1-->
<div>LeftNavigation1</div>
</td>
<td width="286" rowspan="3" bgcolor="#CCCC66">
<!--중앙 네비게이션-->
<div>CenterNavigation</div>
</td>
<td width="435" rowspan="3" bgcolor="#CCCC99">
<!--우측 네비게이션 : 우측은 870px의 딱 절반만큼의 크기를 주었습니다.
그리고 좌측네비게이션을 질문자님께서 설정하신 가로크기로 맞추고 나머지로
센터를 설정했으니 알아서 변경하시면 됩니다^^
아시다시피 어느쪽을변경하든 가로 총 합이 테이블width인 870px에만 맞으면됩니다.-->
<div>RightNavigation</div>
</td>
</tr>
<tr>
<td width="149" height="103" bgcolor="#CCCCCC">
<!--좌측 네비게이션 2-->
<div>LeftNavigation2</div>
</td>
</tr>
<tr>
<td width="149" height="207" bgcolor="#999999">
<!--좌측 네비게이션 3-->
<div>LeftNavigation3</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#CCFFFF" align="center">
<table width="870" height="80" cellpadding="0" cellspacing="0" background="images/bgf00000.jpg" bgcolor="#FFCCFF">
<tr valign="top">
<td align="center">
<!--아래 배경 : 굳이 왼쪽을 500만큼 띄워놓기위함이 아니면, 혹은 그렇다고할지라도 td를 두개만들어
구분지어놓지 않아도 됩니다; 일단은 도시를 가운데로 오게하시려고하는것같아 이같이해놓습니다;;
배경은 지금 이 테이블의 background에 해놓았습니다.-->
<img src="images/f1000000.gif" width="320" height="59" />
<div>BottomImage</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
도움이 되셨길 바래요~ -
w60501
2009.12.01 03:00
와우 감사 드립니다 ^^
테이블을 div 태그로 감싸주면 됩니다.
<div align="center">테이블</div>