<table>에서 HTML을 가지고 모양을 만드는 데는 한계가 많은데 CSS를 사용하면 상당히 다양한 모양으로 만들 수 있는데 여기서는 몇가지 예제를 수록한다. 이 예제들은 Explorer 기준으로 작성하여 Netscape에는 그대로 적용되지 않음에 유의하라.
 예제 1] 한개의 셀(cell)만 장식하는 경우
-
<table border=1>
<tr><td colspan=3 style="border:solid 10pt outset green; padding:2pt;
background-color:aaffaa; font-weight:bold; text-align:center; color:blue;">제목</td></tr>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td colspan=3 style="border:solid 10pt inset green; padding:2pt; font-size:8pt;
background-color:fee; padding-left:1em; color:blue">바닥글</td></tr>
</table>
| 제목 |
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 바닥글 |
|
설명
- border의 약식 코드를 사용하였으며 한가지 요소씩 지정하여도 같은 결과를 얻을 수 있다.
- 제목은 outset, 바닥글은 inset로 하였는데 보더의 문양이 튀어 나온것 같은 것은 outset, 속으로 들어간 것 처럼 된 것이 inset이다.
- table border=0일 경우에는 border가 나타나지 않는다.
- CSS에서의 색상값은 #eeffee, #efe(=eeffee) 둘 다를 사용 할 수 있다.
|
- 예제 2] 한개의 줄(tr)만을 장식하는 경우
-
<style type="text/css">
table tr.test1 td{border:solid 10pt outset green; padding:2pt;
background-color:aaffaa; font-weight:bold; text-align:center; color:blue}
table tr.test2 td{border:solid 10pt inset green; padding:2pt; font-size:8pt;
background-color:ffeeee; padding-left:1em; color:blue}
</style>
<table border=1>
<tr><td colspan=3>제목</td></tr>
<tr class=test1><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr class=test2><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td colspan=3>바닥글</td></tr>
</table>
| 제목 |
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 바닥글 |
|
설명
- 스타일 지정에서 table tr.test1 td 라 함은 table에서 tr의 class가 test1인 줄의 td에 해당하는 스타일이라는 뜻이다. 이것으로 한 줄 전체의 스타일을 지정 할 수 있다.
- 스타일 지정에서 컴마(,)는 and의 의미이며, 빈칸은 하위(예: table 속의 tr 속의 td)를 의미한다. 마찬가지 방식으로 ul li{...} 혹은 ul li ol li{...} 식으로 지정이 가능하다.
- 한 줄에서 한 셀만 별도로 지정하려면 위 예제1 에서와 같이 지정하면 그 셀에만 적용된다.
|
- 예제 3] 컬럼(column)별로 장식하는 경우
-
<table border=1>
<colgroup>
<col style="border:solid 4pt green; background-color:eeeeee;
font-weight:bold; text-align:center; color:brown">
<col style="border:solid 4pt green; padding:2pt;
background-color:aaffaa; font-weight:bold; text-align:center; color:blue">
<col style="border:solid 4pt green; padding:2pt; font-size:8pt;
background-color:ffeeee; padding-left:1em; color:red; width:50pt">
</colgroup>
<tr><td colspan=3>제목</td></tr>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
<tr><td colspan=3 style="font-size:9pt; font-weight:normal; color:blue">바닥글</td></tr>
</table>
| 제목 |
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
| 바닥글 |
|
설명
- <col> <col> <col>로 순서적으로 컬럼을 지정하는데 해당 컬럼에 스타일을 지정(<col style="...">)하면 그 컬럼에 수직으로 모두 적용된다.
이것으로 각 컬럼별 스타일을 일일히 지정하지 않아도 되므로 아주 편리하다.
- 컬럼 중에서 어떤 셀을 다르게 지정하려면 그 셀에 예제1과 같이 지정하면 된다. 이 예제의 마지막 줄의 셀을 별도로 다시 지정하였다.
- <colgroup>...</colgroup>은 생략하여도 된다.
|
- 예제 4] 모든 셀(cell)을 같은 모양으로 장식하는 경우
-
<style type="text/css">
table.test3 tr td{border:solid 4pt green; padding:2pt; background-color:fee;
text-align:center; color:blue; padding-left:1em; padding-right:1em;}
</style>
<table width=90%><tr valign=top><td width=30%>
<table border=1 class=test3>
<tr><td colspan=3><b>제목</b></td></tr>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
<tr><td colspan=3 style="font-size:9pt; font-weight:normal;
color:teal; border-color:red">바닥글</td></tr>
</table>
| 제목 |
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
| 바닥글 |
|
설명
- 예제 2에서 설명 한 바와 같이 table.test3 tr td는 table class=test3 하단의 tr 그 하단의 td에 적용되는 것으로, 모든 셀에 적용된다.
이것으로 각 셀에 스타일을 일일히 지정하지 않아도 되므로 아주 편리하다. HTML에서 지정 할 수 있는 것보다 훨신 많은 변화를 지정 할 수 있다.
- 셀들 중에서 어떤 셀을 다르게 지정하려면 그 셀에 예제1과 같이 지정하면 된다. 이 예제의 마지막 줄을 별도로 다시 지정하였다.
|
- 예제 5] 모든 셀(cell)을 같은 모양으로 장식하는 경우
-
| 제목 |
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
| 바닥글 |
|
설명
- 예제 4와 유사한 것으로 각 변의 보더 색상을 지정하였다.
- 색상의 순서는 위변에서 시계방향의 순서, 다시말해서 윗변 오른쪽변 아래쪽변 외쪽변 순서로 지정한다.
- border 단위에서 em은 기본 글자의 크기를 말하는 것으로 1em은 한글자의 높이 혹은 폭이되고, 0.1(혹은 .1)em은 글자의 1/10 높이 혹은 폭이되는 것이다.
- table에는 자동 조절기능이 있으므로 컬럼의 폭을 전체적으로 조정하게 되는데 조성의 순서는 규격을 참조하라.
|
|
제공