Tabellenbezogene CSS-Eigenschaften
Dieser Artikel erklärt tabellenbezogene CSS-Eigenschaften.
Sie können lernen, wie Sie Eigenschaften für Tabellenlayouts, Rahmen, Beschriftungspositionen und mehr verwenden und schreiben können.
YouTube Video
HTML zur Vorschau
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>Tabellenlayout
table-layout-Eigenschaft
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 ist eine CSS-Eigenschaft, die die Layoutmethode von HTML-Tabellen steuert. Diese Eigenschaft ermöglicht es Ihnen, festzulegen, wie die Spaltenbreiten einer Tabelle berechnet werden.
-
In der
table-layout-auto-Klasse werden die Spaltenbreiten basierend auf dem Inhalt jeder Zelle bestimmt. -
Die Spaltenbreiten variieren je nach Inhalt, und Zellen mit langem Inhalt erweitern die Spalte.
-
Die
table-layout-fixed-Klasse verwendettable-layout: fixed. -
Die Breite jeder Spalte wird gleichmäßig eingestellt, und die Breite ändert sich nicht, selbst wenn der Inhalt lang ist.
Werte von table-layout
1table {
2 table-layout: auto;
3}
4
5table {
6 table-layout: fixed;
7}table-layout hat hauptsächlich zwei Werte: auto und fixed.
-
auto(Standardwert):- Das Festlegen von
autopasst die Spaltenbreiten der Tabelle automatisch basierend auf dem Inhalt an. - Der Browser liest den gesamten Inhalt jeder Zelle und bestimmt auf dieser Basis die Breite jeder Spalte.
- Dies kann zu einer langsameren Darstellung der gesamten Tabelle führen.
- Das Festlegen von
-
fixed:- Das Festlegen von
fixedbedeutet, dass die Breite jeder Spalte durch die Breite der Zellen in der ersten Zeile oder durch daswidth-Attribut bestimmt wird. - Die gesamte Tabelle wird sofort dargestellt, und die Spaltenbreiten werden bestimmt, ohne den gesamten Inhalt zu lesen.
- Die Leistung verbessert sich, selbst wenn eine große Datenmenge in der Tabelle vorhanden ist.
- Das Festlegen von
Unterschied zwischen table-layout: auto und table-layout: fixed
- Mit
autopasst sich die Tabellenbreite automatisch dem Inhalt an. Ein dynamischeres Layout ist möglich, aber die Leistung kann sich bei komplexen Tabellen verschlechtern. - Mit
fixedsind die Spaltenbreiten festgelegt, was ein einheitliches Layout unabhängig vom Tabelleninhalt gewährleistet. Während sich die Leistung verbessert, kann der Inhalt abgeschnitten werden, wenn er nicht in die Breite passt.
Die Eigenschaft 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 ist eine CSS-Eigenschaft, die steuert, wie die Ränder zwischen Tabellenzellen angezeigt werden. Sie wird verwendet, um zu definieren, wie die Ränder zwischen Tabellenzellen angezeigt werden.
-
Bei der Verwendung von
border-collapse: separategibt es klare Ränder und Abstände zwischen den Zellen. Der Abstand zwischen den Zellen wird mit der Eigenschaftborder-spacingangepasst. In diesem Beispiel wird ein Abstand von 10px zwischen den einzelnen Zellen festgelegt. -
Bei der Verwendung von
border-collapse: collapsewerden die Ränder angrenzender Zellen zusammengeführt und als eine einzige Linie angezeigt. Das Ergebnis ist ein einheitlicheres Design der Tabelle.
Wie in diesem Beispiel hat die Eigenschaft border-collapse hauptsächlich zwei Werte: separate und collapse.
-
separate(Standardwert):- Wenn
separateangegeben wird, wird jede Zellbegrenzung separat gezeichnet, und es gibt Abstände zwischen den Zellen. - Es wird verwendet, wenn die Ränder deutlich voneinander getrennt dargestellt werden sollen, da die Zellenränder getrennt angezeigt werden.
- Der Abstand zwischen Zellen kann mit der Eigenschaft
border-spacingangepasst werden.
- Wenn
-
collapse:- Wenn
collapseangegeben wird, verschmelzen die Ränder angrenzender Zellen und werden als eine einzige Linie angezeigt. - Da die Ränder überlappen, hat die gesamte Tabelle ein einheitliches Erscheinungsbild.
- Reihen und Spalten der Tabelle werden sauber angezeigt, was für ein einfacheres Design geeignet ist.
- Wenn
Die Eigenschaft 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}Die Eigenschaft border-spacing ist eine CSS-Eigenschaft, mit der der Abstand zwischen Zellen in einer HTML-Tabelle festgelegt wird. Sie hilft, den Abstand zwischen Tabellenzellen anzupassen und den visuellen Abstand zu steuern. In diesem Beispiel wird ein Zellabstand von 5px horizontal und 20px vertikal hinzugefügt.
Die Eigenschaft border-spacing wirkt nur auf Tabellen, bei denen border-collapse: separate; angegeben ist. Wenn border-collapse: collapse; angegeben ist, hat diese Eigenschaft keine Wirkung.
Verwendung
Die Werte der Eigenschaft border-spacing werden in Pixeln oder anderen Längeneinheiten angegeben. Es kann in den folgenden zwei Formaten angegeben werden:.
- Einzelwert
1table {
2 border-spacing: 10px;
3}- Wenn ein Einzelwert angegeben wird, wird der Abstand zwischen den Zeilen (oben und unten) und den Spalten (links und rechts) auf denselben Wert festgelegt.
In diesem Beispiel wird ein Abstand von 10px zwischen allen Zellen hinzugefügt.
- Zwei Werte
1table {
2 border-spacing: 10px 20px;
3}- Wenn zwei Werte angegeben werden, legt der erste Wert den horizontalen Abstand zwischen den Spalten und der zweite Wert den vertikalen Abstand zwischen den Zeilen fest.
In diesem Beispiel beträgt der Abstand zwischen den Spalten 10px und der Abstand zwischen den Zeilen 20px.
Die Eigenschaft 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}Die Eigenschaft caption-side ist eine CSS-Eigenschaft, die verwendet wird, um festzulegen, wo die Beschriftung (Element <caption>) einer HTML-Tabelle angezeigt wird.
-
Die Angabe von
topzeigt die Beschriftung oben in der Tabelle an.- Dies ist die Standardeinstellung, und Beschriftungen werden häufig als Titel oder Beschreibung der Tabelle verwendet.
-
Die Angabe von
bottomzeigt die Beschriftung unten in der Tabelle an.- Verwenden Sie dies, wenn Sie Erklärungen unter der Tabelle platzieren möchten.
Die Eigenschaft 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}Die Eigenschaft empty-cells ist eine CSS-Eigenschaft, die steuert, ob leere Zellen in einer HTML-Tabelle angezeigt werden. Standardmäßig zeigen leere Zellen in einer Tabelle auch Rahmen an, aber Sie können diese Eigenschaft verwenden, um die Anzeige zu steuern.
- Die Angabe von
showzeigt auch leere Zellen an. Dies ist das Standardverhalten. - Die Angabe von
hidemacht leere Zellen unsichtbar. Die Ränder und Hintergründe der Zellen werden nicht gezeichnet.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.