display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다.
display 속성값 중 표와 관련된 값들
표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다.
- table :
<table>요소처럼 표현합니다. -
table-caption :
<caption>요소처럼 표현합니다. -
table-column-group :
<colgroup>요소처럼 표현합니다. -
table-header-group :
<thead>요소처럼 표현합니다. -
table-footer-group :
<tfoot>요소처럼 표현합니다. -
table-row-group :
<tbody>요소처럼 표현합니다. - table-cell :
<td>요소처럼 표현합니다. - table-column :
<col>요소처럼 표현합니다. - table-row :
<tr>요소처럼 표현합니다.
예제
위의 속성값으로 표처럼 표현되도록 만든 후에 표를 꾸미는 것과 같은 방법으로 해당 요소를 꾸밀 수 있습니다.
<div class="table">
<div class="table-row">
<div class="table-cell">
<p>Lorem</p>
</div>
<div class="table-cell">
<p>Ipsum</p>
</div>
<div class="table-cell">
<p>Dolor</p>
</div>
</div>
<div class="table-row">
<div class="table-cell top">
<p>Lorem</p>
</div>
<div class="table-cell middle">
<p>Ipsum</p>
</div>
<div class="table-cell bottom">
<p>Dolor</p>
</div>
</div>
</div>
div {
border: 1px solid #bcbcbc;
}
.table {
display: table;
width: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
padding: 0px 20px;
height: 150px;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}