2008. 10. 17. 16:58
Web
nowrap 과 TABLE-layout ( 테이블 고정 태그) HTML
● TABLETABLE 넓이 고정테그
style="table-layout:fixed;" -> 상하좌우 모두 고정
● 테이블 크기와크기와 관계없이 늘어나게
<td width="115" nowrap>
--------------------------------------------------------------------------------------
긴 문자열을 줄바꿈이줄바꿈이 되지 않고 테이블의 길이에 맞게 보이도록해서 마치 테이블 길이에 맞게 글자를글자를 자른것처럼 효과를 냅니다.
테이블 태그에 style="table-layout:fixed"를 넣어주고 적용할 TD 태그에 nowrapnowrap 옵션을 넣어줍니다.
<table border='0' cellpadding='0' cellspacing='0' width='200' style="table-layout:fixed">
<tr><tr>
<td width="15"><img src="images/folder_s03_06.gif" align="absmiddle"></td>
<td style="text-align:justify;" nowrap>긴nowrap>긴 문자열을 줄바꿈이 되지 않고 테이블의 길이에 맞게 보이기</td>
</tr>
</table></table>
---------------------------------------------------------------------------------------
● 가이드 라인 잡기(table-layout:fixed)
코 딩을 할 때때 테이블을 이용해서 위치를 잡지 말라고 합니다. 레이어를 이용해서 위치를 잡으라는 것이죠.것이죠. 외국 사이트 중에 이렇게 한 곳이 있기는 한 것 같습니다. 하지만 대부분의대부분의 사이트들이 테이블을 이용해서 위치를 잡아서 코딩을 하죠.
저 또한 대부분 테이블을테이블을 사용합니다.
그리고 페이지를 코딩하는데 테이블을 워낙 많이 사용하기 때문에 테이블에 대한 Tip을 알아 두면 좋으리라 생각합니다.
<table style="table-layout:fixed">
이 것을 사용하는 방법을 익혀 두시면 아주아주 좋을 것 같습니다. 이 코드를 사용하는 대부분은 일정 크기를 벗어나지 않게않게 하는데에서인 것 같습니다. 이 코드는 테이블의 크기를 고정 시켜 주기 때문에 글자들이글자들이 많이져도 테이블을 늘어나지 않고 글자가 잘려 집니다.
하 지만 이 코드의코드의 진정한 기능은 최적화에 있습니다. 테이블을 고정시키기 때문에 브라우저에서 계산을 하지 않고않고 코드에 있는 그대로의 크기를 읽습니다. 그래서 부하를 줄여 줍니다. 수백 수천 라인에서라인에서 이 코드를 사용하고 하지 않고 비교해 보면 알 수 있을 것입니다.
마지막으로 이 코드는 padding과 연관해서 아주 유용합니다.
테이블에서 td가 2개 이상일2개 이상일 때 한 td에 width=100 style=padding-left:20을 주었다고 하면 실제 td의 width는 120이 됩니다.됩니다. 하지만 위의 코드를 사용하면 width에 padding이 영향을 미치는 일은 없을 것입니다.것입니다.
요약하면,
table-layout:fixed는 이렇기 때문에 유용합니다.
1. 부하를 줄여줍니다.줄여줍니다. 페이지 전환이 빠르겠죠.
2. width가 padding의 영향을 받지 않기 때문에 쉽고쉽고 정확한 코딩이 가능합니다.
3. 내용에 의해서 테이블이 늘어나지 않습니다. 게시판 유형에서유형에서 유용할 것 입니다
● TABLETABLE 넓이 고정테그
style="table-layout:fixed;" -> 상하좌우 모두 고정
● 테이블 크기와크기와 관계없이 늘어나게
<td width="115" nowrap>
--------------------------------------------------------------------------------------
긴 문자열을 줄바꿈이줄바꿈이 되지 않고 테이블의 길이에 맞게 보이도록해서 마치 테이블 길이에 맞게 글자를글자를 자른것처럼 효과를 냅니다.
테이블 태그에 style="table-layout:fixed"를 넣어주고 적용할 TD 태그에 nowrapnowrap 옵션을 넣어줍니다.
<table border='0' cellpadding='0' cellspacing='0' width='200' style="table-layout:fixed">
<tr><tr>
<td width="15"><img src="images/folder_s03_06.gif" align="absmiddle"></td>
<td style="text-align:justify;" nowrap>긴nowrap>긴 문자열을 줄바꿈이 되지 않고 테이블의 길이에 맞게 보이기</td>
</tr>
</table></table>
---------------------------------------------------------------------------------------
● 가이드 라인 잡기(table-layout:fixed)
코 딩을 할 때때 테이블을 이용해서 위치를 잡지 말라고 합니다. 레이어를 이용해서 위치를 잡으라는 것이죠.것이죠. 외국 사이트 중에 이렇게 한 곳이 있기는 한 것 같습니다. 하지만 대부분의대부분의 사이트들이 테이블을 이용해서 위치를 잡아서 코딩을 하죠.
저 또한 대부분 테이블을테이블을 사용합니다.
그리고 페이지를 코딩하는데 테이블을 워낙 많이 사용하기 때문에 테이블에 대한 Tip을 알아 두면 좋으리라 생각합니다.
<table style="table-layout:fixed">
이 것을 사용하는 방법을 익혀 두시면 아주아주 좋을 것 같습니다. 이 코드를 사용하는 대부분은 일정 크기를 벗어나지 않게않게 하는데에서인 것 같습니다. 이 코드는 테이블의 크기를 고정 시켜 주기 때문에 글자들이글자들이 많이져도 테이블을 늘어나지 않고 글자가 잘려 집니다.
하 지만 이 코드의코드의 진정한 기능은 최적화에 있습니다. 테이블을 고정시키기 때문에 브라우저에서 계산을 하지 않고않고 코드에 있는 그대로의 크기를 읽습니다. 그래서 부하를 줄여 줍니다. 수백 수천 라인에서라인에서 이 코드를 사용하고 하지 않고 비교해 보면 알 수 있을 것입니다.
마지막으로 이 코드는 padding과 연관해서 아주 유용합니다.
테이블에서 td가 2개 이상일2개 이상일 때 한 td에 width=100 style=padding-left:20을 주었다고 하면 실제 td의 width는 120이 됩니다.됩니다. 하지만 위의 코드를 사용하면 width에 padding이 영향을 미치는 일은 없을 것입니다.것입니다.
요약하면,
table-layout:fixed는 이렇기 때문에 유용합니다.
1. 부하를 줄여줍니다.줄여줍니다. 페이지 전환이 빠르겠죠.
2. width가 padding의 영향을 받지 않기 때문에 쉽고쉽고 정확한 코딩이 가능합니다.
3. 내용에 의해서 테이블이 늘어나지 않습니다. 게시판 유형에서유형에서 유용할 것 입니다