This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<display-internal>
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-baseExperimental이 요소는
<rb>HTML 요소처럼 동작합니다.ruby-textExperimental이 요소는
<rt>HTML 요소처럼 동작합니다.ruby-base-containerExperimental이 요소는 익명의 박스로 만들어지는
<rbc>HTML 요소처럼 동작합니다.ruby-text-containerExperimental이 요소는
<rtc>HTML 요소처럼 동작합니다.
예제
CSS 테이블의 예시
다음 예시에서는 CSS 테이블 레이아웃을 이용해 간단한 폼을 배치합니다.
HTML
html
<main> <div> <label for="name">Name</label> <input type="text" name="name" /> </div> <div> <label for="age">Age</label> <input type="text" name="age" /> </div></main>CSS
css
main { display: table;}div { display: table-row;}label,input { display: table-cell; margin: 5px;}