html 테이블 만들기에서 표 편집 칸 합치기와 줄 합치기
[HTML 쉽게 따라하기] 테이블 만들기 표 편집 속성들 - 칸합치기(COLSPAN) 와 줄 합치기(ROWSPAN)
지난시간에 간단한 테이블을 만들어 보았는데요, 오늘은 표를 편집하는 속성들에 대해서 알아보겠습니다.
1> 칸 합치기
표를 편집하는데 칸을 합할 경우가 있습니다.
이러한 경우에 COLSPAN라는 속성을 이용하는데 이때 사용법은 다음과 같습니다.
COLSPAN=n
COLSPAN 속성은 셀을 옆으로 합하고자 하는 개수를 지정해 주며 기본적으로 1이 지정되어 있습니다.
즉, n 값으로 합칠 셀의 개수를 정해줄 수 있습니다.
다음은 아래의 표와 같은 형식으로 셀을 합하는 예입니다.
[예시 1]----------------------------------------------------------------------------------
<html>
<head>
<title> 색상 </title>
</head>
<body>
<center>
<table border>
<tr>
<td colspan=2>빨강</td><td>노랑</td><td>파랑</td>
</tr>
<tr>
<td>분홍</td><td>주황</td><td>녹색</td><td>검정</td>
</tr>
</table>
</center>
</body>
</html>
---------------------------------------------------------------------------------------------
메모장에 html 소스를 인터넷 파일인 .html 로 저장하면
아래처럼 인터넷 파일이 나옵니다.
.
이것을 클릭하여 창을 실행하면 아래와 같은 화면이 나옵니다.
빨강 글씨가 있는 칸이 두개가 합쳐져 있는것을 볼 수 있습니다.
2> 줄 합치기
표를 편집하는데 줄 또한 합할 경우가 있는데, 이러한 경우에 ROWSPAN라는 속성을 사용합니다.
ROWSPAN=n
ROWSPAN 속성은 셀을 위, 아래로 합하고자 하는 개수를 지정해 주며, 기본적으로 1이 지정되어 있습니다.
즉 n값으로 합칠 셀의 개수를 정해줄 수 있습니다.
[예시 2]-------------------------------------------------------------------
<html>
<head>
<title>숫자</title>
</head>
<body>
<center>
<table border>
<tr>
<td>1</td><td rowspan=2>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>6</td>
</tr>
</table>
</center>
</body>
</html>
------------------------------------------------------------------------------
인터넷 창으로 실행하면 아래 그림과 같이 나옵니다.
3> 폭 지정하기
테이블의 폭을 지정할 때 WIDTH 속성을 이용하며 폭을 따로 지정해 주지 않으면 테이블의 내용에 따라 자동적으로 결정됩니다.
이때 사용되는 단위로는 픽셀이나 %를 사용하며 사용법은 다음과 같습니다.
WIDTH=n
4> 높이 지정하기
테이블의 높이를 지정할 때 HEIGHT 속성을 이용하며 높이를 따로 지정해 주지 않으면 테이블의 내용에 따라 자동으로 결정됩니다.
이때 사용되는 단위로는 픽셀과 %를 사용하며 사용법은 다음과 같습니다.
HEIGHT=n
[예시 3]---------------------------------------------------------
<html>
<head>
<title>표</title>
</head>
<body>
<center>
<table border width=100 height=100>
<tr>
<td>넓이=100 높이=100</td>
</tr>
</table><p>
<table border width=200 height=100>
<tr>
<td>넓이=200 높이=100</td>
</tr>
</table>
</center>
</body>
</html>
-------------------------------------------------------------------
위 소스를 실행하면 아래와 같이 나옵니다.
그런데 만일 설정한 값보다 내용이 더 많아 공간이 모자르면 어떻게 될까요?
예시 3의 첫번째 widht=100 을 50으로, height=100 을 50으로 바꿔 보도록 하겠습니다.
<table border width=50 height=50>
<tr>
<td>넓이=100 높이=100</td>
</tr>
</table><p>
다시 저장하여 실행시키면 아래와 같이 나옵니다.
즉 내용은 다 나오도록 스스로 넓혀주는 것이지요.
오늘은 테이블 만들기에서 표 편집 속성 중 넓이와 높이를 지정하는 방법을 배워 보았습니다.
다음 시간엔 테이블 표 속성인 표 둘레의 테두리 지정하기, 표 전체의 선의 굵기를 지정하는 방법에 대해 알아보겠습니다.
이 글을 공유합시다
