與表格相關的 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是一個CSS屬性，用於指定HTML表格中單元格間的間距。它有助於調整單元格之間的間距以及控制視覺上的邊距。在此範例中，水平間距設為5px，垂直間距設為20px。
只有當表格的 border-collapse 屬性被設置為 separate 時，border-spacing 屬性才會生效。如果 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 屬性是一個 CSS 屬性，用於指定 HTML 表格中 <caption> 元素的顯示位置。
-
指定
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 是一個 CSS 屬性，用於控制 HTML 表格中是否顯示空單元格。預設情況下，表格中的空單元格也會顯示邊框，但你可以使用此屬性來控制顯示行為。
- 指定
show時，空單元格也會顯示。這是預設行為。 - 指定
hide時，空單元格將不可見。單元格的邊框和背景將不會被繪製。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。