Introduzione
In questo articolo vedremo come creare una tabella e curare il suo aspetto con CSS. Se vi serve o siete interessati continuate a leggere!!
Questa lezione è un ottimo esempio della differenza di ruolo fra HTML e CSS che dicevamo nello scorso articolo.
Prima di tutto: HTML
Per prima cosa dobbiamo “costruire” la tabella usando HTML. Per fare ciò utilizzeremo il tag table, usato dentro al body.
Adesso andiamo a definire le righe della nostra tabella. Per farlo useremo il tag tr:
In mezzo ai tr andremo a definire le componenti della riga, e quindi le colonne della nostra tabella. Se nella riga ci dovrà essere un titolo useremo th, altrimenti td.
Invece se vogliamo aggiungere un titolo alla tabella ci basterà sistemare sotto table il tag caption
Questa tabella però risulterà scarna.
Per risolvere e dare una bella grafica alla nostra tabella ricorreremo a CSS!
Oggi lo utilizzeremo come CSS interno (visto nello scorso articolo). Quindi apriamo nell’head gli style e andiamo a impostare la grafica della tabella.
All’interno del CSS andremo a “chiamare” ogni elemento utilizzato nel body in HTML per impostargli delle proprietà. In questo caso stiamo impostando proprietà comuni alla tabella (table), alle caselle-titolo (th) e alle caselle normali (td). Per esempio possiamo impostare il colore del bordo (border).
In questo caso abbiamo impostato i bordi con la grandezza di 1 pixel e li abbiamo resi visibili e neri.
Per il momento la tabella ha i bordi separati, possono non piacere molto… In caso.. Non resta che sistemarli! E per fare questo li faremo “collassare” fra di loro.
Ecco che il risultato subito cambia:
Possiamo anche non limitarci a questo. Possiamo modificare un elemento singolo alla volta, o addirittura una singola casella o riga. Adesso vediamo come.
In questo modo abbiamo modificato lo sfondo di tutte le caselle th, stesso concetto vale per le caselle td. Ovviamente in questo secondo caso scriveremo td al posto di th.
E vediamo subito che la nostra tabella si colora!
Possiamo anche modificare per righe. In questo caso possiamo distinguere tra righe pari (even) oppure dispari (odd).
!!Il programma non è lo stesso di prima!! Abbiamo aggiunto una riga per mostrare meglio gli effetti e come vedete lo style è diverso.
Adesso osserviamo i risultati! Questo tipo di colorazione può tornare molto utile in elenchi molto lunghi per esempio.
Gli ID
Come vi abbiamo anticipato prima con CSS si può modificare anche solo una casella: come? Con gli ID! (Come avrete immaginato dal titolo del paragrafo…).
Gli ID sono delle parole che fungono da “etichette” per degli elementi, sono il loro codice identificativo. In questo modo se li chiamiamo andiamo a modificare solo l’elemento corrispondente all’ID scelto.
Facciamo une esempio. E per farlo userò un altro programma rispetto a quelli mostrati precedentemente.
La prima cosa da fare è identificare un elemento con un certo ID usando la sintassi dell’immagini qui sopra.
Poi dobbiamo chiamare nel CSS l’ID scelto ponendoci davanti un #. Sarebbe più opportuno esplicitare anche di che elemento generale si tratta(come p, td, tr, table, h1, etc…), ma se un ID è veramente univoco questa procedura risulta superflua. Adesso vediamo come farlo.
!!FAI ATTENZIONE non ci deve essere uno spazio fra l’elemento e l’ID e RICORDA SEMPRE il #.
Adesso mettiamo una foto con più ID e il risultato finale.
In questo programma ci sono entrambe le modalità per “chiamare” gli ID.
Alla prossima!
Beh anche questo articolo è completato. Grazie per averci seguito. Ricorda di consigliarci iniziative o chiarimenti nel forum o nei commenti qui sotto.
Buon coto a tutti!