이전 글 중에서 태그를 이용하여 테이블을 만드는 법에 대해 설명했었다. 이번에는 display를 사용하여 테이블을 만들어보고자 한다. display의 table 속성을 사용하면 행, 셀 등의 요소를 자유롭게 스타일링 할 수 있다는 장점이 있다.
- display: table;
<table>태그와 동일안 역할을 한다. - display: table-row;
<tr>태그에 해당된다. - display: table-cell;
<td>태그에 해당된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table {
display: table;
border-collapse: collapse;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
border: 1px solid black;
padding: 5px;
}
.tr:nth-child(1)>div:nth-of-type(2) {
color: blue;
}
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td">내용</div>
<div class="td">내용</div>
<div class="td">내용</div>
</div>
<div class="tr">
<div class="td">내용</div>
<div class="td">내용</div>
<div class="td">내용</div>
</div>
</div>
</body>
</html>
Empty-cells
- empty-cells: show | hide;
테이블에 빈 셀이 있을 경우에 보더를 보일지 말지 설정한다. border-collapse(테이블 border를 하나로 보이게 할지(collapse) 혹은 나눠서 보이게할지(separate)를 설정함)를 collapse로 할 경우에는 empty-cells을 설정할 수 없다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: separate;
border-spacing: 15px;
empty-cells: hide;
}
td,
th {
width: 200px;
border: 1px solid black;
}
tbody>tr>td {
height: 200px;
padding: 10px;
}
tbody>tr>td:nth-of-type(1) {
vertical-align: baseline;
}
tbody>tr>td:nth-of-type(2) {
vertical-align: top;
}
tbody>tr>td:nth-of-type(3) {
vertical-align: middle;
}
tbody>tr>td:nth-of-type(4) {
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>baseline</th>
<th>top</th>
<th>bottom</th>
<th>middle</th>
</tr>
</thead>
<tbody>
<tr>
<td>텍스트1</td>
<td>텍스트2</td>
<td>텍스트3</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS의 선택자(selector) - 2. 속성선택자 (0) | 2024.07.07 |
|---|---|
| CSS의 선택자(selector) - 1. 하위선택자, 자식선택자, 인접선택자, 형제선택자 (0) | 2024.07.07 |
| CSS를 이용해 오디오와 비디오를 넣어보자 (0) | 2024.07.07 |
| CSS의 width와 height 속성을 알아보자 (0) | 2024.07.07 |
| CSS에서의 배치 방법 (0) | 2024.07.07 |
| CSS3의 박스모델 (0) | 2024.07.07 |
| CSS에서 배경에 이미지를 넣어보자 (0) | 2024.07.04 |
| CSS에서 배경에 그라데이션을 넣어보자 (0) | 2024.07.03 |