Các thuộc tính CSS liên quan đến bảng
Bài viết này giải thích các thuộc tính CSS liên quan đến bảng.
Bạn có thể học cách sử dụng và viết các thuộc tính cho bố cục bảng, đường viền, vị trí tiêu đề, và hơn thế nữa.
YouTube Video
HTML để Xem trước
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>Bố cục bảng
Thuộc tính 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 là một thuộc tính CSS để kiểm soát phương pháp bố cục của các bảng HTML. Thuộc tính này cho phép bạn chỉ định cách tính toán độ rộng của các cột trong bảng.
-
Trong lớp
table-layout-auto, độ rộng của các cột được xác định dựa trên nội dung trong từng ô. -
Độ rộng của cột thay đổi theo nội dung, và các ô có nội dung dài sẽ làm cột rộng ra.
-
Lớp
table-layout-fixedsử dụngtable-layout: fixed. -
Độ rộng của mỗi cột được thiết lập bằng nhau, và độ rộng không thay đổi ngay cả khi nội dung dài.
Các giá trị của table-layout
1table {
2 table-layout: auto;
3}
4
5table {
6 table-layout: fixed;
7}table-layout chủ yếu có hai giá trị: auto và fixed.
-
auto(giá trị mặc định):- Khi chỉ định
auto, độ rộng của các cột trong bảng tự động điều chỉnh dựa trên nội dung. - Trình duyệt đọc tất cả nội dung của từng ô và xác định độ rộng của từng cột dựa trên nội dung đó.
- Điều này có thể dẫn đến việc render toàn bộ bảng chậm hơn.
- Khi chỉ định
-
fixed:- Khi chỉ định
fixed, độ rộng của mỗi cột được xác định bởi độ rộng của các ô trong hàng đầu tiên hoặc bởi thuộc tínhwidth. - Toàn bộ bảng được vẽ ngay lập tức và độ rộng của các cột được xác định mà không cần đọc toàn bộ nội dung.
- Hiệu suất được cải thiện ngay cả khi có rất nhiều dữ liệu trong bảng.
- Khi chỉ định
Sự khác biệt giữa table-layout: auto và table-layout: fixed
- Với
auto, độ rộng của bảng tự động điều chỉnh theo nội dung. Một bố cục linh hoạt hơn là khả thi, nhưng hiệu suất có thể bị giảm nếu bảng quá phức tạp. - Với
fixed, chiều rộng của các cột được cố định, duy trì bố cục nhất quán bất kể nội dung của bảng. Mặc dù hiệu suất được cải thiện, nội dung có thể bị cắt bỏ nếu không vừa với chiều rộng.
Thuộc tính 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 là một thuộc tính CSS kiểm soát cách hiển thị đường viền giữa các ô bảng. Nó được sử dụng để định nghĩa cách hiển thị đường viền giữa các ô bảng.
-
Khi sử dụng
border-collapse: separate, sẽ có các đường viền riêng biệt và khoảng cách giữa các ô. Khoảng cách giữa các ô được điều chỉnh bằng thuộc tínhborder-spacing. Trong ví dụ này, khoảng cách 10px được thiết lập giữa mỗi ô. -
Khi sử dụng
border-collapse: collapse, các đường viền của các ô liền kề được hợp nhất và hiển thị như một đường viền đơn. Kết quả là bảng có thiết kế thống nhất hơn.
Như trong ví dụ này, thuộc tính border-collapse chủ yếu có hai giá trị: separate và collapse.
-
separate(giá trị mặc định):- Khi chỉ định
separate, mỗi đường viền ô được vẽ riêng lẻ và có khoảng cách giữa các ô. - Nó được sử dụng khi bạn muốn phân biệt rõ ràng các đường viền, vì đường viền ô được hiển thị tách biệt.
- Khoảng cách giữa các ô có thể được điều chỉnh bằng thuộc tính
border-spacing.
- Khi chỉ định
-
collapse:- Khi chỉ định
collapse, các đường viền của các ô liền kề được hợp nhất và hiển thị như một đường viền đơn. - Do các đường viền chồng lên nhau, toàn bộ bảng có diện mạo đồng nhất.
- Các hàng và cột của bảng được hiển thị gọn gàng, phù hợp cho một thiết kế đơn giản hơn.
- Khi chỉ định
Thuộc tính 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}Thuộc tính border-spacing là một thuộc tính CSS để xác định khoảng cách giữa các ô trong bảng HTML. Nó giúp điều chỉnh khoảng cách giữa các ô bảng và kiểm soát lề trực quan. Trong ví dụ này, khoảng cách giữa các ô được thêm là 5px theo chiều ngang và 20px theo chiều dọc.
Thuộc tính border-spacing chỉ có hiệu lực đối với bảng mà border-collapse: separate; được chỉ định. Nếu border-collapse: collapse; được chỉ định, thuộc tính này sẽ không có hiệu lực.
Cách sử dụng
Các giá trị của thuộc tính border-spacing được chỉ định bằng pixel hoặc các đơn vị độ dài khác. Nó có thể được chỉ định bằng hai định dạng sau đây:.
- Giá trị đơn
1table {
2 border-spacing: 10px;
3}- Khi chỉ định một giá trị, khoảng cách giữa các hàng (trên và dưới) và cột (trái và phải) được đặt bằng nhau.
Trong ví dụ này, một khoảng cách 10px được thêm giữa tất cả các ô.
- Hai giá trị
1table {
2 border-spacing: 10px 20px;
3}- Khi chỉ định hai giá trị, giá trị đầu tiên thiết lập khoảng cách ngang giữa các cột, và giá trị thứ hai thiết lập khoảng cách dọc giữa các hàng.
Trong ví dụ này, khoảng cách giữa các cột là 10px, và khoảng cách giữa các hàng là 20px.
Thuộc tính 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}Thuộc tính caption-side là một thuộc tính CSS dùng để chỉ định vị trí nơi hiển thị chú thích (phần tử <caption>) của bảng HTML.
-
Chỉ định
topsẽ hiển thị chú thích ở phía trên của bảng.- Đây là cài đặt mặc định, và chú thích thường được sử dụng làm tiêu đề hoặc mô tả của bảng.
-
Chỉ định
bottomsẽ hiển thị chú thích ở phía dưới của bảng.- Sử dụng thuộc tính này khi bạn muốn đặt phần giải thích ở dưới bảng.
Thuộc tính 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}Thuộc tính empty-cells là một thuộc tính CSS để kiểm soát việc các ô trống trong bảng HTML có được hiển thị hay không. Mặc định, các ô trống trong một bảng cũng hiển thị đường viền, nhưng bạn có thể sử dụng thuộc tính này để kiểm soát việc hiển thị.
- Chỉ định
showsẽ hiển thị cả các ô trống. Đây là hành vi mặc định. - Chỉ định
hidesẽ làm các ô trống không hiển thị. Các đường viền và nền của ô sẽ không được vẽ.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.