위에 캡션이 있는 테이블의 다이어그램.
이 장에서는 CSS에서 테이블에 대한 처리 모델을 정의합니다. 이 처리 모델의 일부는 레이아웃입니다. 레이아웃에 대해, 이 장에서는 두 가지 알고리즘을 소개합니다. 첫 번째는 고정 테이블 레이아웃 알고리즘으로 잘 정의되어 있지만, 두 번째인 자동 테이블 레이아웃 알고리즘은 이 명세에서 완전히 정의되지 않았습니다.
자동 테이블 레이아웃 알고리즘의 경우, 널리 배포된 구현 중 일부는 비교적 높은 호환성을 달성했습니다.
테이블 레이아웃은 데이터를 표 형식으로 표현하는 데 사용할 수 있습니다. 작성자는 문서 언어에서 이러한 관계를 지정하고, CSS 2.2를 사용하여 해당 표현을 지정할 수 있습니다.
시각적 매체에서 CSS 테이블은 특정 레이아웃을 구현하는 데에도 사용할 수 있습니다. 이 경우, 작성자는 문서 언어에서 테이블 관련 요소를 사용하지 말고, 원하는 레이아웃을 달성하기 위해 관련 구조적 요소에 CSS를 적용해야 합니다.
작성자는 테이블을 직사각형 셀 그리드로 시각적으로 포맷할 수 있습니다. 셀의 행과 열은 행 그룹 및 열 그룹으로 구성될 수 있습니다. 행, 열, 행 그룹, 열 그룹 및 셀 주위에 테두리를 그릴 수 있습니다 (CSS 2.2에는 두 가지 테두리 모델이 있습니다). 작성자는 셀 내에서 데이터를 수직 또는 수평으로 정렬하거나, 특정 행 또는 열의 모든 셀의 데이터를 정렬할 수 있습니다.
다음은 HTML 4로 설명된 간단한 3행, 3열 테이블입니다:
<TABLE> <CAPTION>이것은 간단한 3x3 테이블입니다</CAPTION> <TR id="row1"> <TH>Header 1 <TD>Cell 1 <TD>Cell 2 <TR id="row2"> <TH>Header 2 <TD>Cell 3 <TD>Cell 4 <TR id="row3"> <TH>Header 3 <TD>Cell 5 <TD>Cell 6 </TABLE>
이 코드는 하나의 테이블(TABLE 요소), 세 개의 행(TR 요소), 세 개의 헤더 셀(TH 요소), 그리고 여섯 개의 데이터 셀(TD 요소)을 생성합니다. 이 예제의 세 열은 암시적으로 지정됩니다: 테이블에는 헤더 및 데이터 셀이 필요로 하는 만큼의 열이 있습니다.
다음 CSS 규칙은 헤더 셀의 텍스트를 가로로 중앙에 정렬하고, 헤더 셀의 텍스트를 굵은 글꼴로 표시합니다:
th { text-align: center; font-weight: bold }
다음 규칙은 헤더 셀의 텍스트를 기준선에 정렬하고, 각 데이터 셀에서 텍스트를 수직으로 중앙에 정렬합니다:
th { vertical-align: baseline }
td { vertical-align: middle }
다음 규칙은 상단 행이 3px 실선 파란색(border)으로 둘러싸이고, 다른 각 행이 1px 실선 검은색(border)으로 둘러싸이도록 지정합니다:
table { border-collapse: collapse }
tr#row1 { border: 3px solid blue }
tr#row2 { border: 1px solid black }
tr#row3 { border: 1px solid black }
그러나 행이 만나는 곳에서 행 주위의 테두리가 겹치는 것을 주목하세요. row1과 row2 사이의 테두리 색상(검은색 또는 파란색)과 두께(1px 또는 3px)는 무엇일까요? 이에 대해서는 테두리 충돌 해결 섹션에서 논의합니다.
다음 규칙은 테이블 캡션을 테이블 위에 배치합니다:
caption { caption-side: top }
위 예제는 CSS가 HTML 4 요소와 어떻게 작동하는지 보여줍니다; HTML 4에서 다양한 테이블 요소(TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH, TD)의 의미는 잘 정의되어 있습니다. 다른 문서 언어(XML 응용 프로그램 등)에서는 미리 정의된 테이블 요소가 없을 수 있습니다. 따라서, CSS 2.2에서는 작성자가 "매핑"을 통해 문서 언어 요소를 테이블 요소로 매핑할 수 있도록 허용합니다. 예를 들어, 다음 규칙은 FOO 요소를 HTML TABLE 요소처럼 작동하게 하고, BAR 요소를 CAPTION 요소처럼 작동하게 만듭니다:
FOO { display : table }
BAR { display : table-caption }
다음 섹션에서 다양한 테이블 요소를 논의합니다. 이 명세에서, 테이블 요소라는 용어는 테이블 생성에 관련된 모든 요소를 나타냅니다. 내부 테이블 요소는 행, 행 그룹, 열, 열 그룹 또는 셀을 생성하는 요소를 의미합니다.
CSS 테이블 모델은 HTML4 테이블 모델을 기반으로 하며, 테이블의 구조가 테이블의 시각적 레이아웃과 밀접하게 평행합니다. 이 모델에서 테이블은 선택적 캡션과 셀의 여러 행으로 구성됩니다. 테이블 모델은 작성자가 문서 언어에서 열이 아닌 행을 명시적으로 지정하기 때문에 "행 우선(row primary)"으로 간주됩니다. 모든 행이 지정된 후 열이 파생됩니다. 예를 들어 각 행의 첫 번째 셀은 첫 번째 열에 속하고, 두 번째 셀은 두 번째 열에 속하는 식입니다. 행과 열은 구조적으로 그룹화될 수 있으며, 이 그룹화는 프레젠테이션(예: 행 그룹 주위에 테두리를 그리는 방식)에서 반영될 수 있습니다.
따라서 테이블 모델은 테이블, 캡션, 행, 행 그룹(헤더 그룹 및 풋터 그룹 포함), 열, 열 그룹 및 셀로 구성됩니다.
CSS 모델은 문서 언어가 이러한 구성 요소 중 각각에 해당하는 요소를 포함하도록 요구하지 않습니다. 미리 정의된 테이블 요소가 없는 문서 언어(XML 응용 프로그램 등)의 경우, 작성자는 문서 언어 요소를 테이블 요소로 매핑해야 합니다. 이는 'display' 속성을 사용하여 수행됩니다. 다음 'display' 값은 임의의 요소에 테이블 포맷팅 규칙을 할당합니다:
이러한 'display' 값을 가진 대체 요소는 레이아웃 중에 해당 주어진 디스플레이 유형으로 처리됩니다. 예를 들어, 'display: table-cell'로 설정된 이미지는 사용 가능한 셀 공간을 채우며, 그 크기는 일반 셀과 마찬가지로 테이블 크기 조정 알고리즘에 기여할 수 있습니다.
'display'가 'table-column' 또는 'table-column-group'으로 설정된 요소는 렌더링되지 않습니다 ('display: none'인 것처럼), 하지만 열에 특정 스타일을 유도할 수 있는 속성을 가질 수 있기 때문에 유용합니다.
부록의 HTML4 기본 스타일 시트는 HTML4에서 이러한 값의 사용을 보여줍니다:
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
사용자 에이전트는 HTML 테이블 요소에 대해 이러한 'display' 속성 값을 무시할 수 있습니다. 이는 HTML 테이블이 이전 버전과의 호환성을 위해 의도된 다른 알고리즘을 사용하여 렌더링될 수 있기 때문입니다. 그러나 이는 HTML의 다른 비테이블 요소에서 'display: table'을 사용하는 것을 권장하지 않는다는 의미는 아닙니다.
HTML 이외의 문서 언어는 CSS 2.21 테이블 모델에 포함된 모든 요소를 포함하지 않을 수 있습니다. 이러한 경우, 테이블 모델이 작동하도록 "누락된" 요소를 가정해야 합니다. 테이블 요소는 자동으로 자신 주위에 필요한 익명 테이블 객체를 생성하며, 최소한 'table'/'inline-table' 요소, 'table-row' 요소, 그리고 'table-cell' 요소에 해당하는 세 개의 중첩된 객체로 구성됩니다. 누락된 요소는 다음 규칙에 따라 익명 객체(예: 시각적 테이블 레이아웃의 익명 박스)를 생성합니다:
이 규칙을 위해 다음 용어가 정의됩니다:
이 규칙을 위해, 흐름에서 벗어난 요소는 너비와 높이가 0인 인라인 요소로 표현됩니다. 이들의 포함 블록은 적절히 선택됩니다.
다음 단계는 세 단계로 수행됩니다.
이 XML 예제에서, 'table' 요소는 HBOX 요소를 포함한다고 가정합니다:
<HBOX> <VBOX>George</VBOX> <VBOX>4287</VBOX> <VBOX>1998</VBOX> </HBOX>
연관된 스타일 시트는 다음과 같습니다:
HBOX { display: table-row }
VBOX { display: table-cell }
이 예제에서, 세 개의 'table-cell' 요소는 ROW에 텍스트를 포함한다고 가정합니다. 텍스트는 시각적 형식 모델에서 설명된 대로 익명 인라인 박스로 캡슐화됩니다:
<STACK> <ROW>This is the <D>top</D> row.</ROW> <ROW>This is the <D>middle</D> row.</ROW> <ROW>This is the <D>bottom</D> row.</ROW> </STACK>
스타일 시트는 다음과 같습니다:
STACK { display: inline-table }
ROW { display: table-row }
D { display: inline; font-weight: bolder }
테이블 셀은 행 및 열 두 가지 컨텍스트에 속할 수 있습니다. 그러나 소스 문서에서 셀은 항상 행의 자손이며, 열의 자손이 아닙니다. 그럼에도 불구하고 셀의 일부 속성은 열에 속성을 설정함으로써 영향을 받을 수 있습니다.
다음 속성은 열 및 열 그룹 요소에 적용됩니다:
다음은 열에 속성을 설정하는 스타일 규칙의 몇 가지 예입니다. 첫 번째와 두 번째 규칙은 함께 HTML 4의 "rules" 속성에 "cols" 값을 구현합니다. 세 번째 규칙은 "totals" 열을 파란색으로 설정하며, 마지막 두 규칙은 고정 레이아웃 알고리즘을 사용하여 열을 고정 크기로 만드는 방법을 보여줍니다.
col { border-style: none solid }
table { border-style: hidden }
col.totals { background: blue }
table { table-layout: fixed }
col.totals { width: 5em }
시각적 형식 모델의 관점에서, 테이블은 블록 레벨 요소('display: table') 또는 인라인 레벨 요소('display: inline-table')처럼 동작할 수 있습니다.
두 경우 모두 테이블은 테이블 래퍼 박스라는 주요 블록 컨테이너 박스를 생성하며, 이 박스는 테이블 박스 자체와 캡션 박스(문서 순서대로)를 포함합니다. 테이블 박스는 테이블의 내부 테이블 박스를 포함하는 블록 레벨 박스입니다. 캡션 박스는 자체 콘텐츠, 패딩, 여백 및 테두리 영역을 유지하는 주요 블록 레벨 박스이며, 테이블 래퍼 박스 내부에서 일반 블록 박스처럼 렌더링됩니다. 캡션 박스가 테이블 박스 앞에 배치될지 또는 뒤에 배치될지는 아래에서 설명된 'caption-side' 속성에 의해 결정됩니다.
'display: table'의 경우 테이블 래퍼 박스는 블록 레벨이며, 'display: inline-table'의 경우 인라인 레벨입니다. 테이블 래퍼 박스는 블록 포맷팅 컨텍스트를 설정하며, 테이블 박스는 테이블 포맷팅 컨텍스트를 설정합니다. 'inline-table'의 기준선 수직 정렬을 수행할 때는 테이블 래퍼 박스가 아닌 테이블 박스가 사용됩니다. 테이블 래퍼 박스의 너비는 내부 테이블 박스의 테두리 가장자리 너비이며, 이는 섹션 17.5.2에 설명되어 있습니다. 테이블의 'width'와 'height'에 대한 백분율은 테이블 래퍼 박스 자체가 아닌, 테이블 래퍼 박스의 포함 블록을 기준으로 합니다.
테이블 요소의 'position', 'float', 'margin-*', 'top', 'right', 'bottom', 'left' 속성의 계산된 값은 테이블 박스가 아닌 테이블 래퍼 박스에 사용됩니다. 상속되지 않는 속성의 다른 모든 값은 테이블 래퍼 박스가 아닌 테이블 박스에 사용됩니다. (테이블 요소의 값이 테이블 및 테이블 래퍼 박스에 사용되지 않는 경우, 초기값이 대신 사용됩니다.)
위에 캡션이 있는 테이블의 다이어그램.
| 이름: | caption-side |
|---|---|
| 값: | top | bottom | inherit |
| 초기값: | top |
| 적용 대상: | 'table-caption' 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 명시된 대로 |
이 속성은 테이블 박스와 관련하여 캡션 박스의 위치를 지정합니다. 값의 의미는 다음과 같습니다:
참고: CSS2는 다른 너비 및 수평 정렬 동작을 설명했습니다. 이 동작은 CSS3에서 이 속성의 'top-outside' 및 'bottom-outside' 값으로 도입될 예정입니다.
캡션 박스 내에서 캡션 콘텐츠를 수평으로 정렬하려면 'text-align' 속성을 사용하세요.
다음 예제에서 'caption-side' 속성은 캡션을 테이블 아래에 배치합니다. 캡션은 테이블의 부모만큼 넓어지며, 캡션 텍스트는 왼쪽 정렬됩니다.
caption { caption-side: bottom;
width: auto;
text-align: left }
내부 테이블 요소는 테이블 박스가 설정하는 테이블 포맷팅 컨텍스트에 참여하는 직사각형 박스를 생성합니다. 이 박스는 콘텐츠와 테두리를 가지며, 셀은 패딩도 가질 수 있습니다. 내부 테이블 요소는 여백이 없습니다.
이 박스의 시각적 레이아웃은 직사각형이며 불규칙한 행과 열의 그리드에 의해 결정됩니다. 각 박스는 다음 규칙에 따라 하나 이상의 그리드 셀을 차지합니다. 이러한 규칙은 HTML 4 또는 이전 HTML 버전에 적용되지 않습니다. HTML은 행 및 열 범위에 자체 제한을 부과합니다.
테두리 중첩 모델에서 행, 열, 행 그룹, 열 그룹의 가장자리는 셀 테두리의 중심에 있는 가상의 그리드 선과 일치합니다. (따라서 이 모델에서는 행이 테이블을 정확히 덮어 간격이 없으며, 열도 마찬가지입니다.) 반면 분리된 테두리 모델에서는 가장자리가 셀의 테두리 가장자리와 일치합니다. (따라서 이 모델에서는 'border-spacing' 속성에 해당하는 행, 열, 행 그룹 또는 열 그룹 사이에 간격이 있을 수 있습니다.)
참고. 테이블 셀의 위치 지정 및 플로팅은 9.7 섹션의 규칙에 따라 테이블 셀이 아니게 만들 수 있습니다. 플로팅이 사용될 때, 익명 테이블 객체에 대한 규칙은 익명 셀 객체를 생성할 수도 있습니다.
다음은 규칙 5를 설명하는 예제입니다. 다음 부적합한 (X)HTML 스니펫은 충돌하는 셀을 정의합니다:
<table> <tr><td>1 </td><td rowspan="2">2 </td><td>3 </td><td>4 </td></tr> <tr><td colspan="2">5 </td></tr> </table>
사용자 에이전트는 셀을 시각적으로 겹치게 하거나, 시각적 겹침을 피하기 위해 셀을 이동시키는 두 가지 방식 중 하나를 자유롭게 선택할 수 있습니다.
잘못된 HTML 테이블의 두 가지 렌더링 방식.
각 테이블 셀의 배경을 찾기 위해, 서로 다른 테이블 요소는 여섯 개의 겹쳐진 레이어에 있다고 생각할 수 있습니다. 한 레이어의 요소에 설정된 배경은 그 위의 레이어가 투명한 배경을 가지고 있는 경우에만 보이게 됩니다.
테이블 레이어의 구조.
"누락된 셀"은 요소나 의사 요소에 의해 차지되지 않은 행/열 그리드의 셀입니다. 누락된 셀은 익명 테이블 셀 박스가 그리드에서 해당 위치를 차지하는 것처럼 렌더링됩니다.
다음 예제에서, 첫 번째 행에는 네 개의 비어 있지 않은 셀이 있지만, 두 번째 행에는 하나의 비어 있지 않은 셀만 있습니다. 따라서 첫 번째 행의 셀이 이 행으로 확장되는 경우를 제외하고 테이블 배경이 비어 있는 셀을 통해 보입니다. 다음 HTML 코드와 스타일 규칙은 다음과 같습니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>테이블 예제</TITLE>
<STYLE type="text/css">
TABLE { background: #ff0; border: solid black;
empty-cells: hide }
TR.top { background: red }
TD { border: solid black }
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR CLASS="top">
<TD> 1
<TD rowspan="2"> 2
<TD> 3
<TD> 4
<TR>
<TD> 5
<TD>
</TABLE>
</BODY>
</HTML>
다음과 같이 포맷될 수 있습니다:
하단 행에 빈 셀이 있는 테이블.
테이블이 'border-collapse: separate'를 가지는 경우, 'border-spacing' 속성에 의해 주어진 영역의 배경은 항상 테이블 요소의 배경입니다. 분리된 테두리 모델을 참조하세요.
CSS는 테이블에 대한 "최적" 레이아웃을 정의하지 않습니다. 이는 많은 경우에 최적의 기준이 개인 취향에 따라 달라지기 때문입니다. CSS는 사용자 에이전트가 테이블을 레이아웃할 때 반드시 준수해야 하는 제약을 정의합니다. 사용자 에이전트는 원하는 알고리즘을 사용할 수 있으며 "고정 레이아웃 알고리즘"이 선택되지 않은 경우, 렌더링 속도를 정밀도보다 선호할 자유가 있습니다.
이 섹션은 섹션 10.3에서 설명된 너비 계산 규칙을 재정의합니다. 특히, 테이블의 여백이 '0'으로 설정되고 너비가 'auto'로 설정된 경우, 테이블은 자동으로 포함 블록을 채우도록 크기가 조정되지 않습니다. 그러나 테이블의 'width'에 대한 계산된 값이 (아래에 제공된 알고리즘 또는 적절한 경우 다른 사용자 에이전트 종속 알고리즘을 사용하여) 결정되면 섹션 10.3의 다른 부분이 적용됩니다. 예를 들어, 테이블은 왼쪽과 오른쪽 여백을 'auto'로 설정하여 중앙에 배치할 수 있습니다.
CSS의 미래 업데이트는 테이블이 포함 블록에 자동으로 맞도록 만드는 방법을 도입할 수 있습니다.
| 이름: | table-layout |
|---|---|
| 값: | auto | fixed | inherit |
| 초기값: | auto |
| 적용 대상: | 'table' 및 'inline-table' 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 명시된 대로 |
'table-layout' 속성은 테이블 셀, 행 및 열을 레이아웃하는 데 사용되는 알고리즘을 제어합니다. 값은 다음과 같은 의미를 가집니다:
두 알고리즘은 아래에서 설명됩니다.
이 (빠른) 알고리즘에서는 테이블의 수평 레이아웃이 셀의 내용에 의존하지 않습니다. 이는 테이블의 너비, 열의 너비 및 테두리 또는 셀 간격에만 의존합니다.
테이블의 너비는 'width' 속성을 사용하여 명시적으로 지정할 수 있습니다. 'auto' 값 ('display: table' 및 'display: inline-table' 모두에 대해)은 자동 테이블 레이아웃 알고리즘을 사용함을 의미합니다. 그러나 테이블이 일반 흐름에서 블록 레벨 테이블 ('display: table')인 경우, 사용자 에이전트는 (필요하지는 않지만) 10.3.3의 알고리즘을 사용하여 너비를 계산하고, 지정된 너비가 'auto'인 경우에도 고정 테이블 레이아웃을 적용할 수 있습니다.
사용자 에이전트가 'width'가 'auto'일 때 고정 테이블 레이아웃을 지원하는 경우, 다음은 포함 블록보다 4em 좁은 테이블을 생성합니다:
table { table-layout: fixed;
margin-left: 2em;
margin-right: 2em }
고정 테이블 레이아웃 알고리즘에서는 각 열의 너비가 다음과 같이 결정됩니다:
테이블의 너비는 테이블 요소에 대한 'width' 속성 값과 열 너비의 합 (셀 간격 또는 테두리 포함) 중 더 큰 값입니다. 테이블이 열보다 넓은 경우, 추가 공간은 열에 분배되어야 합니다.
후속 행이 테이블-열 요소와 첫 번째 행에 의해 결정된 열 수보다 많은 열을 가지는 경우, 추가 열은 렌더링되지 않을 수 있습니다. CSS 2.2는 추가 열이 렌더링되는 경우 열 및 테이블의 너비를 정의하지 않습니다. 'table-layout: fixed'를 사용할 때, 작성자는 첫 번째 행에서 열을 생략하지 않아야 합니다.
이 방식으로, 사용자 에이전트는 전체 첫 번째 행을 수신한 후 테이블 레이아웃을 시작할 수 있습니다. 후속 행의 셀은 열 너비에 영향을 미치지 않습니다. 콘텐츠가 넘치는 셀은 'overflow' 속성을 사용하여 넘치는 콘텐츠를 자를지 여부를 결정합니다.
이 알고리즘에서는 (일반적으로 두 번의 패스만 필요합니다) 테이블의 너비는 열의 너비 (및 중간의 테두리)에 의해 결정됩니다. 이 알고리즘은 이 명세가 작성될 당시 여러 인기 있는 HTML 사용자 에이전트의 동작을 반영합니다. 사용자 에이전트가 'table-layout'이 'auto'일 때 테이블 레이아웃을 결정하기 위해 이 알고리즘을 구현할 필요는 없습니다. 다른 알고리즘을 사용하여 다른 동작을 초래할 수 있습니다.
자동 테이블 레이아웃의 입력에는 포함 블록의 너비, 테이블 및 해당 자손에 설정된 CSS 속성, 그리고 테이블 및 자손의 콘텐츠만 포함되어야 합니다.
참고. 이는 CSS3에서 더 자세히 정의될 수 있습니다.
이 섹션의 나머지는 비규범적입니다.
이 알고리즘은 사용자 에이전트가 최종 레이아웃을 결정하기 전에 테이블의 모든 콘텐츠에 접근해야 하며, 두 번 이상의 패스를 요구할 수 있기 때문에 비효율적일 수 있습니다.
열의 너비는 다음과 같이 결정됩니다:
각 셀의 최소 콘텐츠 너비 (MCW)를 계산합니다: 형식화된 콘텐츠는 여러 줄에 걸칠 수 있지만 셀 박스를 넘어서지 않을 수 있습니다. 셀의 지정된 'width' (W)이 MCW보다 큰 경우, W가 최소 셀 너비입니다. 'auto' 값은 MCW가 최소 셀 너비임을 의미합니다.
또한 각 셀의 "최대" 셀 너비를 계산합니다: 명시적인 줄 바꿈이 발생하는 경우를 제외하고 줄을 나누지 않고 콘텐츠를 형식화합니다.
각 열에 대해 해당 열에만 걸친 셀에서 최대 및 최소 열 너비를 결정합니다. 최소값은 가장 큰 최소 셀 너비를 가진 셀 (또는 열의 'width')에 의해 요구됩니다. 최대값은 가장 큰 최대 셀 너비를 가진 셀 (또는 열의 'width')에 의해 요구됩니다.
여러 열에 걸친 각 셀에 대해, 셀이 걸치는 열의 최소 너비를 증가시켜 이를 함께 셀만큼 넓게 만듭니다. 최대 너비도 동일하게 처리합니다. 가능하다면, 모든 걸친 열을 대략 동일하게 넓히세요.
'width'가 'auto'가 아닌 열 그룹 요소에 대해, 열 그룹의 'width'만큼 넓어지도록 걸친 열의 최소 너비를 증가시키세요.
이렇게 하면 각 열의 최대 및 최소 너비가 제공됩니다.
캡션 너비 최소값 (CAPMIN)은 각 캡션에 대해 "display: block"으로 형식화된 캡션을 포함하는 가상의 테이블 셀의 MCW로 최소 캡션 외부 너비를 계산하여 결정됩니다. 최소 캡션 외부 너비 중 가장 큰 값이 CAPMIN입니다.
열 및 캡션 너비는 다음과 같이 최종 테이블 너비에 영향을 미칩니다:
열 너비에 대한 백분율 값은 테이블 너비를 기준으로 합니다. 테이블에 'width: auto'가 설정된 경우, 백분율은 열 너비에 대한 제한을 나타내며, 사용자 에이전트는 이를 만족하려고 시도해야 합니다. (분명히, 항상 가능하지는 않습니다: 열 너비가 '110%'인 경우, 제한을 만족할 수 없습니다.)
참고. 이 알고리즘에서 행 (및 행 그룹)과 열 (및 열 그룹)은 포함된 셀의 크기에 의해 제한되며 제한을 가합니다. 열 너비를 설정하면 간접적으로 행 높이에 영향을 미칠 수 있으며, 그 반대의 경우도 마찬가지입니다.
테이블의 높이는 'table' 또는 'inline-table' 요소에 대한 'height' 속성에 의해 결정됩니다. 'auto' 값은 높이가 행 높이의 합과 셀 간격 또는 테두리의 합과 같음을 의미합니다. 다른 값은 최소 높이로 처리됩니다. CSS 2.2는 'height' 속성이 테이블을 예상보다 더 높게 만드는 경우, 여분의 공간이 어떻게 분배되는지 정의하지 않습니다.
참고. CSS의 미래 업데이트에서 이 부분이 추가로 명시될 수 있습니다.
'table-row' 요소의 박스 높이는 사용자 에이전트가 행의 모든 셀을 사용할 수 있게 된 후 계산됩니다: 이는 행의 계산된 'height' 값, 행의 각 셀의 계산된 'height' 값, 및 셀이 필요한 최소 높이(MIN) 중 최대값입니다. 'table-row'에 대해 'height' 값이 'auto'인 경우, 레이아웃에 사용되는 행 높이는 MIN입니다. MIN은 셀 박스 높이와 셀 박스 정렬에 따라 달라집니다 (이는 라인 박스 높이 계산과 유사합니다). CSS 2.2는 높이가 백분율 값으로 지정된 경우 테이블 셀 및 행의 높이가 어떻게 계산되는지 정의하지 않습니다. CSS 2.2는 행 그룹에 대한 'height'의 의미를 정의하지 않습니다.
CSS 2.2에서는 셀 박스의 높이가 콘텐츠에 필요한 최소 높이입니다. 테이블 셀의 'height' 속성은 행의 높이에 영향을 미칠 수 있지만 (위 참조), 셀 박스의 높이를 증가시키지는 않습니다.
CSS 2.2는 여러 행에 걸친 셀이 행 높이 계산에 어떻게 영향을 미치는지 정의하지 않습니다. 단, 관련된 행 높이의 합이 행에 걸친 셀을 포함하기에 충분해야 한다는 점은 예외입니다.
각 테이블 셀의 'vertical-align' 속성은 행 내에서의 정렬을 결정합니다. 각 셀의 콘텐츠는 기준선, 상단, 중앙 및 하단을 가지며, 행 자체도 마찬가지입니다. 테이블 컨텍스트에서 'vertical-align' 값은 다음과 같은 의미를 가집니다:
셀의 기준선은 셀 내의 첫 번째 인-플로우 라인 박스 또는 첫 번째 인-플로우 'table-row' 중 먼저 오는 것의 기준선입니다. 이러한 라인 박스나 'table-row'가 없는 경우, 기준선은 셀 박스의 콘텐츠 가장자리 하단입니다. 기준선을 찾는 목적상, 스크롤 메커니즘이 있는 인-플로우 박스 ('overflow' 속성 참조)는 원점 위치로 스크롤된 것처럼 간주해야 합니다. 셀의 기준선이 하단 테두리 아래에 있을 수 있다는 점에 유의하세요. 아래 예제를 참조하세요.
기준선에서 위쪽으로 모든 'vertical-align: baseline'을 가진 셀의 셀 박스 간 최대 거리는 행의 기준선을 설정하는 데 사용됩니다. 다음은 예제입니다:
'vertical-align'의 다양한 값이 테이블 셀에 미치는 영향을 보여주는 다이어그램.
셀 박스 1과 2는 기준선에서 정렬됩니다. 셀 박스 2는 기준선 위로 가장 큰 높이를 가지므로, 이는 행의 기준선을 결정합니다.
행에 기준선에 정렬된 셀 박스가 없는 경우, 해당 행의 기준선은 행에서 가장 낮은 셀의 콘텐츠 가장자리 하단입니다.
모호한 상황을 피하기 위해, 셀의 정렬은 다음 순서로 진행됩니다:
행의 높이보다 작은 셀 박스는 추가 상단 또는 하단 패딩을 받습니다.
이 예제에서 셀은 하단 테두리 아래에 기준선을 가지고 있습니다:
div { height: 0; overflow: hidden; }
<table>
<tr>
<td>
<div> Test </div>
</td>
</tr>
</table>
셀 박스 내 인라인 레벨 콘텐츠의 수평 정렬은 셀에 대한 'text-align' 속성 값으로 지정할 수 있습니다.
'visibility' 속성은 행, 행 그룹, 열 및 열 그룹 요소에 대해 'collapse' 값을 가집니다. 이 값은 해당 행 또는 열을 표시에서 제거하고, 행 또는 열이 차지하던 공간을 다른 콘텐츠가 사용할 수 있도록 만듭니다. 'collapse'된 열 또는 행과 교차하는 걸친 행 및 열의 콘텐츠는 잘립니다. 그러나 행 또는 열의 억제는 테이블 레이아웃에 다른 영향을 미치지 않습니다. 이를 통해 테이블 열 또는 행을 동적으로 제거하더라도 열 제한의 잠재적 변경을 고려하여 테이블을 다시 레이아웃할 필요가 없습니다.
CSS에서 테이블 셀에 테두리를 설정하는 두 가지 별개의 모델이 있습니다. 하나는 개별 셀 주위에 분리된 테두리에 적합하며, 다른 하나는 테이블의 한쪽 끝에서 다른 쪽 끝까지 연속적인 테두리에 적합합니다. 많은 테두리 스타일은 두 모델 중 어느 것을 사용해도 구현할 수 있으므로, 종종 어느 것을 사용할지는 개인의 취향에 따라 다릅니다.
| 이름: | border-collapse |
|---|---|
| 값: | collapse | separate | inherit |
| 초기값: | separate |
| 적용 대상: | 'table' 및 'inline-table' 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 명시된 대로 |
이 속성은 테이블의 테두리 모델을 선택합니다. 'separate' 값은 분리된 테두리 모델을 선택합니다. 'collapse' 값은 중첩된 테두리 모델을 선택합니다. 모델은 아래에서 설명됩니다.
| 이름: | border-spacing |
|---|---|
| 값: | <length> <length>? | inherit |
| 초기값: | 0 |
| 적용 대상: | 'table' 및 'inline-table' 요소 * |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 두 개의 절대 길이 |
*) 참고: 사용자 에이전트는 'frameset' 요소에도 'border-spacing' 속성을 적용할 수 있습니다. 어떤 요소가 'frameset' 요소인지에 대한 정의는 이 명세가 아니라 문서 언어에 따라 결정됩니다. 예를 들어 HTML4는 <FRAMESET> 요소를 정의하고, XHTML 1.0은 <frameset> 요소를 정의합니다. 'frameset' 요소의 'border-spacing' 속성은 비표준 'framespacing' 속성의 유효한 대체로 사용할 수 있습니다.
길이는 인접 셀 테두리를 분리하는 거리를 지정합니다. 하나의 길이가 지정되면, 이는 수평 및 수직 간격 모두를 나타냅니다. 두 개가 지정되면, 첫 번째는 수평 간격을, 두 번째는 수직 간격을 나타냅니다. 길이는 음수일 수 없습니다.
테이블 테두리와 테이블 가장자리 셀의 테두리 간의 거리는 해당 측면의 테이블 패딩에 관련된 테두리 간격 거리를 더한 값입니다. 예를 들어 오른쪽 측면의 경우, 거리는 padding-right + horizontal border-spacing입니다.
테이블의 너비는 왼쪽 내부 패딩 가장자리에서 오른쪽 내부 패딩 가장자리까지의 거리입니다 (테두리 간격 포함, 패딩 및 테두리는 제외).
그러나 HTML 및 XHTML1에서 <table> 요소의 너비는 왼쪽 테두리 가장자리에서 오른쪽 테두리 가장자리까지의 거리입니다.
참고: CSS3에서는 이 특이한 요구사항이 UA 스타일 시트 규칙과 'box-sizing' 속성을 사용하여 정의될 예정입니다.
이 모델에서는 각 셀이 개별 테두리를 가집니다. 'border-spacing' 속성은 인접 셀 테두리 간의 거리를 지정합니다. 이 공간에서 행, 열, 행 그룹, 열 그룹 배경은 보이지 않아 테이블 배경이 보이게 됩니다. 행, 열, 행 그룹, 열 그룹은 테두리를 가질 수 없습니다 (즉, 사용자 에이전트는 해당 요소에 대한 테두리 속성을 무시해야 합니다).
아래 그림의 테이블은 다음과 같은 스타일 시트의 결과일 수 있습니다:
table { border: outset 10pt;
border-collapse: separate;
border-spacing: 15pt }
td { border: inset 5pt }
td.special { border: inset 10pt } /* 왼쪽 상단 셀 */
'border-spacing' 값을 길이로 설정한 테이블. 각 셀이 자체 테두리를 가지고 있으며, 테이블도 별도의 테두리를 가지고 있음을 참고하세요.
| 이름: | empty-cells |
|---|---|
| 값: | show | hide | inherit |
| 초기값: | show |
| 적용 대상: | 'table-cell' 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 명시된 대로 |
분리된 테두리 모델에서는 이 속성이 내용이 보이지 않는 셀 주위의 테두리와 배경 렌더링을 제어합니다. 비어 있는 셀과 'visibility' 속성이 'hidden'으로 설정된 셀은 내용이 보이지 않는 것으로 간주됩니다. 셀은 다음 중 하나 이상을 포함하지 않는 경우 비어 있는 것으로 간주됩니다:
이 속성의 값이 'show'인 경우, 테두리와 배경은 비어 있는 셀 주위/뒤에 그려집니다 (일반 셀처럼).
'hide' 값은 비어 있는 셀 주위/뒤에 테두리와 배경이 그려지지 않음을 의미합니다 (17.5.1의 6번 항목 참조). 또한, 행의 모든 셀이 'hide' 값을 가지고 있고 내용이 보이지 않는 경우, 해당 행의 높이는 0이 되며 수직 테두리 간격은 행의 한쪽에만 존재합니다.
다음 규칙은 모든 셀 주위에 테두리와 배경을 그리게 합니다:
table { empty-cells: show }
중첩된 테두리 모델에서는 셀, 행, 행 그룹, 열 및 열 그룹의 전체 또는 일부를 둘러싸는 테두리를 지정할 수 있습니다. HTML의 "rules" 속성에 대한 테두리는 이 방식으로 지정할 수 있습니다.
테두리는 셀 사이의 그리드 선의 중심에 위치합니다. 사용자 에이전트는 홀수 개의 이산 단위(화면 픽셀, 프린터 점 등)인 경우 반올림에 대한 일관된 규칙을 찾아야 합니다.
아래 다이어그램은 테이블의 너비, 테두리의 너비, 패딩 및 셀 너비가 어떻게 상호작용하는지 보여줍니다. 이들의 관계는 모든 행에 대해 다음 방정식으로 설명됩니다:
row-width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn)
여기서 n은 행의 셀 수를 나타내며, padding-lefti와 padding-righti는 각각 셀 i의 왼쪽(및 오른쪽) 패딩을 나타내고, border-widthi는 셀 i와 i + 1 사이의 테두리를 나타냅니다.
사용자 에이전트는 테이블의 첫 번째 행의 첫 번째와 마지막 셀을 검사하여 테이블의 초기 왼쪽 및 오른쪽 테두리 너비를 계산해야 합니다. 테이블의 왼쪽 테두리 너비는 첫 번째 셀의 중첩된 왼쪽 테두리의 절반이며, 테이블의 오른쪽 테두리 너비는 마지막 셀의 중첩된 오른쪽 테두리의 절반입니다. 이후 행이 더 큰 중첩된 왼쪽 및 오른쪽 테두리를 가지는 경우, 초과분은 테이블의 여백 영역으로 흘러갑니다.
테이블의 상단 테두리 너비는 테이블의 상단 테두리와 상단 테두리를 중첩시키는 모든 셀을 검사하여 계산됩니다. 테이블의 상단 테두리 너비는 최대 중첩된 상단 테두리의 절반과 같습니다. 하단 테두리 너비는 테이블 하단과 하단 테두리를 중첩시키는 모든 셀을 검사하여 계산됩니다. 하단 테두리 너비는 최대 중첩된 하단 테두리의 절반과 같습니다.
여백으로 흘러가는 테두리는 테이블이 일부 상위 요소를 초과하는지 여부를 결정할 때 고려됩니다 ('overflow' 참조).
셀과 테두리의 너비 및 셀 패딩의 스키마.
이 모델에서는 테이블의 너비가 테이블 테두리의 절반을 포함합니다. 또한, 이 모델에서는 테이블에 패딩이 없지만(여백은 있음) 테두리가 있습니다.
CSS 2.2는 테이블 요소의 배경 가장자리 위치를 정의하지 않습니다.
중첩된 테두리 모델에서는 각 셀의 모든 가장자리에 대해 해당 가장자리에 만나는 다양한 요소(셀, 행, 행 그룹, 열, 열 그룹, 테이블 자체)의 테두리 속성에 의해 테두리가 지정될 수 있으며, 이러한 테두리는 너비, 스타일 및 색상이 다를 수 있습니다. 기본 규칙은 각 가장자리에서 가장 "눈에 띄는" 테두리 스타일이 선택된다는 것이지만, 스타일 'hidden'이 발생하면 무조건적으로 테두리가 꺼집니다.
다음 규칙은 충돌이 발생했을 때 어떤 테두리 스타일이 "우선"하는지를 결정합니다:
다음 예제는 이러한 우선 규칙의 적용을 보여줍니다. 이 스타일 시트:
table { border-collapse: collapse;
border: 5px solid yellow; }
*#col1 { border: 3px solid black; }
td { border: 1px solid red; padding: 1em; }
td.cell5 { border: 5px dashed blue; }
td.cell6 { border: 5px solid green; }
이 HTML 소스와 함께:
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
<TD> 1
<TD> 2
<TD> 3
</TR>
<TR id="row2">
<TD> 4
<TD class="cell5"> 5
<TD class="cell6"> 6
</TR>
<TR id="row3">
<TD> 7
<TD> 8
<TD> 9
</TR>
<TR id="row4">
<TD> 10
<TD> 11
<TD> 12
</TR>
<TR id="row5">
<TD> 13
<TD> 14
<TD> 15
</TR>
</TABLE>
다음과 같은 결과를 생성할 수 있습니다:
중첩된 테두리가 있는 테이블 예제.
다음은 숨겨진 중첩 테두리의 예제입니다:
내부 테두리 두 개가 생략된 테이블.
HTML 소스:
<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
<TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
<TD style="border: solid">bar</TD></TR>
</TABLE>
'border-style'의 일부 값은 테이블에서 다른 요소와 다른 의미를 가질 수 있습니다. 아래 목록에서 별표로 표시되었습니다.