DIV vs. TABLE > 기술자료 | 해피정닷컴

DIV vs. TABLE > 기술자료

본문 바로가기

사이트 내 전체검색

DIV vs. TABLE > 기술자료

HTML DIV vs. TABLE

페이지 정보


본문

1. valign은 어디에 있나요?
<td valign="top">  -->  <div style="padding-top: 5px;">


2. 레이아웃을 짜다보니 div 가 너무 많이 중첩되는데요?
보통 내용을 만들때 table을 만들고 그 안에 또 table 을 생성  -->
div 가 아닌 dl , dt 태그를 사용하여 구성


3. 모든 HTML에서 테이블을 사용하지 말자?
테이블을 사용하면 웹표준을 지킬수 없다는 것이 아닙니다.
레이아웃을 구성하려는 목적인 경우는 div 를 활용해서 사용하자는 것이지요,
표(Table)은 원래 취지에 맞도록 사용하는 습관을 키워야 겠습니다.


4. 두개의 레이아웃을 좌우로 배치할때 브라우저를 작게하면 내려가는 현상
아래 예제를 잘 습득하시면 원하는 모습을 자유롭게 만들수 있습니다.


<style type="text/css">
.s1 { background-color:#FF0000; text-align:center; }
.s2-1 { background-color:#999999; text-align:center; }
.s2-2 { background-color:#00FF00; text-align:center; }
.s2-3 { background-color:#0000FF; text-align:center; }
.s2-4 { background-color:#FFFF00; text-align:center; }
.s3 { background-color:#FF00FF; text-align:center; }
.s4 { background-color:#FF0000; text-align:center; }
.s5 { background-color:#660099; text-align:center; }
.s6 { background-color:#336666; text-align:center; }
</style>

예제 1>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2" bgcolor="#FF0000" align="center">1</td>
  </tr>
  <tr>
    <td width="100" bgcolor="#999999" align="center">2-1</td>
    <td width="100" bgcolor="#00FF00" align="center">2-2</td>
   </tr>
 </table>

<div class="s1" style="width:200px;">1</div>
<div class="s2-1" style="float:left; width:100px;">2-1</div>
<div class="s2-2" style="width:100px;">2-2</div>

예제 2>
<table border="0" cellspacing="0" cellpadding="0" width="200">
  <tr>
    <td colspan="4" bgcolor="#FF0000" align="center">1</td>
  </tr>
  <tr>
    <td width="50" bgcolor="#999999" align="center">2-1</td>
    <td width="50" bgcolor="#00FF00" align="center">2-2</td>
    <td width="50" bgcolor="#0000FF" align="center">2-3</td>
    <td width="50" bgcolor="#FFFF00" align="center">2-4</td>
  </tr>
</table>

<div class="s1" style="width:200px;">1</div>
<div class="s2-1" style="float:left; width:50px;">2-1</div>
<div class="s2-2" style="float:left; width:50px;">2-2</div>
<div class="s2-3" style="float:left; width:50px;">2-3</div>
<div class="s2-4" style="float:left; width:50px;">2-4</div>

예제 3>
<table border="0" cellspacing="0" cellpadding="0" width="200">
  <tr>
    <td colspan="4" bgcolor="#FF0000" align="center">1</td>
  </tr>
  <tr>
    <td width="50" bgcolor="#999999" align="center">2-1</td>
    <td width="50" bgcolor="#00FF00" align="center">2-2</td>
    <td width="50" bgcolor="#0000FF" align="center">2-3</td>
    <td width="50" bgcolor="#FFFF00" align="center">2-4</td>
  </tr>
  <tr>
    <td colspan="4" bgcolor="#FF00FF" align="center">3</td>
  </tr>
  <tr>
    <td colspan="4" bgcolor="#FF0000" align="center">4</td>
  </tr>
  <tr>
    <td colspan="4" bgcolor="#660099" align="center">5</td>
  </tr>
  <tr>
    <td colspan="4" bgcolor="#336666" align="center">6</td>
  </tr>
</table>

<div class="s1" style="width:200px;">1</div>
<div class="s2-1" style="float:left; width:50px;">2-1</div>
<div class="s2-2" style="float:left; width:50px;">2-2</div>
<div class="s2-3" style="float:left; width:50px;">2-3</div>
<div class="s2-4" style="float:left; width:50px;">2-4</div>
<div class="s3" style="clear:both; width:200px;">3</div>
<div class="s4" style="width:200px;">4</div>
<div class="s5" style="width:200px;">5</div>
<div class="s6" style=" width:200px;">6</div>


참고사이트
http://ilmol.com/wp/2005/06/09/25/
http://blog.naver.com/PostView.nhn?blogId=multist&logNo=10034299676

댓글목록

등록된 댓글이 없습니다.


Total 2,634건 93 페이지
  • RSS
기술자료 목록
794
MSSQL   15342  2009-09-24 20:03  
793
메이크샵   11390  2009-09-24 10:55  
792
Search   12426  2009-09-22 19:23  
791
일반   16738  2009-09-21 15:50  
790
ClassicASP   28282  2009-09-18 03:00 ~ 2016-03-21 00:00  
열람
HTML   14963  2009-09-16 23:32 ~ 2009-09-17 00:00  
788
HTML   11434  2009-09-11 07:26  
787
PHP   23381  2009-09-09 22:42  
786
MySQL   18757  2009-09-08 20:22  
785
MySQL   43454  2009-09-08 20:21  
784
ClassicASP   13888  2009-09-07 12:51 ~ 2016-02-11 00:00  
783
전자결제   19569  2009-09-02 18:25 ~ 2015-03-27 00:00  
782
Search   14426  2009-09-02 11:46 ~ 2009-09-21 00:00  
781
JavaScript   13127  2009-09-02 10:21  
780
WindowsServer   21805  2009-09-01 20:45 ~ 2018-12-21 15:19  
779
호스팅   29433  2009-08-31 21:03  
778
WindowsServer   26515  2009-08-27 22:42  
777
PHP   15025  2009-08-25 20:51  
776
일반   16012  2009-08-27 22:49  
775
PHP   15353  2009-08-25 20:50  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.