table-layout Property

Home > Document > CSS > Table > table-layout

table-layout Property

일반적인 테이블의 경우 테이블의 길이가 매우 길어지게 되면(데이타가 많아진다고 해도 되겠군요.) 테이블을 화면상에 render 하기 위해서 테이블을 계산하는데 제법 시간이 걸리게 됩니다. 테이블이 도대체 얼마나 길길래 그러는지 궁금하다면 여기를 한 번 클릭해 보시져. 아니 궁금하지 않더라도 그렇게 하시져... 설명을 좀 해야 되니까요.

왼쪽이 이 페이지에서 배우는 table-layout 값을 fixed 로 지정한 테이블이고, 오른쪽은 table-layout Property를 사용하지 않은 테이블 입니다. table-layout : fixed 를 사용하지 않은 테이블의 경우 Parser가 전체 테이블을 다 계산 한 다음 브라우저 창에 render하게 되지만 table-layout : fixed 를 사용한 테이블은 Cell의 가로,세로 폭이 이미 정해져(fixed)있기 때문에 계산도 빠를 뿐더러 전체가 Parsing되지 않더라도 계산 된 부분 부터 render 시키기 때문에 화면에 render되는 속도가 빨라지게 됩니다. 다음은 두 가지 경우의 장단점에 대한 비교입니다.

    table-layout : fixed 사용
  • 계산이 빨라진다.
  • 계산된 앞 부분 부터 화면에 render 한다.
  • Cell의 내용물이 넘쳐도 Cell 크기에 영향을 주지 않는다.
    table-layout : fixed 미사용
  • Cell size를 일일이 계산하므로 느리다.
  • 계산이 끝난 후에야 화면에 나타난다.
  • Cell 속의 내용물이 Cell의 가로,세로 크기에 영향을 준다.
  [표 보는 방법]
table-layout Property
Value auto | fixed | Inherit
Initial auto
Applies to 'table' and 'inline-table' elements (table Tag 에 지정한다.)
Inherited no
Percentages N/A
Media Visual
HTML Syntax { table-layout: sLayout }
Scripting object.style.tableLayout [ = sLayout ]



CSS Scripting
onMouseMove="this.style.tableLayout='fixed';"


table-layout 사용하는 방법

1. Table Tag의 첫 번째 TR Tag 속의 TD Tag에 지정하는 방법 (약간의 노가다성이 있음.)
이 경우는 첫 번째 TR Tag 의 TD Tag 에 width 속성을 사용하여 가로 세로 크기를 지정하고 각 TR Tag에 height 속성을 사용하여 Cell 높이를 지정합니다.

출력결과
R1 C1 R1 C2 R1 C3 R1 C4 R1 C5
R2 C1 R2 C2 R2 C3 R2 C4 R2 C5
R3 C1 R3 C2 R3 C3 R3 C4 R3 C5

소스 보기

2. Colgroup과 Col Element를 사용하는 방법 (훨씬 우아한 방법)
이 방법은 HTML 메뉴의 고급과정 / Colgroup, Rowgroup 을 사용하여 width, height 뿐만이 아니라 text-align 등의 CSS Property 들을 지정하는 방법입니다.

출력결과
R1 C1 R1 C2 R1 C3 R1 C4 R1 C5
R2 C1 R2 C2 R2 C3 R2 C4 R2 C5
R3 C1 R3 C2 R3 C3 R3 C4 R3 C5

소스 보기

먼저 COL element를 3개 사용하여 전체 5개의 column을 각각 1개 2개 2개로 지정하고 3개의 COL element를 Colgroup element로 묶었습니다. 그리고 COL element 에 width를 지정하는데span이 2개 이상일 때 주의해야 할 점은 COL에 지정된 width는 전체를 합친 width가 아니고, column 각각의 width가 됩니다. 예를들어 span이 2개이고 지정한 width가 20%이면 2 X 20% = 40% 로 COL 의 width가 지정된다는 뜻 입니다. 그리고 TBODY를 사용하여 세 Group의 TR 을 묶은 다음 Cell의 높이를 지정하였습니다. Cell 의 높이는 Colgroup Tag 속에 지정해도 되는데 Colgroup과 Tbody에 동시에 height Property가 지정이 되면 물론 Tbody에 지정된 값이 우선합니다.

3. Cell의 width를 지정하지 않는 경우와 내용물이 Cell을 넘치는 경우
이 때는 모든 Cell의 width와 height가 기본 값으로 균등하게 분할 됩니다. 만약에 Cell의 가로,세로 크기가 지정된 테이블에서 table-layout : fixed 로 지정하고 Cell 속의 내용물이 Cell크기를 넘치면... 아래의 첫 번째 Row와 같이 짤립니다. 하지만 높이를 지정하지 않을 경우 두 번째 Row 처럼 가로로는 늘어나지 못하지만 아래로 높이가 늘어나게 되져...

출력결과
R1 C1 R1 C2 R1 C3 overflow overflow overflow overflow overflow overflow overflow R1 C5 R1 C6 R1 C7 R1 C8
R2 C1 R2 C2 R2 C3 overflow overflow overflow overflow overflow overflow overflow R2 C5 R2 C6 R2 C7 R2 C8

소스 보기



이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색