Abbiamo visto nella lezione precedente come creare una tabella e come sia possibile modificare la sua struttura, vediamo adesso alcuni degli attributi più interessanti:.
Oltre al già citato border, una tabella ha molti altri attributi, per esempio per regolare lo spazio fra una cella e l’altra o lo spazio fra il bordo ed il contenuto della cella si adopera border-spacing (non supportato dai browser IE) e padding.
Questo il codice nel foglio di style:
border: solid 2px #000000;
text-align: center;
}
td {
solid 1px #000000;
color: Black;
background: #F1EBAD;
padding: 18px;
}
Questo il codice html:
<tr>
<td colspan=”3″> riga 1 su 3 colonne </td>
</tr>
<tr>
<td> colonna 1 </td>
<td> colonna 2 </td>
<td> colonna 3 </td>
</tr>
<tr>
<td colspan=”3″> fine con riga su 3 colonne </td>
</tr>
</table>
Questo il risultato :
| riga 1 su 3 colonne | ||
| colonna 1 | colonna 2 | colonna 3 |
| fine con riga su 3 colonne | ||
Ad una tabella è possibile assegnare una larghezza predefinita impostando dei valori fissi (numero di pixel) o in qualsiasi altro valore ammesso dai fogli di style, come per esempio “%” in percentuale rispetto alla larghezza della finestra del browser. Si raccomanda di usare valori fissi per evitare che la tabella si ridimensioni dinamicamente con risoluzioni video diverse dalla nostra, sconvolgendo di fatto l’impaginazione iniziale.
L’attributo per impostare la larghezza è width che oltre alla tabella è possibile assegnare anche alle singole celle, a questo proposito si consideri che in una colonna di celle dove vi fossero valori diversi per ogni singola cella avrà prevalenza la cella più larga che costringerà tutte le altre (facenti parte della stessa colonna) ad adeguarsi alla sua misura.
Senza una definizione di dimensioni la tabella risulterà essere dinamica, ovvero si allargherà a seconda del contenuto delle sue celle, qui sotto lo stesso esempio visto sopra con del testo aggiuntivo sulle varie celle per dare l’idea di cosa succede.
| cella 1 aggiungo del testo in questa cella in modo che si noti meglio cosa succede alla tabella che non avendo dimensioni impostate si allarga fino a raggiungere il massimo dello spazio disponibile, in questo esempio lo spazio è dato dall’elemento progenitore che contiene questa tabella o avrebbe raggiunto i bordi della finestra del browser. | ||
| cella 2 colonna 1 aggiungo del testo così da verificare l’effetto su tre colonne | cella 3 colonna 2 | cella 4 colonna 3 |
| cella 5 colonna 1 | cella 6 colonna 2 | cella 7 colonna 3 |
| cella 8 con riga su 3 colonne | ||
La tabella si è allargata fino alle sue misure massime per via del testo scritto nella cella 1 che con colspan 3 occupa lo spazio di tre colonne, la cella 2 che forma la colonna 1 ha molto testo che ne allarga le dimensioni adeguando alle stesse anche la colonna 5 che ha meno testo.
Vediamo cosa succede assegnando adesso un valore di width 450 pixel a tableed un valore del 33% a td. La stessa tabella risulta con una larghezza fissa e con celle delle stesse dimensioni ( 33% = un terzo delle dimensioni della tabella), in questo caso è il testo ad adattarsi dinamicamente alle misure impostate.
| cella 1 aggiungo del testo in questa cella in modo che si noti meglio cosa succede alla tabella che non avendo dimensioni impostate si allarga fino a raggiungere il massimo dello spazio disponibile, in questo esempio lo spazio è dato dall’elemento progenitore che contiene questa tabella o avrebbe raggiunto i bordi della finestra del browser. | ||
| cella 2 colonna 1 aggiungo del testo così da verificare l’effetto su tre colonne | cella 3 colonna 2 | cella 4 colonna 3 |
| cella 5 colonna 1 | cella 6 colonna 2 | cella 7 colonna 3 |
| cella 8 con riga su 3 colonne | ||
Il bordo è possibile definirlo singolarmente e persino differentemente per ognuno dei 4 lati di una cella, abbiamo visto negli esempi precedenti che è possibile impostare il valore numerico in pixel per il suo spessore, adesso con la proprietà border-color: inserita nel CSS è possibile definire il colore ma esiste anche il tipo di bordo.
border: solid 1px #000000;
border-color: #ff0000;}
Quello da noi adoperato fino a questo momento è sempre stato solid ma ne esistono altri che però non tutti sono supportati dai vari browser. Vediamoli descritti con il relativo esempio, ovviamente chi non dovesse vedere differenze sarà soltanto a causa del proprio browser.
Queste le parole chiave per definire il tipo di bordo:
| solid | linea continua. |
| dotted | punteggiato. |
| dashed | tratteggiato. |
| double | doppia linea continua. |
| groove | scavato. |
| ridge | sbalzato; l’opposto di groove. |
| inset | premuto. |
| outset | sollevato; l’opposto di inset. |
| hidden | nascosto. |
Ecco il risultato per i browser che supportano i vari tipi.
| bordo solid 1 pixel | bordo solid 1 pixel |
| bordo dotted 1 pixel | bordo dotted 1 pixel |
| bordo dashed 1 pixel | bordo dashed 1 pixel |
| bordo double 5 pixel | bordo double 5 pixel |
| bordo groove 5 pixel | bordo groove 5 pixel |
| bordo ridge 5 pixel | bordo ridge 5 pixel |
| bordo inset 5 pixel | bordo inset 5 pixel |
| bordo outset 5 pixel | bordo outset 5 pixel |
Abbiamo detto che IE non supporta la proprietà border-spacing che regola lo spazio fra i bordi delle celle e fra il bordo delle celle e quello della tabella. Per eliminare questo spazio esiste la proprietà border-collapse che accetta due valori: separate e collapse, rispettivamente per separare o unire le celle:
| border-collapse: separate 10px; | IE separa ma ignora i 10 pixel |
| border-collapse: collapse; | i bordi collassano |
Le celle possono essere allineate oltre che orizzontalmente (con le stesse proprietà e modalità viste per l’allineamento del testo) anche verticalmente con la proprietà: vertical-align: che oltre ai valori numerici accetta le seguenti parole chiave: top, middle, bottom, super, sub, baseline, text-top, text-bottom.
| colonna 1, aggiungo del testo al solo scopo di allungare la cella e risaltare l’allineamento verticale delle altre celle. | vertical-align: top; | vertical-align: middle; | vertical-align: bottom; |
Si possono cambiare i colori dei bordi ed anche quelli degli sfondi questi ultimi possono essere fatti oltre che da tinte unite anche da immagini grafiche di tipo gif, jpg o png, proprio come abbiamo visto in precedenza per lo sfondo della pagina web e per questo valgono le stesse regole.
| colore verde come sfondo della cella e bordo color rosso | colore giallo come sfondo della cella e bordo color blue | colore rosso come sfondo della cella e bordo color verde | colore blue come sfondo della cella e bordo color giallo con testo color bianco |
| immagine jpg come sfondo della cella e bordo color rosso | immagine gif come sfondo della cella e bordo color blue | immagine jpg come sfondo della cella e bordo color verde | immagine jpg come sfondo della cella e bordo color giallo |
Con questa lezione abbiamo imparato ad usare le tabelle per mostrare i dati in modo più ordinato ed elegante.
Nella prossima lezione vedremo i moduli, meglio conosciuti come “forms” che servono per comunicare, e quindi interagire, direttamente col visitatore del nostro sito.
Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.