table 대신 div 사용하기

2010. 9. 23. 09:01Work

티스토리를 사용하다보니 table 태그대신 div 태그를 사용해야 할 상황에 처했다.
어쨌거나 table 을 div 로 간단히 만들어봤다. 자세한 div 태그에 대해서는 별도의 책이나 인터넷 검색을 이용하도록 하자.

1,1  1,2  1,3 
2,1  2,2  2,3 

위의 table 태그 html 은 다음과 같다.

<table border="1">
<tbody><tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</tbody></table>

아래는 div 태그를 사용한 표 작성법이다. 여기 내용에 구글 애드 센스나 기타 필요한 코드를 넣으면 된다.

<div style="float: left;"> 1,1 </div>
<div style="float: left;"> 1,2 </div>
<div style="float: left;"> 1,3 </div>
<div style="clear: both;"></div>

<div style="float: left;"> 2,1 </div>
<div style="float: left;"> 2,2 </div>
<div style="float: left;"> 2,3 </div>
<div style="clear: both;"></div>

위의 div 코드를 넣으면 아래와 같은 모양이 된다. 아주 간단하게 만든 코드이므로 필요에 따라 별도의 내용들을 추가해 넣도록 한다.


1,1
1,2
1,3
2,1
2,2
2,3