logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Come creare e modificare le tabelle

Sono lontani, o almeno dovrebbero esserlo, i tempi in cui si usavano le tabelle per impostare il layout della pagina di un sito Web. Ormai le tabelle vengono utilizzate esclusimante per presentare in maniera leggibile una serie di dati tabellari , appunto. L’avvento del codice javascript, ha permesso inoltre di aggiungere alle tabelle un pizzico di movimento, e di rendere il contenuto maggiormente leggibile da parte dell’utente. Ci riferiamo ovviamente alle tabelle riordinabili e ridimensionabili.

Le tabelle assumono, a prescindere dal loro utilizzo, un ruolo molto importante per il webmaster, e come tali devono essere utilizzate con appropriati style. In questa lezione, mostreremo, le sintassi e il codice css, che servono per gestire una tabella. Non ci dimentichiamo mai, che i CSS hanno dato un contributo notevole alla creazione delle tabelle e alla loro struttura grafica, e infatti alcune proprietà dei CSS sono destinate alla modifica stilistica delle tabelle.

Il supporto però, ricordiamolo subito, non è uniforme per tutti i browser. Mozilla Firefox come sempre brilla per la sua fedeltà agli standard, mentre Explorer su Windows cade su parecchi aspetti.

La prima proprietà che prenderemo in considerazione è:

1- table-layout: Questa proprietà viene usata per definire lo stile di una tabella. Si applica solo alle tabelle e non è ereditata.

   table2 { table-layout: auto; }

I due valori che possiamo inserire per questa proprietà, sono:

Nel caso del valore auto tutto è affidato al meccanismo di rendering del browser. Usando invece fixed possiamo definire a nostro piacimento, la larghezza della tabella usando la proprietà width. Quindi, se vogliamo creare una tabella di 400px, scriveremo questo codice:


    tabella {
                 table-layout: fixed;
                 width: 400px;
               }

Nella pagina di esempio abbiamo riportato un paio di casi speciali per spiegare meglio il meccanismo di questo funzionamento e sopratutto vediamo cosa succedese se impostiamo auto come valore della proprietà width e il comportamento dei vari browser in merito.


2- border-collapse: Questa seconda proprietà viene usata per specificare come dovranno essere trattati i bordi della tabella. Si applica solo alle tabelle ed è ereditata. Può assumere due valori: collapse e separate. La prima impone che, nel caso venga impostato un bordo, le celle della tabella debbano condividerlo; la seconda invece, impone che ciascuna cella della tabella abbia un proprio bordo, indipendente e separato da quelli delle altre.

   table { border-collapse: separate; }

Quindi, i due valori che possiamo inserire per questa proprietà, sono:

Lo spazio tra le celle e tra i bordi si imposta con la proprietà border-spacing.


   tabella3 {
                  border: 2px solid black;
                  border-collapse: separate;
                  border-spacing: 3px;
                }

Guardiamo la pagina di esempio che abbiamo visto prima.


3- border-spacing: Questa proprietà invece viene usata per impostare lo spazio tra due celle adiacenti della stessa tabella. Bisogna prestare attenzione però al fatto che se la proprietà border-collapse è impostata a collapse, border-spacing viene ignorata. Altro fattore da tenere in considerazione è il fatto che la spaziatura impostata andrà a sommarsi a quella impostata nel padding. Si applica solo alle tabelle ed è ereditata.

Richiede come parametri dei valori numerici; il primo imposta la spaziatura orizzontale, il secondo quella verticale. Nel caso venga dato un solo valore, questo verrà impostato sia per la spaziatura orizzontale che per quella verticale.

   table { border-spacing: 5px; }

Il solo valore quindi che possiamo inserire per questa proprietà, è:


4- empty-cells: Questa quarta proprietà riguarda le celle prive di contenuto visibile, cioè si occupa fondamentalmente di impostare lo sfondo ed i bordi delle celle vuote. Può essere utilizzata nel caso in cui la tabella usi i bordi separati e nel caso che border-collapse non sia impostato a collapse. Proprietà ereditata.

Però, bisogna anche specificare cosa si intende per cella contenente contenuto non visibile. Significa che la cella è del tutto priva di contenuto, che contiene solo elementi di ritorno, (caratteri, tabulazioni o spazi) e infine ha la proprietà visibility impostata ad hidden.

   table { empty-cells: hide; }

Quindi, i due valori che possiamo inserire per questa proprietà, sono:

Guardiamo la pagina di esempio che abbiamo visto prima.


5- caption-side: Quest' ultima proprietà è molto importante. Perchè? Le buone norme dell'accessibilità vogliono che una tabella sia sempre preceduta da una sorta di titolo, che la distingua. Nel linguaggio Xhtml questa funzione è attribuita appunto al tag <caption>. La proprietà caption-side definisce appunto il lato su cui vogliamo far comparire questo titolo. È ereditata. Viene però supportata solo da Mozilla Firefox.


  <table>
      <caption> Tabella entrate mese di Giugno </caption>
      <tr>
      <td>.....
  </table>

Per determinare l'allineamento orizzontale del testo è invece necessario impostare la propriet à text-align.

I quattro valori che si possono inserire per questa proprietà sono:


  table.tabella9 {
                        table-layout: fixed;
                        width: 300px;
                        caption-side: bottom;
                      }

Guardiamo la pagina di esempio che abbiamo visto prima.


Oltre al tag <table>, che abbiamo visto chiaramente identifica una tabella, esistono altri tag diversi per costruirla:

A- il primo è il tag <tr> che è usato per definire una riga di una tabella. È la sigla delle parole inglesi table row (cioè, appunto riga della tabella). Inizia e termina una riga orizzontale.

B- il secondo è sicuramente il tag <td> che crea una cella in una tabella. È la sigla delle parole inglesi table data (cioè, appunto dati della tabella). Questo tag inizia e termina ogni cella della riga della nostra tabella.

Il codice nel Css sarà articolato in questo modo:


<table>
   <tr>
     <td>Cella 1</td>
     <td>Cella 2</td>
   <tr>
     <td>Cella 3</td>
     <td>Cella 4</td>
   </tr>
</table>

Altri tag:

C- <tbody>: usato per raggruppare righe in una tabella, e delimita il corpo della stessa.

D- <tfoot>: usato per raggruppare righe in una tabella, ma identifica una riga conclusiva a piè di pagina.

E- <th>: utilizzato per creare celle di intestazione, all'interno del quale il contenuto sarà in grassetto.

F- <thead>: utilizzato per raggruppare righe in una tabella, e identifica una riga di intestazione.

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice