Articles
Introduzione al CSS
Proprietà CSS relative alle tabelle

Proprietà CSS relative alle tabelle

Questo articolo spiega le proprietà CSS relative alle tabelle.

Puoi imparare come utilizzare e definire le proprietà per i layout delle tabelle, i bordi, le posizioni delle didascalie e altro.

YouTube Video

HTML per Anteprima

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>

Layout delle tabelle

Proprietà 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 è una proprietà CSS che controlla il metodo di layout delle tabelle HTML. Questa proprietà consente di specificare come calcolare le larghezze delle colonne di una tabella.

  • Nella classe table-layout-auto, le larghezze delle colonne sono determinate in base al contenuto di ciascuna cella.

  • Le larghezze delle colonne variano in base al contenuto, e le celle con contenuto lungo allargheranno la colonna.

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

  • La larghezza di ogni colonna è impostata in modo uniforme e non cambia nemmeno se il contenuto è lungo.

Valori della proprietà table-layout 

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

table-layout ha principalmente due valori: auto e fixed.

  1. auto (valore predefinito):

    • Specificando auto, le larghezze delle colonne della tabella vengono regolate automaticamente in base al contenuto.
    • Il browser legge tutto il contenuto di ciascuna cella e determina la larghezza di ogni colonna in base a tale contenuto.
    • Questo può comportare un rendering più lento dell'intera tabella.

  2. fixed:

    • Specificare fixed significa che la larghezza di ogni colonna è determinata dalla larghezza delle celle nella prima riga o dall'attributo width.
    • L'intera tabella viene disegnata immediatamente e le larghezze delle colonne vengono determinate senza leggere tutto il contenuto.
    • Le prestazioni migliorano anche in presenza di una grande quantità di dati nella tabella.

Differenza tra table-layout: auto e table-layout: fixed

  • Con auto, la larghezza della tabella si adatta automaticamente in base al contenuto. È possibile avere un layout più dinamico, ma le prestazioni possono peggiorare con tabelle complesse.
  • Con fixed, la larghezza delle colonne è fissa, mantenendo un layout coerente indipendentemente dal contenuto della tabella. Anche se le prestazioni migliorano, il contenuto potrebbe essere troncato se non si adatta alla larghezza.

La proprietà 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 è una proprietà CSS che controlla come vengono visualizzati i bordi tra le celle di una tabella. È usata per definire come vengono visualizzati i bordi tra le celle della tabella.

  • Quando si utilizza border-collapse: separate, ci saranno bordi distinti e spazi tra le celle. La spaziatura tra le celle viene regolata con la proprietà border-spacing. In questo esempio, uno spazio di 10px è impostato tra ogni cella.

  • Quando si utilizza border-collapse: collapse, i bordi delle celle adiacenti vengono uniti e visualizzati come un singolo bordo. Di conseguenza, la tabella ha un design più coeso.

Come in questo esempio, la proprietà border-collapse ha principalmente due valori: separate e collapse.

  1. separate (valore predefinito):

    • Quando si specifica separate, il bordo di ogni cella viene disegnato separatamente e c'è spazio tra le celle.
    • Viene utilizzato quando si desidera distinguere chiaramente i bordi, poiché i bordi delle celle sono visualizzati separatamente.
    • Lo spazio tra le celle può essere regolato con la proprietà border-spacing.

  2. collapse:

    • Quando si specifica collapse, i bordi delle celle adiacenti vengono uniti e visualizzati come un unico bordo.
    • Poiché i bordi si sovrappongono, l'intera tabella ha un aspetto uniforme.
    • Le righe e le colonne della tabella sono visualizzate in modo ordinato, rendendola adatta a un design più semplice.

La proprietà 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 proprietà border-spacing è una proprietà CSS per specificare la spaziatura tra le celle in una tabella HTML. Aiuta a regolare lo spazio tra le celle della tabella e a controllare il margine visivo. In questo esempio, la spaziatura tra le celle è impostata a 5px orizzontalmente e 20px verticalmente.

La proprietà border-spacing ha effetto solo sulle tabelle in cui è specificato border-collapse: separate;. Se viene specificato border-collapse: collapse;, questa proprietà non ha effetto.

Utilizzo

I valori per la proprietà border-spacing sono specificati in pixel o in altre unità di lunghezza. Può essere specificata nei seguenti due formati:.

  1. Valore singolo
1table {
2    border-spacing: 10px;
3}
  • Specificando un unico valore, la spaziatura tra le righe (sopra e sotto) e le colonne (a sinistra e a destra) viene impostata allo stesso valore.

In questo esempio, uno spazio di 10px viene aggiunto tra tutte le celle.

  1. Due valori
1table {
2    border-spacing: 10px 20px;
3}
  • Specificando due valori, il primo valore imposta la spaziatura orizzontale tra le colonne, mentre il secondo imposta la spaziatura verticale tra le righe.

In questo esempio, lo spazio tra le colonne è di 10px, mentre lo spazio tra le righe è di 20px.

La proprietà 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 proprietà caption-side è una proprietà CSS utilizzata per specificare dove viene visualizzata la didascalia (elemento <caption>) di una tabella HTML.

  • Specificando top, la didascalia viene visualizzata nella parte superiore della tabella.

    • Questa è l'impostazione predefinita, e le didascalie vengono spesso utilizzate come titolo o descrizione della tabella.

  • Specificando bottom, la didascalia viene visualizzata nella parte inferiore della tabella.

    • Usa questa opzione quando vuoi posizionare le spiegazioni sotto la tabella.

La proprietà 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 proprietà empty-cells è una proprietà CSS che controlla se le celle vuote in una tabella HTML vengono visualizzate. Per impostazione predefinita, le celle vuote in una tabella mostrano anche i bordi, ma puoi usare questa proprietà per controllarne la visualizzazione.

  • Specificando show, anche le celle vuote saranno visualizzate. Questo è il comportamento predefinito.
  • Specificando hide, le celle vuote diventano invisibili. I bordi e gli sfondi delle celle non saranno disegnati.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS relative alle listeProprietà CSS relative al layout