본문 바로가기
Web Development/HTML / CSS

[Html] 배경(background) 과 테이블(table)에 대해서

Celestia 2009. 6. 5. 11:11

배경이미지(background)와 배경색(bgcolor)

배경을 지정하기 위한 속성으로는 background(배경이미지)와 bgcolor(배경색)가 있습니다.

배경을 지정할 수 있는 태그는 <body>태그와 <table>태그, <td>태그 등이 대표적입니다.

<body>태그에 배경을 지정하면 문서 전체에 배경이 적용됩니다.

background 속성은 배경이미지를 지정합니다.

<body background="bg01.gif">

위와 같이 지정하면 문서 전체에 bg01.gif 이라는 배경이미지가 적용됩니다.

bgcolor 속성은 배경색을 지정합니다.

<body bgcolor="gray">

위와 같이 지정하면 문서의 배경색이 회색으로 적용됩니다.

<table>태그에도 background, bgcolor 속성을 지정할 수 있습니다.

<table bgcolor="gray">
<tr>
 <td>회색배경을 가진 테이블</td>
</tr>
</table>

회색배경을 가진 테이블

배경이미지(background) 속성을 사용할때는 배경이미지가 패턴으로 깔리는 점에 유의하여야 합니다.

배경이미지로 사용할 파일은 120*120 크기입니다. 이를 240*240 테이블의 배경으로 지정하면
위의 이미지가 4번 반복적으로 적용됩니다.

<table width="240" height="240" background="background01.gif">
<tr>
 <td align="center">240*240 테이블</td>
</tr>
</table>

240*240 테이블

배경이미지가 반복적으로 적용되지 않게 하기 위해서는 CSS를 사용하면 됩니다.

테이블(table)

테이블 태그는 HTML 문서에서 가장 많이 사용되는 태그입니다.

테이블 태그에서 가장 기본적인 태그는 <table>, <tr>, <td> 이 3가지 태그입니다.

<table>태그는 테이블의 시작을 알려주는 태그입니다. 테이블의 끝은 </table>태그로 표시합니다.

<tr>태그는 table row의 약자로 행을 정의 합니다.

<td>태그는 table data의 약자로 각 행에 셀을 정의합니다. 즉 행에서 칸(열)을 나누는 기능을 합니다.

이를 이해하기 위해서 가장 간단한 1행, 1열을 가지고 있는 테이블을 만들어 보면 다음과 같습니다.

<table border="1">
<tr>
 <td>1*1 테이블</td>
</tr>
</table>

테이블의 경계선(border)을 지정해주어야 테이블의 모양을 볼 수 있습니다.

1행에 2개의 칸(열)을 가진 테이블은 다음과 같습니다.

<table border="1">
<tr>
 <td>1*1 셀</td>
 <td>1*2 셀</td>
</tr>
</table>

이번에는 행(row)을 확장하여 2*2 테이블을 만들어 보겠습니다.

<table border="1">
<tr>
 <td>1*1 셀</td>
 <td>1*2 셀</td>
</tr>
<tr>
 <td>2*1 셀</td>
 <td>2*2 셀</td>
</tr>
</table>

테이블을 만드는 순서는 먼저 테이블을 정의하고(table), 행(tr)을 지정한 다음, 그 행을 나누어서 셀(td)을 만드는겁니다.

열(TR)과 행(TD)의 확장

테이블은 기본적으로 각 열마다 동일한 행으로 이루어져야 합니다.

<table border="1">
<tr>
 <td>1*1 셀</td>
</tr>
<tr>
 <td>2*1 셀</td>
 <td>2*2 셀</td>
</tr>
</table>

위와 같이 첫번째 열(row)은 1개의 행(column)을 가지고, 두번째 열(row)은 2개의 행(column)을 가지게 만들면
아래처럼 제대로 모양을 갖추어 지지 않습니다.

1*1 셀
2*1 셀 2*2 셀

첫번째 열을 오른쪽으로 확장시켜 주어야 합니다. 이때 사용하는 속성이 colspan 입니다. 

<table border="1">
<tr>
 <td colspan="2">1*1 셀</td>
</tr>
<tr>
 <td>2*1 셀</td>
 <td>2*2 셀</td>
</tr>
</table>

위와 같이 colspan="2"로 지정하면 아래와 같이 의도한 대로 모양이 나옵니다.

1*1 셀
2*1 셀 2*2 셀

즉 첫번째 row의 column수가 1개이고, 두번째 row의 column 수가 2개이므로 이를 동일하게 맞추어 주기 위해서
첫번째 row의 셀에서 colspan 속성을 사용하였습니다.

열을 확장할때는 rowspan 이라는 속성을 사용합니다.

<table border="1">
<tr>
 <td rowspan="2">1*1 셀</td>
 <td>1*2 셀</td>
</tr>
<tr>
 <td>2*2 셀</td>
</tr>
</table>

1*1셀의 열(row)을 확장했으므로 2열(row)에서는 첫번째 셀이 필요없습니다.

1*1 셀 1*2 셀
2*2 셀

여기에서 중요한것은 확장을 하는 방향입니다.

왼쪽에서 오른쪽으로 column을 확장하는 경우 colspan,
위에서 아래로 row를 확장하는 경우는 rowspan

이렇게 기본적으로 기억하면서 colspan과 rowspan 속성을 자유자재로 다룰 수 있어야 합니다.

아주 빈번하게 사용되므로 시간표 같은것을 만들어 보면서 충분한 연습을 해주어야 합니다.

여백과 경계선

테이블 경계선의 두께를 지정하는 속성은 border 입니다.

<table border="3">
<tr>
 <td>border 3인 테이블</td>
</tr>
</table>

border 속성값을 3으로 지정하면 아래와 같이 테이블의 경계선의 두께가 지정됩니다.

border 3인 테이블

cellpadding은 셀의 여백을 지정합니다.

<table cellpadding="10">
<tr>
 <td>cellpadding 10인 테이블</td>
</tr>
</table>

cellpadding을 10으로 지정하면 아래와 같이 테이블 경계선과 셀안의 내용사이에 여백이 지정됩니다.

cellpadding 10인 테이블

cellspacing은 셀과 셀 사이의 공간을 지정합니다.

<table cellspacing="5" border="1">
<tr>
 <td>cellspacing 5인 테이블</td>
 <td>cellspacing 5인 테이블</td>
</tr>
<tr>
 <td>cellspacing 5인 테이블</td>
 <td>cellspacing 5인 테이블</td>
</tr>
</table>

cellspacing을 5로 지정하면 아래와 같이 셀사이의 공간이 지정됩니다.

cellspacing 5인 테이블 cellspacing 5인 테이블
cellspacing 5인 테이블 cellspacing 5인 테이블

 

너비(width)와 높이(height)

테이블의 너비와 높이를 지정하는 속성은 width와 height 입니다.

<table border="1" width="200" height="100">
<tr>
 <td>200픽셀 * 100픽셀</td>
</tr>
</table>

너비를 200으로 높이를 100으로 지정했습니다. 일반적으로 테이블의 높이는 잘 지정하지 않습니다.
테이블내의 열의 수와 셀 내용에 따라 자연적으로 높이는 증가하도록 합니다.

200픽셀 * 100픽셀

테이블의 열(row)의 높이는 height 속성으로 지정합니다.

<table border="1" width="200">
<tr height="30">
 <td>30픽셀 열</td>
</tr>
<tr height="50">
 <td>50픽셀 열</td>
</tr>
</table>

첫번째 열을 30픽셀로, 두번째 열을 50픽셀로 지정하였습니다.

30픽셀 열
50픽셀 열

테이블의 셀(column)의 너비는 width 속성으로 지정합니다.

<table border="1" width="200">
<tr>
 <td width="50">50픽셀</td>
 <td width="150">150픽셀</td>
</tr>
</table>

첫째 셀에는 50, 두번째 셀에는 150 픽셀을 지정하였습니다.

50픽셀 150픽셀

테이블과 셀 내용의 정렬

테이블 자체를 정렬시킬려면 <table>태그내에서 align 속성을 사용하면 됩니다.

<table border="1" align="center">
<tr>
 <td>align 속성으로 테이블 정렬</td>
</tr>
</table>

align 속성값을 center로 지정하여 테이블을 중앙으로 정렬했습니다.
left, right로 지정하면 왼쪽, 오른쪽으로 정렬됩니다.

align 속성으로 테이블 정렬

저작자표시 비영리 동일조건

'Web Development > HTML / CSS' 카테고리의 다른 글

[Html] 레이아웃(Layout) 에 대해서  (0) 2009.06.05
[Html] 프레임(frame) 과 리스트(List) 에 대해서  (0) 2009.06.05
[Html] 색(color) 과 HTML 색상표 모음  (0) 2009.06.05
[Html] 이미지(image) 를 어떻게 하는가.  (0) 2009.06.05
[Html] 텍스트 관련 태그 와 링크(Link) 에 대해서  (2) 2009.06.05

'Web Development/HTML / CSS' Related Articles

티스토리툴바