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>