Html, le tabelle

I “Guru” della nuova informatica tendono a dare ordine e linearità a un sito ricorrendo ai “Fogli di Stile”, perchè è così che vuole il W3C… Accenneremo ai “Fogli di Stile” piu avanti, ma io sostengo che l’ordine che danno le tabelle a un documento web, è ineguagliabile. Bene, ora che sapete che le tabelle sono alla base della struttura di una pagina web, vediamo di fare la loro amicizia ok?

Cominciamo subito a dire che le unità di misura utilizzate per le tabelle sono due, ossia, pixel e le percentuali. Utilizzando la misura in pixel, la tabella sarà del tipo fissa, ossia, qualsiasi risoluzione video i vostri utenti utilizzino, la tabella sarà visualizzata sempre con le stesse misure. Se invece utilizzate una misura in percentuale, la tabella diventerà del tipo fluida, ovvero, si adatterà automaticamente alla risoluzione video dei vostri utenti. Ecco un esempio per capire meglio questo concetto.

Supponiamo che realizziate una tabella di 400 pxl. I vostri utenti visualizzeranno in video sempre 400 pxl, a prescindere da qualsiasi risoluzione essi adoperino. Se invece realizzate una tabella di 80% questa prenderà l’80% dello schermo dei vostri utenti…sempre e comunque.

Quindi diremo in sintesi che esistono due tipologie di tabelle, fissa e fluida che si distinguono dall’unità di misura utilizzata per la loro realizzazione. In conclusione possiamo tranquillamente dire che le tabelle regolano il Layout di una pagina web, ovvero la rappresentazione grafica in video.

Dopo aver visto cosa sono le tabelle e a cosa servono, cominciamo a realizzarne una. Diciamo subito che le tabelle possono essere divise in righe e colonne e l’unione di questa divisione costituisce le celle della tabella. Una tabella deve contenere almeno una riga per poter essere valida! Vediamo allora qualche esempio per capire meglio quanto detto sopra:

Bene, fatta questa importante premessa, passiamo a realizzare una tabella di 400 pixel a una riga. Per realizzare una tabella viene utilizzato il tag table unito ad altri parametri che regolano l’aspetto della tabella stessa. Ecco allora la nostra tabella con questi parametri che commenteremo in seguito:

In questo esempio abbiamo impostato il bordo detta tabella a 1pxl attraverso l’attributo border così come abbiamo impostato la lunghezza a 400pxl attraverso l’attributo width. In questo esempio svolto, non abbiamo inserito righe, ma se è vero che una tabella per essere valida deve avere almeno una riga….inseriamola ora.

Attraverso l’utilizzo di tr abbiamo inserito una riga alla nostra tabella. Potete notare che con il solo inserimento di tr, se pur valido, in video non verrà mostrato nulla. Serve il terzo elemento base per la realizzazione di una tabella e l’elemento è td che crea una cella nella tabella. Ecco allora i tre elementi base per una tabella, ovvero table, tr e td.

Ricapitolando, abbiamo creato una tabella lunga 400pxl, con un bordo di 1pxl, formata da una riga e una cella. Ecco la nostra tabella:

Nelle prossime lezioni vedremo come aggiungere celle, unire le celle e molti altri elementi delle tabelle.