Come si fa una tabella in HTML

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.

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:

La tabella apparirà nel modo seguente:

Prima ColonnaSeconda Colonna
Cella 1Cella 2
Cella 3Cella 4
Cella 5Cella 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. Infatti se vuoi colorare di un diverso colore una riga della tua tabella è semplice devi fare cosi, ecco un esempio:

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Tabella HTML Colori

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!


Social media & sharing icons powered by UltimatelySocial