[스크랩] 틀만들기 - 칸 나누기-가로 (colspan=숫자) 태그

<div class="bbs_content"> <!-- 틀만들기 - ⑦ 칸 나누기-가로 <colspan=숫자> 태그 --> <img src="http://www.hanshigan.co.kr/image/contents/hj_52_01.gif"> <br><br><br> <img src="http://www.hanshigan.co.kr/image/contents/hj_52_02.gif"> <br> <br> <br>▒요약 <br> <br><b>칸 나누기-가로 &lt;colspan=숫자&gt; 태그</b> <br> <br>테이블을 배우며 가장 중요한 부분입니다. <br>반드시 익혀놓아야 합니다. <br> <br>테이블의 칸을 나누다 보면 '가로x세로' 형태의 기본모양으로 나눠집니다. <br>이 때 나눠진 칸은 상하좌우 똑같이 맞춰서 나눠지게되며 <br>'n x m'이 됩니다. <br> <br>하지만 html로 웹 페이지를 만들다보면, 칸 나누기가 'n x m'의 형태가아닌 <br>정말 다양한 칸의 테이블을 만들게 됩니다. <br>즉, 첫째줄은 3칸. 두째줄은 1칸. 3째줄은 2칸. 인 테이블을 만들어야 할 때가있습니다. <br>예) <table border=1 width=200 height=100 > <tr><td>첫</td> <td>째</td> <td>줄</td> </tr> <tr><td colspan=3> 두 째 줄 </td> </tr> <tr><td colspan=2> 세째 </td> <td>줄</td> </tr> </table> <br> <br>이렇게 'n x m'의 기본 형태가 아닌 다양한 칸나누기가 필요합니다. <br>이렇게 자유로운 칸나누기를 할 수 있는 태그를 몇회에 걸쳐 배워봅니다. <br> <br> <br>칸 나누기는 두가지 패턴이 있습니다. <br>①가로형, ②세로형 두가지 형태입니다. <br>규칙적으로 정렬된 칸의 기본 모양에서 가로로 칸을 합치는 것이 가로형이고 <br>세로로 칸을 합치는것이 세로형입니다. <br> <br>이 시간에는 '가로형'에 대해 공부합니다. <br> <br>가로로 칸을 합칠 때 사용하는 태그로 <br> <br>&lt;colspan=숫자&gt; <br> <br>태그를 사용합니다. <br>합쳐지는 칸의 &lt;td&gt; 태그에 끼워넣어 사용합니다. <br>아래와 같은 기본 테이블을 <table border=1 width=200 height=100 > <tr><td align=center> ① </td> <td align=center> ② </td> </tr> <tr><td align=center> ③ </td> <td align=center> ④ </td> </tr> </table> <br> <br>두째줄을 합쳐서 <br>첫째줄은 2칸으로, 두째줄은 한칸으로 만들고자 할 때 <br>이렇게 -_-;; <table border=1 width=200 height=100 > <tr><td align=center> ① </td> <td align=center> ② </td> </tr> <tr><td align=center colspan=2> ③ + ④ </td> </tr> </table> <br> <br>③번칸 &lt;td&gt; 태그에 끼워넣으면 됩니다. <br> <br>colspan=숫자 에서 숫자는 합쳐지는 칸의 숫자를 뜻합니다. <br>위에 예제는 숫자가 몇일까요? <br>그렇습니다 2입니다. 2칸을 합친다라는 명령입니다. <br> <br>응용하실수 있겠죠? <br>3x3, 4x2, 2x6 등 등 다양한 테이블의 가로칸을 합할 수 있습니다. <br>몇 개의 예제와 소스를 올리지만 꼭 실습을 해보고 이해를 하셔야 <br>자유롭게 칸을 만들 수 있습니다. <br> <br>셈플소스를 보고 실습해보면 더 쉽게 이해 하실 수 있습니다. <br> <br> <br> <br> <br> <br> <br>■ 소스 ■ <br> <br> <br><b> 첫째줄 2칸. 두째줄 1칸 </b> <br> <br>&lt;html&gt; <br>&lt;body&gt; <br> <br>&lt;table border=1 width=200 height=100 &gt; <br> &lt;tr&gt;&lt;td align=center&gt; ① &lt;/td&gt; &lt;td align=center&gt; ② &lt;/td&gt; &lt;/tr&gt; <br> &lt;tr&gt;&lt;td align=center colspan=2&gt; ③ + ④ &lt;/td&gt; &lt;/tr&gt; <br>&lt;/table&gt; <br> <br>&lt;/body&gt; <br>&lt;/html&gt; <br> <br> <table border=1 width=200 height=100 > <tr><td align=center> ① </td> <td align=center> ② </td> </tr> <tr><td align=center colspan=2> ③ + ④ </td> </tr> </table> <br> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5"/> <br> <br><b> 첫째줄 1칸. 두째줄 2칸 </b> <br> <br>&lt;html&gt; <br>&lt;body&gt; <br> <br>&lt;table border=1 width=200 height=100 &gt; <br> &lt;tr&gt;&lt;td align=center colspan=2&gt; ① + ② &lt;/td&gt; &lt;/tr&gt; <br> &lt;tr&gt;&lt;td align=center&gt; ③ &lt;/td&gt; &lt;td align=center&gt; ④ &lt;/td&gt; &lt;/tr&gt; <br>&lt;/table&gt; <br> <br>&lt;/body&gt; <br>&lt;/html&gt; <br> <br> <table border=1 width=200 height=100 > <tr><td align=center colspan=2> ① + ② </td> </tr> <tr><td align=center> ③ </td> <td align=center> ④ </td> </tr> </table> <br> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5"/> <br> <br><b> 첫째줄 3칸. 두째줄 1칸. 세째줄 2칸 </b> <br> <br>&lt;html&gt; <br>&lt;body&gt; <br> <br>&lt;table border=1 width=200 height=100 &gt; <br> &lt;tr&gt;&lt;td&gt;첫&lt;/td&gt; &lt;td&gt;째&lt;/td&gt; &lt;td&gt;줄&lt;/td&gt; &lt;/tr&gt; <br> &lt;tr&gt;&lt;td colspan=3&gt; 두 째 줄 &lt;/td&gt; &lt;/tr&gt; <br> &lt;tr&gt;&lt;td colspan=2&gt; 세째 &lt;/td&gt; &lt;td&gt;줄&lt;/td&gt; &lt;/tr&gt; <br>&lt;/table&gt; <br> <br>&lt;/body&gt; <br>&lt;/html&gt; <br> <br> <table border=1 width=200 height=100 > <tr><td>첫</td> <td>째</td> <td>줄</td> </tr> <tr><td colspan=3> 두 째 줄 </td> </tr> <tr><td colspan=2> 세째 </td> <td>줄</td> </tr> </table> <br> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5"/> <br> <br><b> 첫째줄 1칸. 두째줄 2칸. 활용 </b> <br> <br>&lt;html&gt; <br>&lt;body&gt; <br> <br>&lt;table border=2 width=300 height=200&gt; <br> &lt;tr&gt;&lt;td colspan=2 height=100&gt;&lt;img src='http://www.hanshigan.co.kr/image/etc/sample_logo.gif'&gt;&lt;/td&gt; &lt;/tr&gt; <br> &lt;tr&gt;&lt;td width=150 align=center&gt;만화로 배우는 &lt;br&gt;쉽고, 재밌는&lt;/td&gt; &lt;td width=150 align=center&gt;태그공부&lt;br&gt;포토샵공부&lt;/td&gt; &lt;/tr&gt; <br>&lt;/table&gt; <br> <br>&lt;/body&gt; <br>&lt;/html&gt; <br> <br> <br><table border=2 width=300 height=200> <tr><td colspan=2 height=100><img src='http://www.hanshigan.co.kr/image/etc/sample_logo.gif'></td> </tr> <tr><td width=150 align=center>만화로 배우는 <br>쉽고, 재밌는</td> <td width=150 align=center>태그공부<br>포토샵공부</td> </tr> </table> <br> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5"/> <br> <br><b> 첫째줄 2칸. 두째줄 1칸. 활용1 </b> <br> <br>&lt;html&gt; <br>&lt;body&gt; <br> <br>&lt;table border=2 width=400 height=300&gt; <br> <br> &lt;tr&gt; <br> &lt;td width=150 align=center bgcolor=000000&gt;&lt;font color=ffffff&gt; <br> &lt;b&gt;모닥불&lt;/b&gt;&lt;/font&gt;&lt;/td&gt; <br> &lt;td width=150 align=center bgcolor=000000&gt;&lt;font color=ffffff&gt;박인희&lt;/font&gt;&lt;/td&gt; <br> &lt;/tr&gt; <br> <br> &lt;tr&gt;&lt;td colspan=2 height=200&gt;&lt;img src='http://www.hanshigan.co.kr/image/etc/sample_fire.gif'&gt;&lt;/td&gt; <br> &lt;/tr&gt; <br> <br>&lt;/table&gt; <br> <br>&lt;/body&gt; <br>&lt;/html&gt; <br> <br> <table border=2 width=400 height=300> <tr> <td width=150 align=center bgcolor=000000><font color=ffffff> <b>모닥불</b></font></td> <td width=150 align=center bgcolor=000000><font color=ffffff>박인희</font></td> </tr> <tr><td colspan=2 height=200><img src='http://www.hanshigan.co.kr/image/etc/sample_fire.gif'></td> </tr> </table> <br> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5"/> <br> <br><b> 첫째줄 2칸. 두째줄 1칸. 활용2 </b> <br> <br>&lt;html&gt; <br>&lt;body&gt; <br> <br>&lt;table border=2 width=400 height=300&gt; <br> <br> &lt;tr&gt; <br> &lt;td width=150 align=center &gt; &lt;font size=6&gt; &lt;b&gt;SLK-Class&lt;/b&gt; &lt;/font&gt; &lt;/td&gt; <br> &lt;td width=150 align=center &gt; &lt;font size=4&gt; 2004 NEW benz &lt;/font&gt; &lt;/td&gt; <br> &lt;/tr&gt; <br> <br> &lt;tr&gt;&lt;td colspan=2 height=200&gt;&lt;img src='http://www.hanshigan.co.kr/image/etc/sample_benz.gif'&gt;&lt;/td&gt; <br> &lt;/tr&gt; <br> <br>&lt;/table&gt; <br> <br>&lt;/body&gt; <br>&lt;/html&gt; <br> <br> <table border=2 width=400 height=300> <tr> <td width=150 align=center > <font size=6> <b>SLK-Class</b> </font> </td> <td width=150 align=center > <font size=4> 2004 NEW benz </font> </td> </tr> <tr><td colspan=2 height=200><img src='http://www.hanshigan.co.kr/image/etc/sample_benz.gif'></td> </tr> </table> <br> <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5"/> <br> <br><!-- -->

출처 : 나물먹고 물마시고

글쓴이 : 나물먹고 물마시고 카페운영자 원글보기

메모 :