Le taBELLE: davvero così brutte?

Eccoci di nuovo insieme!

Prima di realizzare un vero e proprio sito internet completo, impariamo a usare le tabelle.

Le tabelle sono uno strumento facile da utilizzare e che permette di creare layout graziosi e ordinati anche a chi ancora non conosce i CSS. Premetto che, nonostante il nome, non si tratta di un elemento bello da usare; ad oggi, non è assolutamente consigliabile realizzare un layout di un intero sito a tabelle, risulterebbe poco usabile e obsoleto, ma a noi faranno comodo per esercitarci e imparare con uno strumento semplice da usare. 

Cos’è una tabella? È una griglia composta da righe e colonne; quando una riga incontra una colonna si forma una cella. Per definire l’inserimento di una tabella, useremo il tag <table>; all’interno del tag <table> troveremo il tag <tr>, che andrà ad indicare il numero di righe. All’interno di un singolo tag <tr>, sarà possibile inserire un tot di celle: tag <td>. 
Il tutto sempre rispettando il principio delle matriosche. 

L’elemento <td> è il contenitore dei dati della tabella. Questo può contenere ogni sorta di elemento html: testo, immagini, collegamenti e addirittura altre tabelle.

Immaginiamo di voler disegnare una tabella con 3 righe e tre colonne; il codice sarà il seguente:

Come possiamo vedere dall’anteprima sulla destra, non è che sia un granché, anzi, diciamolo, è ‘na schifezza, un foglio Excel avrebbe più appeal. 

Quindi condiamo la nostra tabella con diversi attributi che inseriremo nel tag principale (<table>):

• Una larghezza maggiore dichiarata in termini di pixel: width="900" 
• La centreremo con align="center"
• Possiamo ancora inserire un bordo per visualizzarla meglio (più il numero cresce, più il bordo sarà spesso): border=”1”
• Assegneremo una larghezza personalizzata alle celle della prima riga (width) e un’altezza personalizzata alle righe (height)

Ecco il codice con i nuovi attributi e il risultato che ne consegue:

Questo è un ottimo punto di partenza per comunicare a gestire il layout della prima pagina di un sito. Ma non abbiam ancora finito. 

Per ottimizzare la griglia sarà necessario unire le celle della prima riga per fare spazio a un header (testata nella quale in genere troviamo head line e tag line, rispettivamente Titolo e sottotitolo) e unire quella dell’ultima riga per creare lo spazio per il footer (piede della pagina in cui in genere troviamo le informazioni di contatto). 

Per fare questo useremo un nuovo attributo: colspan. 
Colspan ha la funzione di unire le celle. Quante? Dipende dal numero che inseriremo fra le virgolette.
Se vogliamo unire le prime tre celle per fare spazio all’header, assegneremo 3 al valore del colspan; faremo la stessa cosa nelle tre celle dell’ultima riga. Assegnato un colspan ci toccherà sopprimere le celle in surplus eliminandole definitivamente…riposino in pace:

A questo punto non ci rimane altro che popolare le celle avendo cura di inserire un altro attributo per allineare il contenuto in alto (non è bello che il testo si collochi in mezzo alla cella); useremo valign=”top” nella cella destinata al menù e in quella destinata ai contenuti. Se volessimo, poi, colorare le celle potremmo utilizzare all’interno della cella l’attributo bgcolor indicando nelle virgolette il codice esadecimale corrispondente alla tonalità che preferiamo. Qui è possibile recuperare i codici: https://www.web-link.it/colori-html.html

Ecco, infine il codice completo della prima pagina:

Non perdetevi il prossimo articolo: completeremo il nostro primo sito!
Nel frattempo buon divertimento!

Vuoi approfondire gli argomenti?
Scegli un corso SinerVis e formati con i professionisti del settore 👇