TABLE에 CSS를 정의할 때!

가장 중요한 것은!

<TR>, <TD> 이 태그에 아무런 속성을 쓰지도...class를 지정하지도 않는 것이다.

<TABLE class=my_table>요롷게 하나만 지정해놓고 그것을 활용하는 것이다.

왜냐면...

1. CSS Rebooting이 가장 쉬운게...아마도 데이타위주의 테이블...

아래처럼 하면 꽤 쉬워진다. 각각의 td를 여러 각도로 그룹핑을 해두면...여러모로 쉬워질수밖에 없다.

2. 웹 페이지의 정보나 소스를 브라우저에서 긁어가서 웹에디터에 넣기도 좋고

소스보기로 해당 소스를 카피해서 다른 데 이용하기도 쉬워진다.

<TD>에 속성이 없으면 그만큼 초보, 깡통들도 카피하기 쉬워진다.

한마디로....<TD>에 적용된 속성이 중요한게 아니라...<TD>내의 데이타가 중요한 것이다.

3. 오히려..위의 2가지가 나한테도 이익이다.

회사의 IR자료같은 것은 회사내의 사이트 대여섯 사이트에 꼭! 들어간다.

저러면...바깥 상황이 어떻든...<TABLE>과 CSS코드만 카피하면 된다.

 

 

 

class를 정의할 때...

p a {}            --><P>태그안의 모든 <A>태그

.mem a {}      --> mem이라는 class안의 모든 <A>태그

P .mem {}      --> <P>태그안의 모든 mem이라는 class를 가진 태그들

.ttt tr.www td {}       --> ttt라는 테이블안의 www라는 tr안의 td

이렇게 지정할 수 있다.

 

<style>

table.my_table {}

.my_table caption {}

.mytable tr{}

.mytable th {}

.mytable td {}

.mytable tbody {}

.mytable thead {}

.mytable tfoot {}

col.td1 {}

col.td2 {}

col.td3 {}

</style>

이렇게 지정하면 <TD>태그에 아무런 속성을 주지 않고도 TABLE을 만들 수 있다.

 

위 이미지의 예를 들어 설명하겠다.

 

1. <TABLE>에 CSS 적용하기.

<TABLE>태그는 그룹, 블록속성을 지닌 Object태그이다.

Object태그에 지정할 수 있는 width, margin, border, background를 지정한다.

.my_table {

     border-top:3px solid #69737C;

     margin-left:15px;margin-right:15px;margin-bottom:0px;

     width:560px;

     border-collapse:collapse;

}

2. THEAD, TBODY, TFOOT 구분, 정리하기

위 그림에서 주문일자, 결제수단이 배열된 TH들이 THEAD그룹으로 묶을 수 있다.

리스트의 내용이 반복되는 부분을 TBODY그룹으로

페이징 네비게이션부분을 TFOOT으로 나눌 수 있다.

3. THEAD

테이블의 상위그룹에 배치한다.

.mytable thead {}이나 .mytable th {}로 해도 된다. 

만약 thead그룹에 2줄의 row가 필요하다면...th와 td로 구분할 필요가 있다면...

.my_table thead th {}, .my_table thead td {} 이렇게 할 수 있다.

.my_table th {

     font-weight:bolder;color:#4D5B67;

     background-color:#BDBEC0;

     padding-top:6px;padding-bottom:6px;

     text-align:center;

     vertical-align:top;

}

 

4. TBODY

테이블의 중단그룹에 배치한다.

위의 경우엔 <th>태그를 써서 여러방법을 쓸 수 있지만...

<tfoot>에도 <td>가 존재하므로 .my_table tbody 로 해야한다.

.my_table tbody td {

     color:#494949;

     vertical-align:middle;

     border-bottom:1px solid #E0E0E0;

     padding-top:4px;padding-bottom:4px;

}

 

5. TFOOT

테이블의 하단그룹을 배치한다.

.my_table tfoot {} 으로 해야한다.

.my_table tfoot {padding-top:17px;padding-bottom:12px;word-spacing:9px;text-align:center;}
.my_table tfoot a:link {font-size:12px;color:#4F5B65;}
.my_table tfoot a:visited {font-size:12px;color:#4F5B65;}
.my_table tfoot a:active {font-size:12px;color:#4F5B65;}
.my_table tfoot a:hover {font-size:12px;color:#FA3333;}

 

6.COL

col태그는 같은 "행"에 있는 <td>를 그룹핑하는 태그이다.

위의 그림에서 모든 td는 가운데정렬이지만 주문상품이 배치되는 td행만 좌측정렬이다.

col {text-align:center}

col.good {text-align:left;}

 

col에 CSS를 정의하는 것은 

tr, td에 정의하는 것보다 나중순위, thead, tbody, tfoot에 정의하는 것보다 우선순위이다.

col태그에 CSS를 적용할 때는 위의 우선순위를 잘 따져보고 정의해야한다.

위의 예 3.THEAD를 예로 들자면

.my_table thead로 정의했다면 3번째 th는 좌측정렬되고

.my_table th로 정의했다면 3번째 th는 가운데정렬될 것이다.

 

수량에 bold처리를 하고 싶다면

col.num {font-weight:bolder;}라고 정의하고, 5번째 col에 <col class=num>을 지정하면 된다.

<col>

<col>

<col class=good>

<col>

<col class=num>

<col>

 

위의 그림 예에 적용한 HTML과 CSS원본입니다.

 

<style>
.my_table {
     border-top:3px solid #69737C;
     margin-left:15px;margin-right:15px;margin-bottom:0px;
     width:560px;
     border-collapse:collapse;
}

col {text-align:center}
col.good {text-align:left;}

.my_table th {
     font-size:12px;font-weight:bolder;color:#4D5B67;
     background-color:#BDBEC0;
     padding-top:6px;padding-bottom:6px;
     text-align:center;
     vertical-align:top;
}

.my_table tbody td {
     font-size:12px;color:#494949;
     vertical-align:middle;
     border-bottom:1px solid #E0E0E0;
     padding-top:4px;padding-bottom:4px;
}

.my_table tfoot {padding-top:17px;padding-bottom:12px;word-spacing:9px;text-align:center;}
.my_table tfoot a:link {font-size:12px;color:#4F5B65;}
.my_table tfoot a:visited {font-size:12px;color:#4F5B65;}
.my_table tfoot a:active {font-size:12px;color:#4F5B65;}
.my_table tfoot a:hover {font-size:12px;color:#FA3333;}
</style>

 

<table border=0 cellpadding=0 cellspacing=0 class=my_table>
<col>
<col>
<col class=good>
<col>
<col>
<col>
<thead>
<tr>
 <th>주문일자</th>
 <th>결제수단</th>
 <th>주문상품</th>
 <th>결제금액</th>
 <th>수량</th>
 <th>배송상태</th>
</tr>
</thead>
<tbody>
<tr>
 <td>2005-05-12</td>
 <td>뮤즈캐쉬</td>
 <td>버즈 3집 어쩌구저쩌구</td>
 <td>11,000</td>
 <td>1</td>
 <td>구매취소</td>
</tr>
<tr>
 <td>2005-05-12</td>
 <td>뮤즈캐쉬</td>
 <td>버즈 3집 어쩌구저쩌구</td>
 <td>11,000</td>
 <td>1</td>
 <td>구매취소</td>
</tr>
<tr>
 <td>2005-05-12</td>
 <td>뮤즈캐쉬</td>
 <td>버즈 3집 어쩌구저쩌구</td>
 <td>11,000</td>
 <td>1</td>
 <td>구매취소</td>
</tr>
</tbody>
<tfoot>
<td colspan=12>
 <a href="#"><img src=/images/common/btn_page_prev.gif></a>
 <a href="#">1</a>
 <a href="#">2</a>
 <a href="#">3</a>
 <a href="#">4</a>
 <a href="#">5</a>
 <a href="#">6</a>
 <a href="#">7</a>
 <a href="#">8</a>
 <a href="#">9</a>
 <a href="#">10</a>
 <a href="#"><img src=/images/common/btn_page_next.gif></a>
</td>
</tfoot>
</table>

 

추신:

절대적 경고!

아직까지 CSS 맨 처음에 td {}라고 해놓고

color. font-size, font-family, line-height 미리 정해놓고 쓰는 분들...

그럼 이 포스트에 있는 걸로 색상 바꾸고 글자크기바꾸고 그렇게 안됩니다.

태그셀렉터는 최소한으로....font-family정도만 정의하고 하는 것이 CSS코딩의 첫 발걸음!!!