테이블 관련 CSS 속성
이 문서는 테이블 관련 CSS 속성에 대해 설명합니다.
테이블 레이아웃, 테두리, 캡션 위치 등과 관련된 속성을 사용하는 방법 및 작성 방법을 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-table.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-table.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>Table Related CSS Properties</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Table Related Properties</h2>
20 </header>
21 <article>
22 <h3>table-layout</h3>
23 <section>
24 <header><h4>table-layout: auto</h4></header>
25 <section class="sample-view">
26 <table class="table-layout-auto">
27 <thead>
28 <tr>
29 <th>Column 1</th>
30 <th>Column 2</th>
31 <th>Column 3</th>
32 </tr>
33 </thead>
34 <tbody>
35 <tr>
36 <td>Short</td>
37 <td>Some longer content here</td>
38 <td>Content</td>
39 </tr>
40 <tr>
41 <td>Another short one</td>
42 <td>This is a much longer piece of text to demonstrate the auto layout</td>
43 <td>Short</td>
44 </tr>
45 </tbody>
46 </table>
47 </section>
48 </section>
49 <section>
50 <header><h4>table-layout: fixed</h4></header>
51 <section class="sample-view">
52 <table class="table-layout-fixed">
53 <thead>
54 <tr>
55 <th>Column 1</th>
56 <th>Column 2</th>
57 <th>Column 3</th>
58 </tr>
59 </thead>
60 <tbody>
61 <tr>
62 <td>Short</td>
63 <td>Some longer content here</td>
64 <td>Content</td>
65 </tr>
66 <tr>
67 <td>Another short one</td>
68 <td>This is a much longer piece of text to demonstrate the fixed layout</td>
69 <td>Short</td>
70 </tr>
71 </tbody>
72 </table>
73 </section>
74 </section>
75 </article>
76 <article>
77 <h3>border-collapse</h3>
78 <section>
79 <header><h4>border-collapse: separate</h4></header>
80 <section class="sample-view">
81 <table class="border-collapse-separate">
82 <thead>
83 <tr>
84 <th>Header 1</th>
85 <th>Header 2</th>
86 <th>Header 3</th>
87 </tr>
88 </thead>
89 <tbody>
90 <tr>
91 <td>Cell 1</td>
92 <td>Cell 2</td>
93 <td>Cell 3</td>
94 </tr>
95 <tr>
96 <td>Cell 4</td>
97 <td>Cell 5</td>
98 <td>Cell 6</td>
99 </tr>
100 </tbody>
101 </table>
102 </section>
103 </section>
104 <section>
105 <header><h4>border-collapse: collapse</h4></header>
106 <section class="sample-view">
107 <table class="border-collapse-collapse">
108 <thead>
109 <tr>
110 <th>Header 1</th>
111 <th>Header 2</th>
112 <th>Header 3</th>
113 </tr>
114 </thead>
115 <tbody>
116 <tr>
117 <td>Cell 1</td>
118 <td>Cell 2</td>
119 <td>Cell 3</td>
120 </tr>
121 <tr>
122 <td>Cell 4</td>
123 <td>Cell 5</td>
124 <td>Cell 6</td>
125 </tr>
126 </tbody>
127 </table>
128 </section>
129 </section>
130 </article>
131 <article>
132 <h3>border-spacing</h3>
133 <section>
134 <header><h4>border-spacing: 5px 20px</h4></header>
135 <section class="sample-view">
136 <table class="border-spacing-example">
137 <thead>
138 <tr>
139 <th>Header 1</th>
140 <th>Header 2</th>
141 <th>Header 3</th>
142 </tr>
143 </thead>
144 <tbody>
145 <tr>
146 <td>Cell 1</td>
147 <td>Cell 2</td>
148 <td>Cell 3</td>
149 </tr>
150 <tr>
151 <td>Cell 4</td>
152 <td>Cell 5</td>
153 <td>Cell 6</td>
154 </tr>
155 </tbody>
156 </table>
157 </section>
158 </section>
159 </article>
160 <article>
161 <h3>caption-side</h3>
162 <section>
163 <header><h4>caption-side: top</h4></header>
164 <section class="sample-view">
165 <table>
166 <caption class="caption-side-top">
167 Table Caption on Top
168 </caption>
169 <thead>
170 <tr>
171 <th>Header 1</th>
172 <th>Header 2</th>
173 <th>Header 3</th>
174 </tr>
175 </thead>
176 <tbody>
177 <tr>
178 <td>Data 1</td>
179 <td>Data 2</td>
180 <td>Data 3</td>
181 </tr>
182 <tr>
183 <td>Data 4</td>
184 <td>Data 5</td>
185 <td>Data 6</td>
186 </tr>
187 </tbody>
188 </table>
189 </section>
190 </section>
191 <section>
192 <header><h4>caption-side: bottom</h4></header>
193 <section class="sample-view">
194 <table>
195 <caption class="caption-side-bottom">
196 Table Caption on Bottom
197 </caption>
198 <thead>
199 <tr>
200 <th>Header 1</th>
201 <th>Header 2</th>
202 <th>Header 3</th>
203 </tr>
204 </thead>
205 <tbody>
206 <tr>
207 <td>Data 1</td>
208 <td>Data 2</td>
209 <td>Data 3</td>
210 </tr>
211 <tr>
212 <td>Data 4</td>
213 <td>Data 5</td>
214 <td>Data 6</td>
215 </tr>
216 </tbody>
217 </table>
218 </section>
219 </section>
220 </article>
221 <article>
222 <h3>empty-cells</h3>
223 <section>
224 <header><h4>empty-cells: show</h4></header>
225 <section class="sample-view">
226 <table class="empty-cells-show">
227 <tr>
228 <th>Header 1</th>
229 <th>Header 2</th>
230 <th>Header 3</th>
231 </tr>
232 <tr>
233 <td>Data 1</td>
234 <td></td> <!-- Empty cell -->
235 <td>Data 3</td>
236 </tr>
237 <tr>
238 <td>Data 4</td>
239 <td></td> <!-- Empty cell -->
240 <td>Data 6</td>
241 </tr>
242 </table>
243 </section>
244 </section>
245 <section>
246 <header><h4>empty-cells: hide</h4></header>
247 <section class="sample-view">
248 <table class="empty-cells-hide">
249 <tr>
250 <th>Header 1</th>
251 <th>Header 2</th>
252 <th>Header 3</th>
253 </tr>
254 <tr>
255 <td>Data 1</td>
256 <td></td> <!-- Empty cell -->
257 <td>Data 3</td>
258 </tr>
259 <tr>
260 <td>Data 4</td>
261 <td></td> <!-- Empty cell -->
262 <td>Data 6</td>
263 </tr>
264 </table>
265 </section>
266 </section>
267 </article>
268 </main>
269</body>
270</html>테이블 레이아웃
table-layout 속성
1table {
2 width: 100%;
3}
4
5th, td {
6 border: 1px solid black;
7 padding: 10px;
8}
9
10table.table-layout-auto {
11 border-collapse: collapse;
12 table-layout: auto;
13}
14
15table.table-layout-fixed {
16 border-collapse: collapse;
17 table-layout: fixed;
18}
19
20table.table-layout-fixed th {
21 width: 33.33%; /* Distribute width equally among 3 columns */
22}table-layout은 HTML 테이블의 레이아웃 방식을 제어하는 CSS 속성입니다. 이 속성은 테이블 열 너비를 계산하는 방식을 지정할 수 있게 해줍니다.
-
table-layout-auto클래스에서는 각 셀의 내용에 따라 열 너비가 결정됩니다. -
열 너비는 내용에 따라 달라지며, 긴 내용이 있는 셀은 열을 더 넓게 만듭니다.
-
table-layout-fixed클래스는table-layout: fixed를 사용합니다. -
각 열의 너비는 일정하게 설정되며, 내용이 길어도 너비는 변경되지 않습니다.
table-layout 속성 값
1table {
2 table-layout: auto;
3}
4
5table {
6 table-layout: fixed;
7}table-layout 속성에는 주로 auto와 fixed 두 가지 값이 있습니다.
-
auto(기본 값):auto를 지정하면 테이블의 열 너비가 내용에 따라 자동으로 조정됩니다.- 브라우저는 각 셀의 모든 내용을 읽고 해당 내용을 바탕으로 열 너비를 결정합니다.
- 이로 인해 전체 테이블의 렌더링 속도가 느려질 수 있습니다.
-
fixed:fixed를 지정하면 각 열의 너비는 첫 번째 행의 셀 너비 또는width속성에 의해 결정됩니다.- 테이블 전체가 즉시 그려지며 모든 내용을 읽지 않고 열 너비가 결정됩니다.
- 테이블에 데이터가 많아도 성능이 향상됩니다.
table-layout: auto와 table-layout: fixed의 차이점
auto에서는 테이블 너비가 내용에 따라 자동으로 조정됩니다. 더 동적인 레이아웃이 가능하지만, 복잡한 테이블에서는 성능이 저하될 수 있습니다.fixed를 사용하면 열 너비가 고정되며, 테이블 내용과 상관없이 일정한 레이아웃을 유지할 수 있습니다. 성능은 향상되지만, 내용이 너비에 맞지 않으면 잘릴 수 있습니다.
border-collapse 속성
1table.border-collapse-separate {
2 border-collapse: separate;
3 border-spacing: 10px; /* Set space between cells */
4}
5
6table.border-collapse-collapse {
7 border-collapse: collapse;
8}border-collapse는 테이블 셀 간의 경계선을 어떻게 표시할지 제어하는 CSS 속성입니다. 테이블 셀 간의 경계선을 어떻게 표시할지 정의하는 데 사용됩니다.
-
border-collapse: separate를 사용하면 셀 사이에 구별되는 경계선과 간격이 생깁니다. 셀 사이 간격은border-spacing속성으로 조정됩니다. 이 예제에서는 각 셀 사이에 10px의 간격이 설정되었습니다. -
border-collapse: collapse를 사용하면 인접한 셀의 경계선이 병합되어 하나의 경계선으로 표시됩니다. 그 결과 테이블이 더 조화로운 디자인을 가집니다.
이 예와 같이, border-collapse 속성은 주로 separate와 collapse 두 가지 값을 가지고 있습니다.
-
separate(기본값):separate를 지정하면 각 셀의 경계선이 개별적으로 그려지고 셀 사이에 간격이 생깁니다.- 셀 경계선이 떨어져 표시되므로 경계선을 분명히 구분하고 싶을 때 사용됩니다.
- 셀 사이의 간격은
border-spacing속성으로 조정할 수 있습니다.
-
collapse:collapse를 지정하면 인접 셀의 경계선이 병합되어 하나의 경계선으로 표시됩니다.- 경계선이 겹치므로 테이블 전체가 통일된 외관을 가집니다.
- 테이블의 행과 열이 깔끔하게 표시되므로 더 간단한 디자인에 적합합니다.
border-spacing 속성
1table.border-spacing-example {
2 border-collapse: separate;
3
4 /* Set 5px spacing between columns and 20px spacing between rows */
5 border-spacing: 5px 20px;
6}border-spacing는 HTML 테이블에서 셀 사이의 간격을 지정하는 CSS 속성입니다. 테이블 셀 간의 간격을 조정하고 시각적 여백을 제어하는 데 도움이 됩니다. 이 예제에서는 셀 간격이 수평으로 5px, 수직으로 20px 추가되었습니다.
border-spacing 속성은 border-collapse: separate;가 지정된 테이블에서만 적용됩니다. border-collapse: collapse;가 지정된 경우 이 속성은 효과가 없습니다.
사용법
border-spacing 속성의 값은 픽셀 또는 다른 길이 단위로 지정됩니다. 다음 두 가지 형식으로 지정할 수 있습니다:.
- 단일 값
1table {
2 border-spacing: 10px;
3}- 단일 값을 지정하면 행(위와 아래)과 열(왼쪽과 오른쪽) 간의 간격이 동일한 값으로 설정됩니다.
이 예에서는 모든 셀 사이에 10px의 간격이 추가됩니다.
- 두 가지 값
1table {
2 border-spacing: 10px 20px;
3}- 두 가지 값을 지정하면 첫 번째 값은 열 사이의 수평 간격을 설정하고, 두 번째 값은 행 사이의 수직 간격을 설정합니다.
이 예에서는 열 사이의 간격이 10px, 행 사이의 간격은 20px입니다.
caption-side 속성
1caption.caption-side-top {
2 caption-side: top; /* Display the caption at the top of the table */
3 font-weight: bold;
4 font-size: 1.2em;
5 margin-bottom: 10px;
6 background-color: #ccc;
7}
8
9caption.caption-side-bottom {
10 caption-side: bottom; /* Display the caption at the bottom of the table */
11 font-weight: bold;
12 font-size: 1.2em;
13 margin-top: 10px;
14 background-color: #ccc;
15}caption-side 속성은 HTML 테이블의 캡션(<caption> 요소)이 표시되는 위치를 지정하는 데 사용되는 CSS 속성입니다.
-
**
top**을 지정하면 캡션이 테이블 상단에 표시됩니다.- 이것이 기본 설정이며, 캡션은 종종 테이블의 제목이나 설명으로 사용됩니다.
-
**
bottom**을 지정하면 캡션이 테이블 하단에 표시됩니다.- 테이블 하단에 설명을 배치하려는 경우 이를 사용하세요.
empty-cells 속성
1table.empty-cells-show {
2 empty-cells: show; /* Display empty cells */
3}
4
5table.empty-cells-hide {
6 empty-cells: hide; /* Display empty cells */
7}empty-cells는 HTML 테이블에서 빈 셀을 표시할지 여부를 제어하는 CSS 속성입니다. 기본적으로 테이블의 빈 셀은 테두리를 표시하지만 이 속성을 사용하여 표시를 제어할 수 있습니다.
- **
show**를 지정하면 빈 셀도 표시됩니다. 이것이 기본 동작입니다. - **
hide**를 지정하면 빈 셀이 보이지 않게 됩니다. 셀의 테두리와 배경은 표시되지 않습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.