div 공부중입니다. html 을 div로 변환하는거 도와주세요!!

div 공부중입니다. html 을 div로 변환하는거 도와주세요!! 정보

div 공부중입니다. html 을 div로 변환하는거 도와주세요!!

본문

div 공부하는데요..
아래의 html을 div 로 바꾸려면 어떻게 해야 할까요.?
나름 해봤지만 테이블이 복잡해질수록 너무 머리만 아파옵니다 ㅠ.ㅠ;;;
고수님들 좀 바꿔주세요..
그래서 저의 짧은 지식을 넓혀주시길 바랍니다.^^

<TABLE cellSpacing=0 cellPadding=0 border=0 width="800" align="center">
    <tr>
        <td width="200" rowspan="2" valign="top">
            1
        </td>
        <td width="600" colspan="2" valign="top">2</td>
    </tr>
    <tr>
        <td width="300" valign="top">3</td>
        <td width="300" height="36" rowspan="2" valign="top">4</td>
    </tr>
    <tr>
        <td height="6" colspan="2" width="500" valign="top">5</td>
    </tr>
</table>

복사
공유하기

댓글 전체

tese 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

09.12.06 19:56:49

공부하시는데 도움이 될 곳을 링크합니다.

http://html.nhndesign.com/ 에 웹표준화 방안을 제시하고 있는데요.

레이아웃관련은 이글을 보세요.
http://html.nhndesign.com/guidelines/pattern/naver/layout/3Fixed1.html

많은 도움이 되시길 바랍니다.

일인자 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

09.12.06 21:32:33

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>제목</title>
<style type="text/css">

#wrap {width:800px; margin:0 auto;}
#content { width:100%; }
.a { width:200px; height:36px; float:left; background:red; }
.b { width:600px; float:right; background:blue; }
.c { width:300px; float:left; background:yellow;}
.d { width:300px; height:36px; float:right; background:green; }
.e { width:500px; float:left; float:right; background:pink;}

</style>
</head>
<body>
<div id="wrap">

<div id="content">

<div class="a">
1
</div>
<div class="b">
2
</div>
<div class="c">
3
</div>
<div class="d">
4
</div>
<div class="e">
5
</div>

</div>

</div>
</body>
</html>

일인자 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

09.12.06 21:45:21

style을 그냥div 에 값을줘서 하면은,,,

<div style="width:800px;" >

<div style="width:200px; height:36px; float:left; background:red;">
a
</div>

<div style="width:600px; float:right; background:blue;">
b
</div>

<div style="width:300px; float:left; background:yellow;">
c
</div>

<div style="width:300px; height:36px; float:right; background:green;">
d
</div>

<div style="width:500px; float:left; float:right; background:pink;">
e
</div>

</div>

가운데정렬은 잘 모르겠네여 ㅠㅠ margin:0 auto; 를 써봐도 안되고,,