Home PC Tabelle, come è strutturata una tabella nel linguaggio (X)HTML, guida

Tabelle, come è strutturata una tabella nel linguaggio (X)HTML, guida

65
0

Le tabelle. Piccola introduzione e guida per principianti

Una tabella permette di suddividere in più settori una pagina web. Anche se negli ultimi anni il tag <table> è stato spesso sostituito dagli sviluppatori di siti web con il tag <div>, soprattutto nel design e nella struttura di template per i blog, in alcune situazioni per qualcuno è ancora da preferirsi, specie se si ha in testa di costruire un sito informativo che non punta tutto sulla grafica e quindi sulla gestione di molte immagini. In questo post non staremo a parlare di quale delle due tipologie sia la migliore, però, considerato che svolgono la stessa funzione, diremo che la tipologia <table> è da preferirsi qualora la pagina che vogliamo costruire non sia già molto pesante, in termini di KB, non punti tutto sull’impatto grafico e si cerca la semplicità. Comunque, ciò non esclude che sia <table> che <div> possano coesistere. Come è strutturata la tabella, guida base:

  1. <table> Tabella </table>
  2. <table align=””>, allinea la tabella al centro [center], sinistra [left] o destra [right] rispetto alla pagina.
  3. <table valign=””>, allinea in verticale il contenuto delle celle, sopra [top], sotto [bottom] o centrale [middle]
  4. <table width=” (larghezza tabella)  height= (altezza tabella) border=”” (dimensioni del bordo, che vanno da 0px in su, indicando zero il bordo sarà nullo) bodercolor=”#colore” (colore del bordo, se esiste) cellspacing=”” (spazio tra le celle e il contorno tabella, sempre in pixel) cellpadding=”” (spazio tra ciò che sta all’interno della cella ed il bordo della cella) background=”percorso immagine” (immagine di sfondo tabella) bgcolor=”#colore” (colore di sfondo tabella)
  5. <tr>, da inserire subito dopo <table>, sta ad indicare il numero di righe per tabella, cioè, scrivendo il tag di apertura e chiusura <tr></tr> abbiamo inserito una riga. <tr valign=””> (scegliere tra top, middle, bottom e baseline. Sta ad indicare la posizione di ciò che sta all’interno della riga, se in alto, al centro o in basso) <tr align=””> (come per la tabella, ma solitamente non si usano per i tag <tr>) bgcolor=”#colore” (colore di sfondo della riga)
  6. <td>, da inserire subito dopo <tr>, sta ad indicare il numero di colonne per tabella (e i, cioè, scrivendo il tag di apertura e chiusura <td></td> abbiamo separato una riga. Ed è tra questi tag che va inserito il corpo della colonna. A differenza del tag <tr> quello <td> va moltiplicato per il numero delle righe (di solito), cioè, per disegnare qualcosa del genere (vedi tabella sotto a sinistra) dobbiamo avere nel codice 3 righe (quindi 3 settori <tr></tr>) e 2 colonne (quindi 2×3, 6 tag complessivi <td></td>, 2 per ogni settore <tr>):
Cella 1Cella 2
Cella 3Cella 4
Cella 5Cella 6

Si considerano sempre tutti i tag detti in precedenza, altezza, larghezza, style (quest’ultimo, molto importante per le celle proprio perché può andare a modificare dettagli differenti per ognuna. Ad esempio, se vogliamo che la cella 1 abbia un bordo verde e uno sfondo giallo, il <td> di quella cella diverrà:

<td style=”border:1px; border-color:#00CC00; background-color:#FFFF33“> e questo in azzurro è CSS (Cascading Style Sheet), vengono usati per definire la rappresentazione di documenti HTML, XHTML e XML, ricordare che in CSS si usano : invece di =.

In definitiva, abbiamo questo codice:
<table width="200" border="1" cellspacing="0" cellpadding="0">

<tr>

<td style="border:1px; border-color:#00CC00; background-color:#FFFF33"></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

E quindi questa tabella: tabella1

Se vogliamo una tabella diversa, di questo tipo ad esempio:

cella (testata)

cellacellacella

Il codice diventa:

<table width="300" border="1" cellspacing="0" cellpadding="0">

<tr>

<td colspan="3"></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

Come si può notare, i tag <td> delle colonne si sono separati e non sono più a coppie, tra la prima riga in alto (testata) e le tre celle in basso. Altro esempio:

cella

cella

cella
cella

cella


<table width="300" border="1" cellspacing="0" cellpadding="2">

<tr>

<td rowspan="2"></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

Cosa sono colspan e rowspan: Colspan è il comando necessario da inserire per far “saltare” il bordo, da una cella all’altra, di una determinata riga. Nel primo esempio abbiamo visto un codice così <td colspan=”3″> dove quel 3 sta ad indicare il numero di salti che ha fatto la cella testata, sulle 3 colonne. Rospan è il comando necessario da inserire per far “saltare” il bordo, da una cella all’altra, di una determinata colonna: <td rowspan=”2″> salti della colonna su 2 righe. 

Lascia un commento se vuoi