1. CSS 테이블
- CSS는 테이블 요소의 레이아웃과 표시를 제어할 수 있는 여러 속성을 제공한다.
2. 테이블에 테두리 추가
- border 속성을 통해 테이블의 테두리를 정의할 수 있다.
table, th, td {
border: 1px solid black;
}
- 기본적으로 브라우저는 테이블 주위와 모든 셀 주위에 테두리를 그리고 그 사이에 약간의 공간을 주어 이중 테두리를 만든다.
- 이중 테두리 문제를 해결하기 위해서는 셀 테두리를 축소하고 꺠긋한 단일 선 테두리를 만들면 된다.
3. 테이블 테두리 축소
- 표 셀에 테두리를 설정하는 두 가지 모델이 있다. -> 분리 및 축소
- border-collapse 를 사용하여 HTML 테이블의 테두리 모델을 설정할 수 있다.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
4. 테이블 내부 공간 조정
- 기본적으로 브라우저는 셀에 데이터를 포함할 수 있는 만큼만 테이블 셀을 만든다.
- 셀 내용과 셀 테두리 사이에 더 많은 공간을 추가하려면 padding 속성을 사용한다.
- 표의 테두리가 분리된 경우 border-spacing을 사용하여 셀 테두리 간격을 조정할 수 있다.
| padding |  |
 |
| border-spacing |  |
 |
5. 테이블 너비 및 높이 조정
- 기본적으로 테이블은 모든 내용을 포함할 수 있을 만큼의 높이를 렌더링 한다.
- 명시적으로 width, height를 사용하여 표의 너비와 높이를 설정할 수 있다.
6. 테이블 레이아웃 제어
- 테이블은 내부에 포함된 데이터를 수용하기 위해 확장 및 축소한다.
- 데이터가 테이블 내부에 채워지면 공간이 있는 한 계속 확장이 된다.
- 그러나 레이아웃을 관리하기 위해 테이블의 고정 너비를 설정해야하는 경우도 있다.
- table-layout 속성을 통해 설정하며, 테이블 셀, 행 및 열을 레이아웃하는데 사용할 알고리즘을 설정한다.
6.1) auto (기본값)
- 자동 테이블 레이아웃 알고리즘을 사용한다.
- 표와 해당 셀의 너비가 내용에 맞게 조절된다.
6.2) fixed
- 고정 테이블 레이아웃 알고리즘을 사용한다.
- 테이블의 가로 레이아웃이 셀의 내용에 의존하지 않는다.
- 표의 너비, 열의 너비, 테두리 또는 셀 간격에만 의존한다.
- 일반적으로 자동보다 빠르다.
* 일반적으로 fixed를 지정하여 테이블 렌더링 성능을 최적화 할 수 있다.
* 큰 테이블이 table-layout: fixed의 값이 없으면 브라우저가 전체 테이블을 렌더링하기 전까지 사용자는 테이블의 어떠한 내용도 볼 수 없다.
7. 표 셀 내부의 텍스트 정렬
- 셀 내용의 수평 정렬 : text-align
- 셀 내용의 수직 정렬 : veritcal-align
8. 테이블의 캡션 위치 제어
- caption-side 속성을 이용하여 캡션의 세로 위치를 지정할 수 있다.
- 캡션은 테이블의 상단 또는 하단에 배치할 수 있다. (기본값 : 상단)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS caption-side property</title>
<style>
table, td, th {
border: 1px solid gray;
}
caption {
caption-side: bottom;
}
</style>
</head>
<body>
<table>
<caption>Table 1.0 - User Details</caption>
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
<p><strong>Note:</strong> Internet Explorer 8 supports the caption-side property only if a <code>!DOCTYPE</code> is specified.</p>
</body>
</html>
9. 빈 셀 처리
- empty-cells를 사용하여 표시되는 콘텐츠가 없는 셀의 렌더링을 제어할 수 있다.
- show 또는 hide 값을 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS empty-cells property</title>
<style>
table {
width: 300px;
border-collapse: separate;
}
table, th, td{
border: 1px solid #000000;
}
table.empty-show {
empty-cells: show;
}
table.empty-hide {
empty-cells: hide;
}
</style>
</head>
<body>
<h2>Table with Empty-cells</h2>
<table class="empty-show">
<tr>
<th>Name</th>
<td>John Carter</td>
</tr>
<tr>
<th>Email</th>
<td></td>
</tr>
</table>
<br>
<h2>Table with Hidden Empty-cells</h2>
<table class="empty-hide">
<tr>
<th>Name</th>
<td>Peter Parker</td>
</tr>
<tr>
<th>Email</th>
<td></td>
</tr>
</table>
<p><strong>Note:</strong> You can see the empty cell in the second example table is completely hidden. Non-breaking space (i.e. &nbsp;) is considered as content.</p>
</body>
</html>
10. 얼룩말 줄무늬 테이블 만들기
- 많은 양의 데이터를 테이블로 나타낼 경우, 가독성이 매우 떨어지기 때문에 아래와 같이 테이블을 만들 수 있다.
- nth-child()를 이용해 쉽게 테이블의 배경색을 지정할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Creating Zebra-striped Tables</title>
<style>
table {
width: 100%;
font-family: arial, sans-serif;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-top: 1px solid #dee2e6;
}
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
11. 반응형 테이블 만들기
- 테이블은 본질적으로 반응하지 않는다. 하지만 모바일 장치를 지원하기 위해 작은 화면에서 가로 스크롤을 활성화하여 표에 응답성을 추가할 수 있다.
<div style="overflow-x: auto;">
<table>
... table content ...
</table>
</div>'Language > CSS' 카테고리의 다른 글
| [CSS] CSS Dimension (0) | 2021.02.03 |
|---|---|
| [CSS] CSS Box Model (0) | 2021.02.03 |
| [CSS] CSS List (0) | 2021.02.03 |
| [CSS] CSS 링크 (0) | 2021.02.03 |
| [CSS] CSS 텍스트 (0) | 2021.02.03 |