Con la crescente necessità di siti web adattivi per dispositivi mobili, è essenziale sapere come creare tabelle che si adattino a diverse dimensioni dello schermo. Ecco una guida su come realizzare tabelle responsive in HTML5.
Passo 1: Creare una Tabella di Base Inizia creando una tabella standard usando i tag <table>, <tr>, <th>, e <td>.
<table>
<thead>
<tr>
<th>Intestazione 1</th>
<th>Intestazione 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
<!-- Altre righe di dati -->
</tbody>
</table>
Passo 2: Stilizzare con CSS Utilizza CSS per migliorare l'aspetto della tua tabella.
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px 12px;
border: 1px solid #ddd;
}
Passo 3: Rendere la Tabella Responsive Il trucco per rendere una tabella responsive è avvolgerla in un div con overflow scrollabile.
<div class="table-responsive">
<!-- La tua tabella qui -->
</div>.table-responsive {
overflow-x: auto;
}
Questo permetterà agli utenti di scorrere orizzontalmente sulla tabella se la larghezza dello schermo è troppo piccola per visualizzare l'intera tabella.
Passo 4: Adatta per Dispositivi Mobili (Opzionale) Se vuoi un approccio più avanzato per dispositivi mobili, puoi utilizzare le media queries per modificare la visualizzazione della tabella su schermi più piccoli.
@media screen and (max-width: 767px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { margin: 0 0 1rem 0; }
td {
border: none;
border-bottom: 1px solid #ddd;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
td:nth-of-type(1):before { content: "Intestazione 1"; }
td:nth-of-type(2):before { content: "Intestazione 2"; }
/* Aggiungi altri secondo il numero di colonne */
}
Con questa media query, la tabella verrà visualizzata come una lista per dispositivi con una larghezza dello schermo inferiore a 767px.
Ecco un esempio di tabella responsive su W3Schools.
Conclusione: Rendere le tabelle responsive può sembrare complesso, ma seguendo questi passaggi, sarai in grado di garantire una presentazione chiara dei tuoi dati su tutti i dispositivi.