Tabelle HTML per Progettare e Costruire Siti Web
Creare Tabelle HTML senza conoscere la programmazione
In questo facile tutorial HTML imparerai a creare griglie dati per ordinare i contenuti della tua pagina in una struttura composta di tabelle html esempi pronti ed infine un consiglio su come fare tabelle html css.
Per chi consiglio questo libro
Web Designer e programmatori
Editori di contenuti online (copywriter)
Team di marketing ed e-commerce
Blogger e appassionati
Cosa imparerai:
- Scrivere codice HTML e CSS3
- Strutturare siti e pagine web
- Lavorare con immagini, audi e video
- Controllare la tipografia e il layout
Struttura Tabelle HTML
Come prima cosa prima di passare alla pratica devi sapere che la struttura di una tabella html è quella struttura composta da più righe e colonne, dove nei suoi elementi che la compongono chiamate celle potrai inserire i contenuti informativi o immagini della tua pagina web.
Per creare la tua prima tabella HTML non ti servirà essere un programmatore esperto ma ti sarà utile conoscere i principi base della programmazione HTML per costruire le tue pagine web. Se ancora non hai letto come creare un blog ti consiglio di farlo, ti sarà utile. Inoltre, visto che questo argomento ne coinvolge altri ti consiglio di leggere anche come fare un elenco puntato html, uno degli altri fondamentali per abbellire e migliorare la ux design del tuo sito web.
Consiglio
Non sottovalutare queste informazioni! infatti, devi sapere che sempre meno siti web costruiscono le loro pagine usando le tabelle html5 ma sicuramente la struttura tabellare è la più usata tuttoggi, quindi imparare le fondamenta di questo tipo di funzione è indispensabile nella costruzione di un sito web professionale.
Come costruire tabelle in HTML.
ecco qui di seguito tutti i tag e qualche esempio di qualche tabelle html pronte
Table
è il TAG principale che conterrà le righe e le colonne della tabella
thead
è il TAG principale che conterrà l’intestazione
Tr
è il TAG principale per creare una cella vuota (anche chiamato table row)
Esempio
| Table 1 | Table 2 | Table 3 | Table 4 |
|---|
tbody
questo tag è quello che conterrà i dati sotto il
| Table 1 | Table 2 | Table 3 | Table 4 |
|---|
Esempio Tabella HTML completa
copia ed incolla sulla tua pagina web questa tabella html pronta, ecco qui il codice:
<table>
<thead>
<tr>
<th>Table 1</th>
<th>Table 2</th>
<th>Table 3</th>
<th>Table 4</th>
</tr>
</thead>
</table>
<h2>tbody</h2>
questo tag è quello che conterrà i dati sotto il
<table>
<thead>
<tr>
<th>Table 1</th>
<th>Table 2</th>
<th>Table 3</th>
<th>Table 4</th>
</tr>
</thead>
<thead></thead>
</table>
<h2>Esempio Tabella HTML completa</h2>
<table>
<thead>
<tr>
<th>Titolo</th>
<th>titolo 2</th>
<th>Titolo 3</th>
<th>Titolo 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sotto titolo 1</td>
<td>cella 2</td>
<td>cella 3</td>
<td>cella 4</td>
</tr>
<tr>
<td>Sotto titolo 2</td>
<td>cella 2</td>
<td>cella 3</td>
<td>cella 4</td>
</tr>
<tr>
<td>Sotto titolo 3</td>
<td>cella 2</td>
<td>cella 3</td>
<td>cella 4</td>
</tr>
</tbody>
</table>
Questo qui sotto è il risultato dell’esempio.
| Titolo | titolo 2 | Titolo 3 | Titolo 4 |
|---|---|---|---|
| Sotto titolo 1 | cella 2 | cella 3 | cella 4 |
| Sotto titolo 2 | cella 2 | cella 3 | cella 4 |
| Sotto titolo 3 | cella 2 | cella 3 | cella 4 |
Tabelle HTML CSS
Potresti aver bisogno di creare tabelle più complesse per migliorare le pagine del tuo sito web, allora puoi scegliere di usare i Div o gli elenchi puntati per creare fantastiche tabelle. Se vuoi fare la differenza ti consiglio di installare GetBootstrap sul tuo sito web sono sicuro che otterrai risultati professionali.
Installa BooStrap CSS al tuo tema WordPress
Leggi questa guida Gratuita!
Come fare una tabella HTML in maniera semplificata
Se hai scelto di creare una tabella in WordPress o attraverso una qualsiasi altra piattaforma web in questa guida html troverai tutte le informazioni necessarie per creare tabelle HTML in maniera semplice per arricchire di contenuti interessanti il tuo sito web.
Come si fa una tabella in HTML?
Le tabelle HTML sono indispensabili se si vuole mostrare nella tua pagina web una “lista tabellare” che dia un po di ordine agli elementi la quale contiene. Un esempio minimalista di una tabella di due righe e due colonne è il seguente:
<tr><td>Prima Colonna</td><td>Seconda Colonna</td></tr>
<tr><td>Cella 1</td><td>Cella 2</td></tr>
<tr><td>Cella 3</td><td>Cella 4</td></tr>
<tr><td>Cella 5</td><td>Cella 6</td></tr>
</table>
La tabella apparirà nel modo seguente:
| Prima Colonna | Seconda Colonna |
| Cella 1 | Cella 2 |
| Cella 3 | Cella 4 |
| Cella 5 | Cella 6 |
Adesso che hai imparato come fare una Tabella Html, vediamo le sue caratteristiche e impariamo a ottimizzarla per il tuo sito web. Una tabella è composta da celle le quali possono essere controllate tramite CSS oltre che ai tag aggiuntivi: caption, thead, tbody, Th, tfoot
- Caption: Corrisponde al titolo della tabella “la tabella apparirà nel modo seguente”
- thead: sono i titoli delle colonne “Prima Colonna” e “Seconda colonna” nel nostro esempio sopra riportato
- Tbody: Raggruppa le righe che contengono il corpo della tabella
- th: è la cella che contiene un intestazione
- tfoot: indica il footer della tabella, praticamente l’ultima riga in basso.
Tutto ciò è personalizzabile con colori, dimensioni e comportamenti html. In una Tabella html potrai inserire elenchi puntati, immagini per creare bellissime gallerie fotografiche, o altri elementi a tuo piacimento. Per farlo dovrai aggiungere una classe CSS alla tabella.
