|
HTML에서 표를 만들려면 <TABLE>이라는 태그를 사용한다. <TABLE> 태그는 단순히 표를 만들기 위해 사용하는 것이 아니라 <TABLE> 태그내에 또 다른 <TABLE>을 계속해서 생성함으로써 복잡하지만 각각의 셀을 제어할 수 있는 효율적인 방법이다. <TABLE> 태그는 절대적 크기를 이용하면 윈도우의 크기에 구애를 받지 않는다. 표가 깨지거나 전체적으로 웹 페이지가 망쳐보이는 현상이 나타나지 않으므로 복잡하지만 <TABLE> 태그를 중첩시켜 사용하게 되는 것이다. 프레임을 사용하지 않고 통으로 만들어진 홈페이지에서는 더욱 더 유용하게 사용되어지므로 <TABLE> 태그 및 그 옵션과 관련 태그들을 살펴볼 필요가 있겠다. |
1. <Table> : Table
|
- <TABLE> </TABLE> : 테이블의 생성
- <TABLE WIDTH="가로" HEIGHT="세로"> </TABLE> : 테이블 전체의 가로 세로 크기
- <TABLE BORDER="굵기" > </TABLE> : 테이블 전체의 테두리 굵기
- <TABLE BORDERCOLOR="색상"> </TABLE> : 테이블 전체의 테두리 색상
- <TABLE BORDERCOLORLIGHT="색상"> </TABLE> : 테이블 전체의 테두리 색상 중 밝은 부분
- <TABLE BORDERCOLORDARK="색상"> </TABLE> : 테이블 전체의 테두리 색상 중 어두운 부분
- <TABLE BGCOLOR="색상"> </TABLE> : 테이블 전체의 배경 색상
- <TABLE BACKGROUND="그림 경로"> </TABLE> : 테이블 전체의 배경 그림
- <TABLE ALIGN="정렬 위치"> </TABLE> : 테이블 전체의 수평 정렬
- <TABLE VALIGN="정렬 위치"> </TABLE> : 테이블 전체의 수직 정렬
- <TABLE CELLPADDING="여백"> </TABLE> : 테이블내의 셀과 데이터간의 간격
- <TABLE CELLSPACING="여백"> </TABLE> : 테이블내의 셀과 셀의 간격
|
▲ <TABLE>에만 있는 옵션
- BORDER, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK, CELLPADDING, CELLSPACING |
▲ <TABLE>, <TR>, <TD>의 공통 옵션
- WIDHT, HEIGHT, BGCOLOR, BACKGROUND, ALIGN, VALIGN |
2. <TR> : Table Row
|
- <TR> </TR> : 테이블내 행의 형식 지정(<TR>의 개수 만큼 행의 개수가 결정)
- <TR WITHD="가로" HEIGHT="세로"> </TR> : 행의 가로 세로 크기
- <TR BGCOLOR="색상"> </TR> : 행의 배경 색상
- <TR BACKGROUND="그림 경로"> </TR> : 행의 배경 그림
- <TR ALIGN="정렬 위치"> </TR> : 행의 수평 정렬
- <TR VALIGN="정렬 위치"> </TR> : 행의 수직 정렬
|
3. <TD> : Table Data
|
- <TD> </TD> : 행내의 셀(데이터)의 개수(<TD>의 개수 만큼 셀 개수가 결정)
- <TD WITHD="가로" HEIGHT="세로"> </TD> : 셀의 가로 세로 크기
- <TD BGCOLOR="색상"> </TD> : 셀의 배경 색상
- <TD BACKGROUND="그림 경로"> </TR> : 셀의 배경 그림
- <TD ALIGN="정렬 위치"> </TD> : 셀의 수평 정렬
- <TD VALIGN="정렬 위치"> </TD> : 셀의 수직 정렬
- <TD COLSPAN="합칠 열의 수"> </TD> : 셀을 지정된 열의 수 만큼 합치기
- <TD ROWSPAN="합칠 행의 수"> </TD> : 셀을 지정된 행의 수 만큼 합치기
|
▲ <TD>에만 있는 옵션
- COLSPAN, ROWSPAN |
4. 예제-1 (테이블의 생성 - 행/열의 관계)
|
[Source] |
|
<html>
<head>
<title>
테이블 생성 (2행 2열)
</title>
</head>
<body>
<table border="1" width="500" height="100">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html> |
| [Result] |
▲ <Border> 생략시 0과 같아서 테두리가 나오지 않으므로 테두리를 보여 줄때에는 반드시 1이상을 주어야 한다. 1임에도 매우 굵게 나오는 것을 볼 수 있는데 약간의 응용만으로 얇고 간결한 선을 얻을 수 있다. 다음 강좌인 표 응용 강좌에서 언급할 것이다. |
5. 예제-2 (테이블 테두리 및 배경 색상 바꾸기)
|
[Source] |
|
<html>
<head>
<title>
테이블 색상 바꾸기
</title>
</head>
<body>
<table border="1" bordercolor="navy" bgcolor="skyblue" width="500" height="100">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html> |
| [Result] |
|
|
6. 예제-3 (테이블 배경에 그림 삽입하고 테이블 중앙 정렬)
|
[Source] |
|
<html>
<head>
<title>
테이블 배경 그림 삽입과 정렬
</title>
</head>
<body>
<table border="1" background="http://www.webmadang.net/main/logo7.gif" align="center" width="500" height="100">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html> |
| [Result] |
▲ 배경 그림은 바둑판 배열로 채워진다. <Table> 태그 내의 중앙 정렬은 윈도우 기준 중앙 정렬이며 행/열의 정렬은 별도로 정렬해야 한다. |
7. 예제-4 (테이블의 밝은 부분과 어두운 부분의 색상 바꾸기 / 셀 여백)
|
[Source] |
|
<html>
<head>
<title>
테이블 테두리 색상 변경 및 셀 여백
</title>
</head>
<body>
<table border="1" bordercolor="navy" bgcolor="skyblue" width="500" height="100" bordercolorlight="red" bordercolordark="white" cellpadding="10" cellspacing="10">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html> |
| [Result] |
▲ 테두리의 밝은 부분은 빨강, 어두운 부분은 흰색으로 구분해 보았다. <Cellpadding>는 글자와 셀사이의 간격으로 글자의 앞쪽에 간격이 생긴것을 볼 수 있다. <Cellspacing>는 셀과 셀의 간격으로 <Border>를 1로 했음에도 불구하고 마치 <Brorder>가 굵은 것 처럼 보여진다. 이는 <Cellspacing>를 10으로 하였기 때문에 10만큼 셀 간격이 생긴것이다. |
8. 예제-5 (행 배경 색상 바꾸기 / 셀 배경 색상 바꾸기 / 셀내 문자 정렬)
|
[Source] |
|
<html>
<head>
<title>
행과 셀의 배경 색상 바꾸기와 정렬
</title>
</head>
<body>
<table border="1" width="500" height="100" bgcolor="yellow" >
<tr bgcolor="gray" align="center">
<td >1행 1열</td>
<td bgcolor="white">1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td bgcolor="red" align="right">2행 2열</td>
</tr>
</table>
</body>
</html> |
| [Result] |
▲ 테이블 전체 배경을 노란색으로 채워보았다. 첫 행을 회색으로 채웠더니 테이블에서 주었던 배경색은 무시되고 마찬가지로 2행 2열의 셀 배경색을 빨강으로 채웠더니 노랑 배경색이 사라졌다. 즉, 테이블 전체 배경색보다 행/열에 주어진 배경색이 우선시 된 것이다. 또한 행/열보다 셀 배경색이 우선시 되어 1행의 배경색이 회색임에도 불구하고 1행 2열의 셀 배경색을 흰색으로 하였더니 흰색으로 바뀌는 것을 볼 수 있다. 결국, "테이블 배경색 < 행/열 배경색 < 셀 배경색"순으로 우선순위가 결정되어 진다. |
9. 예제-6 (열 합치기)
|
[Source] |
|
<html>
<head>
<title>
열 합치기
</title>
</head>
<body>
<table border="1" width="500" height="100">
<tr>
<td colspan="2" align="center">제목</td>
</tr>
<tr align="center">
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr align="center">
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html> |
| [Result] |
|
제목 |
|
1행 1열 |
1행 2열 |
|
2행 1열 |
2행 2열 |
▲ 1행의 1열과 2열을 하나로 합쳤으므로 1행의 <td>는 한 개가 된다. |
10. 예제-6 (행 합치고 열 너비 줄이기)
|
[Source] |
|
<html>
<head>
<title>
행 합치고 열 너비 줄이기
</title>
</head>
<body>
<table border="1" width="500" height="100">
<tr align="center">
<td rowspan="3" width="100">제목</td>
<td>1행 2열</td>
</tr>
<tr align="center">
<td>2행 2열</td>
</tr>
<tr align="center">
<td>3행 2열</td>
</tr>
</table>
</body>
</html> |
| [Result] |
▲ 제목열의 너비를 100으로 줄였지만 테이블 전체 너비 500에는 변함이 없다. 단지 2열이 늘어나는 것을 볼 수 있다. 또한 제목은 1행 1열에 속하므로 위와 같은 결과가 나온다. |
▶ 일반적인 표는 이렇게 구성된다. 요즘은 표를 만들기보다 전체 프레임의 레이아웃을 잡는데 <Table> 태그를 더 많이 사용한다. 큰 그림을 작게 잘라서 로딩속도를 빠르게할 수도 있으며 컨텐츠를 테마별로 잘 구분할 수 있게 구성해 주는 것도 테이블로 구현할 수 있다. 표 응용편은 다음 강좌에서...
작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이 | 
컴쟁이
