table
과 ruby
같은 몇몇 레이아웃 모델은 복잡한 내부 구조를 가지고 있으며, 자식이나 자손들로 채울 수 있는 다양한 역할을 가지고 있습니다. 이 페이지는 이러한 "내재적인" 디스플레이 값을 정의하며, 이들은 특정 레이아웃 모드 안에서만 의미를 가집니다.
문법
유효한 <display-internal>
값들:
table-row-group
- 이 요소는
<tbody>
HTML 요소처럼 동작합니다. table-header-group
- 이 요소는
<thead>
HTML 요소처럼 동작합니다. table-footer-group
- 이 요소는
<tfoot>
HTML 요소처럼 동작합니다. table-row
- 이 요소는
<tr>
HTML 요소처럼 동작합니다. table-cell
- 이 요소는
<td>
HTML 요소처럼 동작합니다. table-column-group
- 이 요소는
<colgroup>
HTML 요소처럼 동작합니다. table-column
- 이 요소는
<col>
HTML 요소처럼 동작합니다. table-caption
- 이 요소는
<caption>
HTML 요소처럼 동작합니다. ruby-base
- 이 요소는
<rb>
HTML 요소처럼 동작합니다. ruby-text
- 이 요소는
<rt>
HTML 요소처럼 동작합니다. ruby-base-container
- 이 요소는 익명의 박스로 만들어지는
<rbc>
HTML 요소처럼 동작합니다. ruby-text-container
- 이 요소는
<rtc>
HTML 요소처럼 동작합니다.
예제
CSS 테이블의 예시
다음 예시에서는 CSS 테이블 레이아웃을 이용해 간단한 폼을 배치합니다.
HTML
<main>
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="age">Age</label>
<input type="text" id="age" name="age">
</div>
</main>
CSS
main {
display: table;
}
div {
display: table-row;
}
label, input {
display: table-cell;
margin: 5px;
}
결과
사양
사양 | 상태 |
---|---|
CSS Display Module Level 3 The definition of 'display-internal' in that specification. |
Candidate Recommendation |
브라우저 호환성
이 페이지의 호환성 표는 구조화된 데이터로부터 생성되었습니다. 데이터에 기여하시려면, https://github.com/mdn/browser-compat-data 를 확인한 뒤 저희에게 풀 리퀘스트를 보내주세요.
Table 관련 값의 지원
BCD tables only load in the browser
table
, table-cell
, table-column
, table-column-group
, table-footer-group
, table-header-group
, table-row
, table-row-group
Ruby 관련 값의 지원
BCD tables only load in the browser
ruby
, ruby-base
, ruby-base-container
, ruby-text
, ruby-text-container