CSS - Tabelle

Benvenuti, futuri sviluppatori web! Oggi ci immergeremo nel mondo delle tabelle CSS. Come il vostro amico insegnante di scienze informatiche del vicinato, sono entusiasta di guidarvi in questo viaggio. Le tabelle potrebbero sembrare vecchio stile, ma credibility, sono ancora incredibilmente utili nel design web moderno. Allora, mettiamo le mani al lavoro!

CSS Tabelle - Collapsa Bordi

Immaginate di costruire un recinto intorno al vostro giardino. Vuole che i pali del recinto toccino друг друга, vero? Questo è esattamente ciò che fa border-collapse per i bordi delle tabelle. Determina se i bordi delle celle dovrebbero essere separati o collassati in un singolo bordo.

table {
border-collapse: collapse;
}

Questo codice farà sì che i bordi della vostra tabella si toccino, creando un aspetto pulito e unito. È come dare alla vostra tabella un taglio di capelli ordinato!

CSS Tabelle - Spazio tra Bordi

Ora, cosa succede se volete un po' di spazio tra le vostre celle di tabella? È qui che entra in gioco border-spacing. È come il distanziamento sociale per le vostre celle di tabella!

table {
border-spacing: 5px;
}

Questo aggiungerà una lacuna di 5 pixel tra le vostre celle. Potete persino impostare spazi diversi orizzontali e verticali:

table {
border-spacing: 5px 10px;
}

Qui, abbiamo 5 pixel di spazio orizzontale e 10 pixel di spazio verticale. È come dare alle vostre celle di tabella un po' di spazio personale!

CSS Tabelle - Lato Didascalia

Le tabelle possono avere didascalie, e potete controllare dove queste didascalie appaiono utilizzando caption-side. È come decidere se mettere il titolo di un libro in alto o in basso sulla copertina.

caption {
caption-side: bottom;
}

Questo posizionerà la didascalia della vostra tabella in basso. Potete anche usare top se preferite che sia in alto.

CSS Tabelle - Celle Vuote

Avete mai pensato a cosa succede alle celle vuote nella vostra tabella? La proprietà empty-cells vi permette di decidere se mostrarle o nasconderle.

table {
empty-cells: hide;
}

Questo renderà le celle vuote invisibili. È come giocare a nascondino con le vostre celle di tabella!

CSS Tabelle - Layout della Tabella

La proprietà table-layout determina come le celle, le righe e le colonne della tabella sono disposte. È come scegliere tra un seating chart rigoroso e una cena informale a volontà.

table {
table-layout: fixed;
}

Questo imposta un layout fisso della tabella, che può migliorare la velocità di rendering per le tabelle grandi.

CSS Tabella - con Layout Fisso

Con un layout fisso, la larghezza della tabella è determinata dalla prima riga o dalle larghezze specificate. È come avere posti assegnati a una cena di nozze.

table {
table-layout: fixed;
width: 100%;
}

th, td {
width: 25%;
}

Questo crea una tabella con quattro colonne di larghezza uguale, indipendentemente dal contenuto.

CSS Tabella - con Layout Automatico

Un layout automatico aggiusta le larghezze delle colonne in base al loro contenuto. È come lasciare che gli ospiti scelgano i loro posti a una cena informale.

table {
table-layout: auto;
width: 100%;
}

Qui, il browser aggiusterà le larghezze delle colonne in base al loro contenuto.

CSS Tabelle - Altezza e Larghezza

Potete controllare la dimensione della vostra tabella e delle sue celle utilizzando le proprietà height e width. È come decidere quanto grande dovrebbe essere il vostro tavolo da pranzo.

table {
width: 100%;
}

td {
height: 50px;
}

Questo imposta la larghezza della tabella al 100% del suo contenitore e l'altezza di ciascuna cella a 50 pixel.

CSS Tabelle - Allineamento della Tabella

Allineare il contenuto all'interno delle celle della tabella è cruciale per la leggibilità. È come organizzare il cibo su un piatto - la presentazione è importante!

td {
text-align: center;
vertical-align: middle;
}

Questo centra il contenuto sia orizzontalmente che verticalmente all'interno di ogni cella.

CSS Tabelle - Bordi

I bordi possono rendere la vostra tabella più gradevole alla vista e più facile da leggere. È come disegnare linee su un pezzo di carta per organizzare le informazioni.

table, th, td {
border: 1px solid black;
}

Questo aggiunge un bordo solido nero da 1 pixel alla tabella e a tutte le sue celle.

CSS Tabelle - Colore di Sfondo

Aggiungere colori di sfondo può rendere la vostra tabella più gradevole alla vista e aiutare a distinguere diverse parti della tabella. È come dipingere le stanze della vostra casa con colori diversi.

table {
background-color: #f2f2f2;
}

th {
background-color: #4CAF50;
color: white;
}

Questo imposta uno sfondo grigio chiaro per la tabella e uno sfondo verde con testo bianco per le celle dell'intestazione.

CSS Tabelle - Stili di Font

Stilizzare il testo nella vostra tabella può migliorare notevolmente la leggibilità. È come scegliere il giusto font per un libro - può fare una grande differenza nell'esperienza di lettura.

table {
font-family: Arial, sans-serif;
}

th {
font-weight: bold;
}

td {
font-size: 14px;
}

Questo imposta Arial come font per l'intera tabella, rende il testo dell'intestazione in grassetto e imposta la dimensione del testo delle celle a 14 pixel.

CSS Tabelle - Altri Stili

Ci sono molti altri stili che potete applicare alle tabelle. Ecco una panoramica rapida:

Proprietà	Descrizione	Esempio
padding	Spazio interno delle celle	td { padding: 10px; }
border-radius	Angoli arrotondati	table { border-radius: 5px; }
box-shadow	Effetto ombra	table { box-shadow: 2px 2px 5px grey; }
opacity	Trasparenza	table { opacity: 0.8; }

CSS Tabelle - Margine

I margini possono dare alla vostra tabella un po' di spazio dagli altri elementi sulla pagina. È come lasciare dello spazio attorno a una cornice su un muro.

table {
margin: 20px auto;
}

Questo aggiunge un margine di 20 pixel in alto e in basso alla tabella e la centra orizzontalmente.

CSS Tabelle - Divisori (verticale / orizzontale)

Potete aggiungere divisori alla vostra tabella per separare le colonne o le righe. È come usare un righello per disegnare linee rette in un quaderno.

td, th {
border-right: 1px solid black;
}

tr {
border-bottom: 1px solid black;
}

Questo aggiunge linee verticali tra le colonne e linee orizzontali tra le righe.

CSS Tabelle - Tabella a Strisce

Le tabelle a strisce possono rendere più facile la lettura delle righe di dati. È come evidenziare ogni altra riga in un libro per mantenere il vostro posto.

tr:nth-child(even) {
background-color: #f2f2f2;
}

Questo crea righe alternate bianche e grigie nella vostra tabella.

CSS Tabelle - Tabella Responsiva

Rendere le tabelle responsive garantisce che她们 sembrino bene su tutti i dispositivi. È come avere un tavolo da pranzo che può espandersi o contrarsi in base al numero di ospiti.

@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
border: none;
position: relative;
padding-left: 50%;
}

td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
}
}

Questo codice trasforma la tabella in un formato simile a una lista su piccoli schermi, rendendola più facile da leggere sui dispositivi mobili.

CSS Tabella - Proprietà Correlate

Ecco una tabella delle proprietà correlate che potreste trovare utili quando lavorate con le tabelle:

Proprietà	Descrizione
border-collapse	Determina se i bordi delle celle sono separati o collassati
border-spacing	Imposta la distanza tra i bordi delle celle
caption-side	Specifica il placement di una didascalia della tabella
empty-cells	Imposta se visualizzare i bordi sulle celle vuote
table-layout	Imposta l'algoritmo utilizzato per disporre le celle, le righe e le colonne della tabella
vertical-align	Imposta l'allineamento verticale del contenuto in una cella
text-align	Imposta l'allineamento orizzontale del contenuto in una cella

Eccoci! Ora siete ben equipaggiati per creare e stilizzare tabelle in CSS. Ricordate, la pratica fa la perfezione, quindi non abbiate paura di sperimentare con queste proprietà. Buon coding!

Credits: Image by storyset