colgroup과 col의 설명

<COLGROUP> </COLGROUP> 

이것은 <COL>과 유사한 기능인데, <COL>이 각 칸에 대해 개별적으로 속성을 지정하는 특성이 있는 반면 이것은 모든 칸에 대해 같은 속성을 지정하는 데에 편리하다.

<COL> </COL> 

<COL> ALIGN, VALIGN, WIDTH, SPAN
이 요소는 <TABLE>의 각 칸column의 속성을 다양하게 그리고 일괄적으로 지정한다.

ALIGN="center, justify, left, right"
이 속성은 칸안의 글의 좌우위치를 지정한다.

VALIGN="baseline, bottom, middle, top"
이 속성은 칸안의 글의 상하위치를 지정한다.

WIDTH="숫자"
칸의 길이를 지정한다.

SPAN="숫자"
ALIGN, VALIGN, WIDTH에서 지정된 사항이 몇개의 칸에 적용될 것인가를 결정한다.

subject Table CSS로 제어하기

cellspacing 셀간의 간격.
cellpadding 경계선과 컨텐츠의 간격.

기존에 사용하던 방식.

<table cellpadding="0" cellspacing="0" border="1">
    <tr>
        <td>example</td>
    </tr>
</table>

자 이제부터는 CSS로 제어하자.

table { border-collapse: collapse; border: 1px solid #000000; }
table th, table td { padding: 0; }

<table>
    <tr>
        <td>example</td>
    </tr>
</table>

<table> 엘리먼트는 기본적으로 복잡한 width calculation algorithm을 거쳐서 랜더링되는데 이 알고리즘은 셀안의 컨텐츠와 셀에 지정된 width를 바탕으로 최적의 테이블 레이아웃을 계산하는 것이다. 대부분 <table>과 <td>에 정확히 width를 지정을 해도 지정한 대로 width가 나오지 않는 경험을 한 적이 있을 것이고 이때문에 <img src="blank.gif" width="100"> 을 이용해서 width를 강제로 고정하는 방법도 본적이 있을 것이다. 이렇게 정확한 폭을 지정하기가 힘들고 복잡한 알고리즘을 거쳐서 랜더링 속도가 떨어지게 되는데 이를 table-layout이라는 속성을 이용해서 보완 할 수 있다.
table-layout 속성의 기본 값은 auto인데 기본 값일 때에는 테이블이 많이 중첩될 수록 랜더링 속도도 떨어지고 정확한 width 적용이 힘들다. 이 속성의 값을 fixed로 하게 되면 width 계산과정도 없고 정확하게 지정된 값으로 width가 정해지게 된다.

table { table-layout: fiexd; }

table-layout: fixed를 사용할때 주의 해야 할 점은 이 속성이 적용된 테이블은 셀의 너비를 첫번째 줄의 셀의 너비에 맞게 강제로 정해진다는 것이다. 즉, 첫번째 줄의 속성 외의 다른 줄의 width 값은 무시가 되고, 특정 값이 정해 지지 않으면 정해지지 않은 셀의 너비 만큼 균등하게 나누어서 셀의 너비가 정해진다. 만약에 첫번째 줄에 colspan등을 사용하여서 모든 셀의 너비를 지정할 수 없을 때에는 <colgroup> 엘리먼트와 <col> 엘리먼트를 이용해서 너비를 지정해 주게 된다.

<table style="width: 700px">
    <colgroup>
        <col style="width: 100px">
        <col style="width: 200px">
        <col style="width: 400px">
    </colgroup>
    <tr>
        <td colspan="2" style="200px">colspan이 적용되면 원하는 너비 지정을 못함. 그냥 무시됨 ...</td>
        <td>Cell 1- 2</td>
    </tr>
    <tr>
        <td style="width: 200px">Cell 2- 1</td>
        <td style="width: 200px">Cell 2- 2</td>
        <td style="width: 300px">Cell 2- 3</td>
    </tr>
</table>

[출처] [본문스크랩] Table CSS로 제어하기.|작성자 메멘토