구글와이드(336x280)_상단 2개


Table을 CSS로 제어하기 태그: html dhtml

Table CSS로 제어하기
2007.09.06 20:59
http://tong.nate.com/sjpotato/40555148
Table CSS로 제어하기. + HTML CSS
2006/05/12 17:02
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>

null



바보들의 영문법 카페(클릭!!)

오늘의 메모....

시사평론-정론직필 다음 카페
http://cafe.daum.net/sisa-1

바보들의 영문법 다음 카페
http://cafe.daum.net/babo-edu/

티스토리 내 블로그
http://earthly.tistory.com/

내 블로그에 있는 모든 글들과 자료에 대한 펌과 링크는 무제한 허용됩니다.
(단, 내 블로그에 덧글쓰기가 차단된 자들에게는 펌, 트랙백, 핑백 등이 일체 허용되지 않음.)

그리고 내 블로그 최근글 목록을 제목별로 보시려면....
바로 아래에 있는 이전글 목록의 최근달을 클릭하시면 됩니다.
그러면 제목을 보고 편하게 글을 골라 보실 수 있습니다.

그리고 내 블로그내 글을 검색하시려면 아래 검색버튼을 이용하시면 됩니다.


가가챗창

flag_Visitors

free counters