table 대신 div 사용하기
2010. 9. 23. 09:01ㆍWork
티스토리를 사용하다보니 table 태그대신 div 태그를 사용해야 할 상황에 처했다.
어쨌거나 table 을 div 로 간단히 만들어봤다. 자세한 div 태그에 대해서는 별도의 책이나 인터넷 검색을 이용하도록 하자.
위의 table 태그 html 은 다음과 같다.
아래는 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>
<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 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
'Work' 카테고리의 다른 글
저렴하게 명함을 만들어보자 (4) | 2011.01.24 |
---|---|
아이폰 앱 소개 iReadItNow 책을 읽자!!! (0) | 2010.10.12 |
헬라어 알파벳 익히기 (1) | 2010.09.08 |
종이로 만들어진 수족관과 에펠탑 (0) | 2010.09.04 |
히브리어 알파벳 익히기 - 동영상을 보며 노래를 부르며 (2) | 2010.08.10 |