[스크랩] 테이블의 가로 세로 나누기

★★★연습해보세요>>>>>>　　태그연습장　　　RGB색상코드

① TABLE 만들기 태그 </font><table> <tr><td></td></tr> </table> <font style="font-size:9pt" class="blinespace" color="333333">기본태그는 다들 아시죠? 다시 말하면 tr은 열을 바꿔주고, td는 행을 나눠 줍니다. 그러나 table 만들기는 이제 시작입니다. 모양도 여러가지이고 편집도 다양하기 때문에 눈을 크게 뜨고 보셔야 해요~ ② 여러가지 TABLE 아래의 예제들을 보면서.. tr과 td를 이용해 어떻게 줄과 칸을 바꿨는지를 잘 관찰하세요. 그리고 두 개의 행(가로)을 합칠 때는 colspan=&quot;2&quot;(고급편에 응용) 세 개의 행을 합칠 때에는 colspan=&quot;3&quot;...(고급편에 응용) 두 개의 열(세로)를 합칠 경우에는 rowspan=&quot;2&quot;(고급편에 응용)와 같이 넣어주면 됩니다.. 설명이 다소 좀 복잡하지만.. 아래의 태그명령어와 그림을 비교하면서 연습해 보세요. </font><table> <tr> <td>첫번째 칸</td><td>두번째 칸</td><td>세번째 칸</td><td>네번째 칸</td> </tr> </table> <font style="font-size:9pt" class="blinespace" color="333333">

첫번째 칸

두번째 칸

세번째 칸

네번째 칸

</font><table> <tr><td>첫번째 줄</td></tr> <tr><td>두번째 줄</td></tr> <tr><td>세번째 줄</td></tr> </table> <font style="font-size:9pt" class="blinespace" color="333333">

첫번째 줄

두번째 줄

세번째 줄

</font><table> <tr><td>첫째줄 첫째칸</td><td>첫째줄 둘째칸</td></tr> <tr><td>둘째줄 첫째칸</td><td>둘째줄 둘째칸</td></tr> </table> <font style="font-size:9pt" class="blinespace" color="333333">

첫째줄 첫째칸	첫째줄 둘째칸
둘째줄 첫째칸	둘째줄 둘째칸

</font><table> <tr><td rowspan="2">첫째줄과 둘째줄의 칸을 합쳤어요.</td> <td>첫째줄 둘째칸</td></tr><tr><td>둘째줄 둘째칸</td></tr> </table> <font style="font-size:9pt" class="blinespace" color="333333">위의 칸 합치기에 대해선 고급 응용편에서 다시 다르겠습니다.

첫째줄과 둘째줄의 칸을 합쳤어요.	첫째줄 둘째칸
	둘째줄 둘째칸

③ 응용 TABLE 위에서 테이블의 가로/세로나누기에 대해서 배웠습니다. 이제, 이러한 테이블에 다양한 옵션을 넣어서 응용을 해 보겠습니다. 먼저 가로로 각기 다른색의 테이블 4개를 만들어 보겠습니다. </font><table border="1" cellspacing="0" style="border-collapse:collapse;"> <tr> <td width="100" height="200" bgcolor="F0C800"> </td> <td width="100" height="200" bgcolor="FD8116"> </td> <td width="100" height="200" bgcolor="74CA2D"> </td> <td width="100" height="200" bgcolor="4D9DCE"> </td></tr></table> <font style="font-size:9pt" class="blinespace" color="333333">

위와 같이 칸마다 다른색을 넣을수도 있고 (1과3)(2와4)번을 같게 또는 각 칸의 가로사이즈를 조절해서 만들수도 있습니다. </font><table border="1" cellspacing="0" style="border-collapse:collapse;"> <tr> <td width="50" height="200" bgcolor="F0C800"> </td> <td width="150" height="200" bgcolor="FD8116"> </td> <td width="50" height="200" bgcolor="F0C800"> </td> <td width="150" height="200" bgcolor="FD8116"> </td></tr></table> <font style="font-size:9pt" class="blinespace" color="333333">

★이제 세로로 나누기입니다. 세로로 각기 다른색의 테이블 4개를 만들어 보겠습니다. </font><table border="1" cellspacing="0" style="border-collapse:collapse;"> <tr> <td width="400" height="100" bgcolor="F0C800"> </td></tr> <td width="400" height="100" bgcolor="FD8116"> </td></tr> <td width="400" height="100" bgcolor="74CA2D"> </td></tr> <td width="400" height="100" bgcolor="4D9DCE"> </td></tr></table> <font style="font-size:9pt" class="blinespace" color="333333">

세로의 크기를 각기 다르게 응용해 보겠습니다. </font><table border="1" cellspacing="0" style="border-collapse:collapse;"> <tr> <td width="400" height="50" bgcolor="74CA2D"> </td></tr> <td width="400" height="150" bgcolor="4D9DCE"> </td></tr> <td width="400" height="50" bgcolor="74CA2D"> </td></tr> <td width="400" height="150" bgcolor="4D9DCE"> </td></tr></table> <font style="font-size:9pt" class="blinespace" color="333333">

어때요? 재미있고 신기하죠? 테이블의 가로 세로 나누기는 위와 같이 하시면 됩니다. ★★★주의할 점★★★ 가로로 나눌경우엔 세로의 크기는 200(임의)으로 일정해야 하고 반대로 세로로 나눌경우엔 가로의 크기가 400(임의)으로 일정해야합니다. (한마디로 수치를 바꿀수 없다는 말입니다) 오늘은 테이블의 가로/세로 나누기에 대해 배웠습니다.
다음 이 시간에는 테이블안에 테이블넣기 테이블 두 칸의 합치기등등
테이블만들기 고급편을 다루겠습니다. ★노파심에서 현재까지 태그야놀자를 제대로 이해하고 배우신 분이라면.. 자신의 내문서에 태그소스라는 이름의 메모장이 있어야합니다. 그 안의 내용엔 아래와 같아야 합니다.

-------------------------------------------------------------------
&lt;<!기본테이블!>&gt;
</font></font></pre>
<table border="0" cellspacing="0" style="border-collapse:collapse;">
<tr> 
<td width="" height="">
</td></tr></table>
<font style="font-size:9pt" class="blinespace" color="333333"><font style="font-size:9pt" class="blinespace" color="660099">&lt;<!테이블옵션!>&gt;
border=&quot;&quot; : 테이블 테두리(수치)
bordercolor=&quot;&quot; : 테이블 테두리 색상(RGB색상)
cellspacing=&quot;&quot; : tr과 td 사이의 간격(수치)
style=&quot;border-collapse:collapse;&quot; : 테이블의 테두리를 하나로 만듬
bgcolor=&quot;&quot; : 테이블의 배경색(RGB색상)
background=&quot;&quot; 테이블의 배경이미지(이미지주소)
&lt;<!테이블가로나누기!>&gt;
</font></font><table border="0" cellspacing="0" style="border-collapse:collapse;">
<tr> 
<td width="" height="">
</td>
<td width="" height="">
</td>
<td width="" height="">
</td>
<td width="" height="">
</td></tr></table>
<font style="font-size:9pt" class="blinespace" color="333333"><font style="font-size:9pt" class="blinespace" color="660099">테이블 4개적용.. 삭제하거나 추가할 수 있음
<td width="" height="">
</td>
&lt;<!테이블세로나누기!>&gt;
</font></font><table border="0" cellspacing="0" style="border-collapse:collapse;">
<tr> 
<td width="" height="">
</td></tr>
<tr> 
<td width="" height="">
</td></tr>
<tr> 
<td width="" height="">
</td></tr>
<tr>
<td width="" height="">
</td></tr></table> 
<font style="font-size:9pt" class="blinespace" color="333333"><font style="font-size:9pt" class="blinespace" color="660099">테이블 4개적용.. 삭제하거나 추가할 수 있음
-------------------------------------------------------------------
위와 같은 내용이 담겨 있어야 합니다.
			

출처 : 아름다운 60대

글쓴이 : 예보 원글보기

메모 :