Trio 홈페이지 - CSS로 만든 테이블표현 예제

CSS로 만든 테이블표현 예제

<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에는 자동 조절기능이 있으므로 컬럼의 폭을 전체적으로 조정하게 되는데 조성의 순서는 규격을 참조하라.

제공

이 문서(http://trio.co.kr/webrefer/csex/cxtable.html)는
자유로이 연결 사용이 가능함.