● TABLE 넓이 고정테그

style="table-layout:fixed;" -> 상하좌우 모두 고정

● 테이블 크기와 관계없이 늘어나게

<td width="115" nowrap> 

--------------------------------------------------------------------------------------

긴 문자열을 줄바꿈이 되지 않고 테이블의 길이에 맞게 보이도록해서 마치 테이블 길이에 맞게

글자를 자른것처럼 효과를 냅니다.

테이블 태그에 style="table-layout:fixed"를 넣어주고 적용할 TD 태그에 nowrap 옵션을 넣어줍니다.

<table border='0' cellpadding='0' cellspacing='0' width='200' style="table-layout:fixed">
  <tr>
    <td width="15"><img src="images/folder_s03_06.gif" align="absmiddle"></td>
    <td style="text-align:justify;" nowrap>긴 문자열을 줄바꿈이 되지 않고 테이블의 길이에 맞게 보이기</td>
  </tr>
</table>

---------------------------------------------------------------------------------------

● 가이드 라인 잡기(table-layout:fixed)

코딩을 할 때 테이블을 이용해서 위치를 잡지 말라고 합니다. 레이어를 이용해서 위치를 잡으라는 것이죠. 외국 사이트 중에 이렇게 한 곳이 있기는 한 것 같습니다. 하지만 대부분의 사이트들이 테이블을 이용해서 위치를 잡아서 코딩을 하죠.

저 또한 대부분 테이블을 사용합니다.

그리고 페이지를 코딩하는데 테이블을 워낙 많이 사용하기 때문에 테이블에 대한 Tip을 알아 두면 좋으리라 생각합니다.

<table style="table-layout:fixed">

이것을 사용하는 방법을 익혀 두시면 아주 좋을 것 같습니다. 이 코드를 사용하는 대부분은 일정 크기를 벗어나지 않게 하는데에서인 것 같습니다. 이 코드는 테이블의 크기를 고정 시켜 주기 때문에 글자들이 많이져도 테이블을 늘어나지 않고 글자가 잘려 집니다.

하지만 이 코드의 진정한 기능은 최적화에 있습니다. 테이블을 고정시키기 때문에 브라우저에서 계산을 하지 않고 코드에 있는 그대로의 크기를 읽습니다. 그래서 부하를 줄여 줍니다. 수백 수천 라인에서 이 코드를 사용하고 하지 않고를 비교해 보면 알 수 있을 것입니다.

마지막으로 이 코드는 padding과 연관해서 아주 유용합니다.

테이블에서 td가 2개 이상일 때 한 td에 width=100  style=padding-left:20을 주었다고 하면 실제 td의 width는 120이 됩니다. 하지만 위의 코드를 사용하면 width에 padding이 영향을 미치는 일은 없을 것입니다.

요약하면,

table-layout:fixed는 이렇기 때문에 유용합니다.

1. 부하를 줄여줍니다. 페이지 전환이 빠르겠죠.

2. width가 padding의 영향을 받지 않기 때문에 쉽고 정확한 코딩이 가능합니다.

3. 내용에 의해서 테이블이 늘어나지 않습니다. 게시판 유형에서 유용할 것 입니다.