Articles
Introductie tot CSS
Tabelgerelateerde CSS-eigenschappen

Tabelgerelateerde CSS-eigenschappen

Dit artikel legt tabelgerelateerde CSS-eigenschappen uit.

Je leert hoe je eigenschappen kunt gebruiken en schrijven voor tabelindelingen, randen, positionering van bijschriften, en meer.

YouTube Video

HTML voor Voorbeeldweergave

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>

Tabelindeling

table-layout-eigenschap 

 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 is een CSS-eigenschap die de indelingsmethode van HTML-tabellen regelt. Met deze eigenschap kun je specificeren hoe de kolombreedtes van een tabel worden berekend.

  • In de table-layout-auto-klasse worden kolombreedtes bepaald op basis van de inhoud in elke cel.

  • Kolombreedtes variëren afhankelijk van de inhoud, en cellen met lange inhoud maken de kolom breder.

  • De table-layout-fixed-klasse gebruikt table-layout: fixed.

  • De breedte van elke kolom wordt gelijk ingesteld en verandert niet, zelfs niet als de inhoud lang is.

Waarden van table-layout 

1table {
2    table-layout: auto;
3}
4
5table {
6    table-layout: fixed;
7}

table-layout heeft voornamelijk twee waarden: auto en fixed.

  1. auto (standaardwaarde):

    • Bij het specificeren van auto worden de kolombreedtes van de tabel automatisch aangepast op basis van de inhoud.
    • De browser leest alle inhoud van elke cel en bepaalt de breedte van elke kolom op basis van die inhoud.
    • Dit kan resulteren in een tragere weergave van de gehele tabel.

  2. fixed:

    • Bij het specificeren van fixed wordt de breedte van elke kolom bepaald door de breedte van de cellen in de eerste rij of door het width-attribuut.
    • De volledige tabel wordt onmiddellijk weergegeven en de kolombreedtes worden bepaald zonder alle inhoud te lezen.
    • De prestaties verbeteren, zelfs als er veel data in de tabel staat.

Verschil tussen table-layout: auto en table-layout: fixed

  • Met auto past de breedte van de tabel zich automatisch aan op basis van de inhoud. Een meer dynamische indeling is mogelijk, maar de prestaties kunnen verslechteren bij complexe tabellen.
  • Met fixed zijn de kolombreedtes vast, waardoor een consistente indeling behouden blijft, ongeacht de tabelinhoud. Hoewel de prestaties verbeteren, kan inhoud worden afgekapt als deze niet binnen de breedte past.

De eigenschap 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 is een CSS-eigenschap die bepaalt hoe de randen tussen tabelcellen worden weergegeven. Het wordt gebruikt om te definiëren hoe de randen tussen tabelcellen worden weergegeven.

  • Bij gebruik van border-collapse: separate zijn er afzonderlijke randen en ruimtes tussen de cellen. De ruimte tussen cellen wordt aangepast met de eigenschap border-spacing. In dit voorbeeld is er een ruimte van 10px tussen elke cel ingesteld.

  • Bij gebruik van border-collapse: collapse worden de randen van aangrenzende cellen samengevoegd en weergegeven als een enkele rand. Als resultaat heeft de tabel een meer samenhangend ontwerp.

Zoals in dit voorbeeld heeft de eigenschap border-collapse voornamelijk twee waarden: separate en collapse.

  1. separate (standaardwaarde):

    • Bij het specificeren van separate wordt elke celrand afzonderlijk getekend en is er ruimte tussen de cellen.
    • Het wordt gebruikt wanneer u de randen duidelijk wilt onderscheiden, omdat de celranden apart worden weergegeven.
    • De ruimte tussen cellen kan worden aangepast met de eigenschap border-spacing.

  2. collapse:

    • Bij het specificeren van collapse worden de randen van aangrenzende cellen samengevoegd en weergegeven als een enkele rand.
    • Aangezien de randen overlappen, heeft de hele tabel een uniforme uitstraling.
    • De rijen en kolommen van de tabel worden netjes weergegeven, waardoor deze geschikt is voor een eenvoudiger ontwerp.

De eigenschap 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}

De eigenschap border-spacing is een CSS-eigenschap om de ruimte tussen cellen in een HTML-tabel op te geven. Het helpt de ruimte tussen tabelcellen aan te passen en de visuele marge te beheren. In dit voorbeeld wordt de celruimte toegevoegd als 5px horizontaal en 20px verticaal.

De eigenschap border-spacing heeft alleen effect op tabellen waarbij border-collapse: separate; is gespecificeerd. Als border-collapse: collapse; is gespecificeerd, is deze eigenschap niet effectief.

Gebruik

Waarden voor de eigenschap border-spacing worden opgegeven in pixels of andere lengteenheden. Het kan in de volgende twee formaten worden opgegeven:.

  1. Enkele waarde
1table {
2    border-spacing: 10px;
3}
  • Bij het specificeren van een enkele waarde wordt de ruimte tussen rijen (boven en onder) en kolommen (links en rechts) ingesteld op dezelfde waarde.

In dit voorbeeld wordt een ruimte van 10px toegevoegd tussen alle cellen.

  1. Twee waarden
1table {
2    border-spacing: 10px 20px;
3}
  • Bij het specificeren van twee waarden stelt de eerste waarde de horizontale ruimte tussen kolommen in, en de tweede waarde de verticale ruimte tussen rijen.

In dit voorbeeld is de ruimte tussen kolommen 10px, en de ruimte tussen rijen 20px.

De eigenschap 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}

De eigenschap caption-side is een CSS-eigenschap die wordt gebruikt om te specificeren waar het bijschrift (<caption>-element) van een HTML-tabel wordt weergegeven.

  • Met de specificatie top wordt het bijschrift bovenaan de tabel weergegeven.

    • Dit is de standaardinstelling, en bijschriften worden vaak gebruikt als titel of beschrijving van de tabel.

  • Met de specificatie bottom wordt het bijschrift onderaan de tabel weergegeven.

    • Gebruik dit wanneer je uitleg onder de tabel wilt plaatsen.

De eigenschap 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}

De eigenschap empty-cells is een CSS-eigenschap om te bepalen of lege cellen in een HTML-tabel worden weergegeven. Standaard tonen lege cellen in een tabel ook randen, maar je kunt deze eigenschap gebruiken om de weergave aan te passen.

  • Met de specificatie show worden ook lege cellen weergegeven. Dit is het standaardgedrag.
  • Met de specificatie hide worden lege cellen onzichtbaar gemaakt. Randen en achtergronden van de cellen worden niet getekend.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Lijstgerelateerde CSS-eigenschappenCSS-eigenschappen gerelateerd aan lay-out