1.5.2 Table을 이용한 표 그리기 2
ㆍcolspan은 가로칸들을 합쳐주는 기능을 하는 속성입니다. 작은따옴표의
안에 숫자를 입력하여 합치려고 하는 칸의 수를 지정하실 수 있습니다. 두칸을 합치려면 '2'를, 세칸을 합치려면 '3'을, 이런식으로 합치려는 칸의 수만큼을 입력해주시면 되겠습니다.
ㆍrowspan은 세로칸들을 합쳐주는 기능을 하는 속성이랍니다. 마찬가지로
작은따옴표의
안에 숫자를 입력하여 합치려고 하는 칸의 수를 지정하실 수 있습니다.
셀(Cell)을 병합하는 것은 저에게도 너무나 복잡하고 머리아픈 작업이기 때문에 초보인 여러분들은 이해를 하는 것이 쉽지만은 않으실 거예요. 이해가 잘 안가시는 분들은 예제 3, 4, 5의 구조를 차근차근 꼼꼼하게 분석해 보시면, 이해하시는데 많은 도움이 될 것 같습니다.
예제 3
표의 구조 3
<html>
<body>
<table border='1'>
<tr>
<td colspan='2'>1행1열의 칸과 1행2열의 칸을 병합하였습니다.</td>
<td> 1행3열의 칸입니다.</td>
</tr>
<tr>
<td>2행1열의 칸입니다.</td>
<td>2행2열의 칸입니다.</td>
<td rowspan='2'>2행3열의 칸과 3행3열의 칸을 병합하였습니다.</td>
</tr>
<tr>
<td>3행1열의 칸입니다.</td>
<td>3행2열의 칸입니다.</td>
</tr>
</table>
</body>
</html> |
태그연습장을 사용하여 예제 3의 결과를 확인해 보세요.
예제 4
표의 구조 4
<html>
<body>
<table border='1'>
<tr>
<td colspan='3'>1행1열의 칸과 1행2열의 칸, 1행3열의 칸을 병합하였습니다.</td>
</tr>
<tr>
<td>2행1열의 칸입니다.</td>
<td>2행2열의 칸입니다.</td>
<td>2행3열의 칸입니다.</td>
</tr>
<tr>
<td colspan='3'>3행1열의 칸과 3행2열의 칸, 3행3열의 칸을 병합하였습니다.</td>
</tr>
</table>
</body>
</html> |
태그연습장을 사용하여 예제 4의 결과를 확인해 보세요.
예제 5
표의 구조 5
<html>
<body>
<table border='1'>
<tr>
<td rowspan='3'>1행1열의 칸과 2행1열의 칸, 2행1열의 칸을 병합하였습니다.</td>
<td>1행 2열의 칸입니다.</td>
<td rowspan='3'>1행3열의 칸과 2행3열의 칸, 3행3열의 칸을 병합하였습니다.</td>
</tr>
<tr>
<td>2행2열의 칸입니다.</td>
</tr>
<tr>
<td>3행2열의 칸입니다.</td>
</tr>
</table>
</body>
</html> |
태그연습장을 사용하여 예제 5의 결과를 확인해 보세요.
좀 복잡하죠? 이해가 쉽게 안되실 거예요. 그래도 예제 3, 4, 5는 쉬운 구조에 속하기 때문에 꼭 이해하고 넘어가셔야 해요. 실제로 홈페이지를 만들 때에는 훨씬 더 복잡하게 Table을 사용한답니다. 문서의 공간을 나누어 각각의 대상이 들어갈 위치를 지정하는데 쓰이죠.
예제들을 아무리 보셔도 이해가 잘 안가시는 분들은 태그연습장을 이용해서 직접 Table을 짜서
셀(Cell)을 병합해 보는 것도 좋은 방법이랍니다.
|