글
Rowspan, Colspan
안녕하세요?
오늘은 테이블 두번째 시간으로 행합치기와 열합치기를 하도록 하겠습니다.
<TD>태그에서 COLSPAN, ROWSPAN이라는 속성인데요. COLSPAN은 열합치기, ROWSPAN은 행합치기입니다. 행과열은 저번에 했지요? 행이 2칸, 열이 2칸인 테이블이 있다고 합시다.
| 1행1열 | 1행2열 |
| 2행1열 | 2행2열 |
이렇게요.
이중에 1행1열과 1행2열을 합치는게 COLSPAN이고 1행1열과 2행1열을 합치는게 ROWSPAN입니다.
그럼 직접 코드를 만들어 보면서 보시죠.
<html>
<head><title>COLSPAN ROWSPAN</title>
</head>
<body>
<table border=1>
<tr>
<td>1행1열</td>
<td>1행2열</td>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
</tr>
</table>
<p> 열을 합치면
<table border=1>
<tr>
<td colspan=2>1행1열과 1행2열을 합침</td>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
</tr>
</table>
<p> 행을 합치면
<table border=1>
<tr>
<td rowspan=2>1행1열과 2행1열을 합침</td>
<td>1행2열</td>
</tr>
<tr>
<td>2행2열</td>
</tr>
</table>
</body>
</html>
머릿속으로 그림을 그려가면서 하셔야 이해가 빠를겁니다. td colspan=2는 열을 합치는 것이기 때문에 두개의 열이 합쳐졌기때문에 td가 하나만 쓰고 다음행에서는 td가 두번이 들어가죠. 행을 합칠때는 반댑니다. td가 두번들어가고 다음행에서는 td가 한번만 들어간다는 거죠. 행이 합쳐졌으니깐요. 이거는 많이 해봐야 이해가 갈겁니다. 그럼 실행했을때 어떻게 될지 감이 오시는지요?
맨위의 테이블은 정상적인 테이블이구요. 그 밑에는 1행1열과 1행2열을 합친겁니다. colspan이죠. 세번째 테이블은 1행과 2행1열을 합친겁니다. rowspan이죠. 좀 감이 오시는지 모르겠습니다. 그럼 오늘은 여기까지 하고 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| 셀의 정렬속성 (0) | 2011.07.21 |
|---|---|
| 표의 경계선, 너비와 높이조절 (0) | 2011.07.19 |
| 표만들기 기초 (0) | 2011.07.14 |
| 글자색바꾸기, <BODY TEXT>, <FONT COLOR> (0) | 2011.07.12 |
| 페이지 배경색을 내맘대로 (0) | 2011.07.10 |
