Formattazione delle tabelle

di

TABLE

  • align (left/center/right), posizione della tabella nella pagina
  • bgcolor, colore dello sfondo
  • border, spessore della cornice in pixel
  • cellpadding, spazio all’interno delle celle in pixel
  • cellspacing, spazio tra le celle in pixel
  • width, larghezza della tabella in pixel o in percentuale

TR

La formattazione si applica a tutte le celle della riga

  • align (left/center/right/justify), allineamento orizzontale del contenuto
  • bgcolor, colore di sfondo
  • height, altezza in pixel
  • valign (top/middle/bottom), allineamento verticale del contenuto

TD / TH

La formattazione si applica alla singola cella

  • align (left/center/right/justify), allineamento orizzontale del contenuto
  • bgcolor, colore di sfondo
  • colspan, Vedi…
  • rowspan, Vedi…
  • valign (top/middle/bottom), allineamento verticale del contenuto
  • width, larghezza in pixel o in percentuale (si applica a tutta la colonna)

RIEPILOGO

Gli attributi compaiono nei tag dove hanno senso…

TABLE

TABLE ROW

TABLE DATA
TABLE HEADER
align align align
bgcolor bgcolor bgcolor
border
cellpadding
cellspacing
colspan
height
rowspan
valign valign
width width

Esercizi

Prova delle combinazioni di

  • bgcolor, colore della tabella / di una riga / di una cella
  • cellspacing, cellpadding, (0,0) / (0,10) / (10,0) / (10,10)
  • align, “left” / “center” / “right”
  • valign, “top” / “middle” / “bottom”
  • align, valign, i contenuti lontani dalla cella centrale 
    +------------+------------+------------+
| top        |    top     |        top |
| left       |   center   |      right |
|            |            |            |
|            |            |            |
+------------+------------+------------+
|            |            |            |
| middle     |   middle   |     middle |
| left       |   center   |      right |
|            |            |            |
+------------+------------+------------+
|            |            |            |
|            |            |            |
| bottom     |   bottom   |     bottom |
| left       |   center   |      right |
+------------+------------+------------+
  • align, valign, i contenuti vicini alla cella centrale 
    +------------+------------+------------+ 
|            |            |            | 
|            |            |            | 
|     bottom |   bottom   | bottom     | 
|      right |   center   | left       | 
+------------+------------+------------+
|            |            |            |
|     middle |   middle   | middle     |
|      right |   center   | left       |
|            |            |            |
+------------+------------+------------+
|        top |    top     | top        |
|      right |   center   | left       |
|            |            |            |
|            |            |            |
+------------+------------+------------+