Articles
Introduction au CSS
Propriétés CSS liées aux tableaux

Propriétés CSS liées aux tableaux

Cet article explique les propriétés CSS liées aux tableaux.

Vous pouvez apprendre comment utiliser et écrire des propriétés pour les mises en page des tableaux, les bordures, les positions des légendes, et plus encore.

YouTube Video

HTML pour l'aperçu

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>

Mise en page du tableau

Propriété 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 est une propriété CSS qui contrôle la méthode de mise en page des tableaux HTML. Cette propriété permet de spécifier comment calculer les largeurs des colonnes d'un tableau.

  • Dans la classe table-layout-auto, les largeurs des colonnes sont déterminées en fonction du contenu de chaque cellule.

  • Les largeurs des colonnes varient en fonction du contenu, et les cellules avec un contenu long élargissent la colonne.

  • La classe table-layout-fixed utilise table-layout: fixed.

  • La largeur de chaque colonne est définie de manière égale, et la largeur ne change pas même si le contenu est long.

Valeurs de table-layout 

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

table-layout a principalement deux valeurs : auto et fixed.

  1. auto (valeur par défaut) :

    • Spécifier auto ajuste automatiquement les largeurs des colonnes du tableau en fonction du contenu.
    • Le navigateur lit tout le contenu de chaque cellule et détermine la largeur de chaque colonne en fonction de ce contenu.
    • Cela peut entraîner un rendu plus lent de l'ensemble du tableau.

  2. fixed:

    • Spécifier fixed signifie que la largeur de chaque colonne est déterminée par la largeur des cellules de la première ligne ou par l'attribut width.
    • Le tableau entier est dessiné immédiatement et les largeurs des colonnes sont déterminées sans lire tout le contenu.
    • Les performances s'améliorent même lorsqu'il y a beaucoup de données dans le tableau.

Différence entre table-layout: auto et table-layout: fixed

  • Avec auto, la largeur du tableau s'ajuste automatiquement en fonction du contenu. Une disposition plus dynamique est possible, mais les performances peuvent se dégrader avec des tableaux complexes.
  • Avec fixed, les largeurs de colonne sont fixes, maintenant une disposition cohérente quel que soit le contenu du tableau. Bien que les performances s'améliorent, le contenu peut être tronqué s'il ne s'adapte pas à la largeur.

La propriété 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 est une propriété CSS qui contrôle comment les bordures entre les cellules du tableau sont affichées. Elle est utilisée pour définir comment les bordures entre les cellules du tableau sont affichées.

  • En utilisant border-collapse: separate, il y aura des bordures distinctes et des espaces entre les cellules. L'espacement entre les cellules est ajusté avec la propriété border-spacing. Dans cet exemple, un espace de 10px est défini entre chaque cellule.

  • En utilisant border-collapse: collapse, les bordures des cellules adjacentes sont fusionnées et affichées comme une seule bordure. En conséquence, le tableau a un design plus cohérent.

Comme dans cet exemple, la propriété border-collapse a principalement deux valeurs : separate et collapse.

  1. separate (valeur par défaut) :

    • En spécifiant separate, chaque bordure de cellule est dessinée séparément et il y a un espace entre les cellules.
    • Elle est utilisée lorsque vous voulez distinguer clairement les bordures, car les bordures des cellules sont affichées séparément.
    • L'espace entre les cellules peut être ajusté avec la propriété border-spacing.

  2. collapse:

    • En spécifiant collapse, les bordures des cellules adjacentes sont fusionnées et affichées comme une seule bordure.
    • Comme les bordures se superposent, l'ensemble du tableau a une apparence unifiée.
    • Les lignes et colonnes du tableau sont affichées proprement, ce qui le rend adapté à un design plus simple.

La propriété 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}

La propriété border-spacing est une propriété CSS permettant de spécifier l'espacement entre les cellules dans un tableau HTML. Elle aide à ajuster l'espace entre les cellules du tableau et à contrôler la marge visuelle. Dans cet exemple, un espacement des cellules de 5px horizontalement et 20px verticalement est ajouté.

La propriété border-spacing n’a d’effet que sur les tableaux où border-collapse: separate; est spécifié. Si border-collapse: collapse; est spécifié, cette propriété est inefficace.

Utilisation

Les valeurs de la propriété border-spacing sont spécifiées en pixels ou en d’autres unités de longueur. Elle peut être spécifiée dans les deux formats suivants:.

  1. Valeur unique
1table {
2    border-spacing: 10px;
3}
  • Lorsqu’une valeur unique est spécifiée, l’espacement entre les lignes (haut et bas) et les colonnes (gauche et droite) est défini à la même valeur.

Dans cet exemple, un espace de 10px est ajouté entre toutes les cellules.

  1. Deux valeurs
1table {
2    border-spacing: 10px 20px;
3}
  • Lorsqu’on spécifie deux valeurs, la première détermine l’espacement horizontal entre les colonnes, et la seconde, l’espacement vertical entre les lignes.

Dans cet exemple, l’espace entre les colonnes est de 10px, et l’espace entre les lignes est de 20px.

La propriété 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}

La propriété caption-side est une propriété CSS utilisée pour spécifier où l’en-tête (<caption>) d’un tableau HTML est affiché.

  • Indiquer top affiche l’en-tête en haut du tableau.

    • Ceci est le réglage par défaut, et les en-têtes sont souvent utilisés comme titre ou description du tableau.

  • Indiquer bottom affiche l’en-tête en bas du tableau.

    • Utilisez cette option si vous souhaitez placer des explications sous le tableau.

Propriété 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}

La propriété empty-cells est une propriété CSS pour contrôler si les cellules vides dans un tableau HTML sont affichées. Par défaut, les cellules vides d’un tableau affichent également des bordures, mais vous pouvez utiliser cette propriété pour contrôler leur affichage.

  • Indiquer show affichera également les cellules vides. C’est le comportement par défaut.
  • Indiquer hide rend les cellules vides invisibles. Les bordures et les arrière-plans des cellules ne seront pas dessinés.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS liées aux listesPropriétés CSS liées à la disposition