1 / 13

Le tabelle

Le tabelle. Marco Gribaudo marcog @di.unito.it http://www.di.unito.it/~marcog/Savigliano. P.s.: Queste slide sono state adattate da quelle della Prof. Cristina Gena ( http://www.di.unito.it/~cgena ), con spunti tratti dal materiale della Prof. Rossana Damiano

istas
Download Presentation

Le tabelle

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Le tabelle • Marco Gribaudo • marcog@di.unito.it • http://www.di.unito.it/~marcog/Savigliano P.s.: Queste slide sono state adattate da quelle della Prof. Cristina Gena (http://www.di.unito.it/~cgena), con spunti tratti dal materiale della Prof. Rossana Damiano (http://www.di.unito.it/~rossana). Marco Gribaudo - thanks to C. Gena e R. Damiano

  2. HTML • Le tabelle permettono di: • Inserire i testi in un area di dimensioni specificate • Allineare differentemente il testo • Colorare in modo diverso gli sfondi delle signole celle Marco Gribaudo - thanks to C. Gena e R. Damiano

  3. HTML Tabelle Per creare una tabella si usa il tag <table> istruzioni righe e celle della tabella </table> <table> ha vari attributi che servono per stabilire le caratteristiche della tabella Marco Gribaudo - thanks to C. Gena e R. Damiano

  4. HTML <table border=“numero” {larghezza in pixel dei bordi} align=“left | right | center” {allineamento della tabella nella pagina} {spazio tra bordo e contenuto delle celle} width=“numero | percentuale” {larghezza della tabella in pixel o in %} height=“numero | percentuale” {lunghezza della tabella in pixel o in %} > Marco Gribaudo - thanks to C. Gena e R. Damiano

  5. HTML TABELLA: LE RIGHE Le celle di una tabella vengono elencate riga per riga, partendo dall’alto verso il basso. Ogni riga viene introdotta con il comando <td>: <table> <tr> nuova riga </tr> </table> Marco Gribaudo - thanks to C. Gena e R. Damiano

  6. HTML TABELLA: LE CELLE All’interno di una riga, si specificano le varie celle, da sinistra verso destra con il comando <td> <td> nuova cella all’interno delle righe </td> <table> <tr> <td> A1 </td> <td> A2</td> </tr> <tr> <td> B1 </td> <td> B2</td> </tr> </table> L’esempio crea una tabella 2x2 come questa: Marco Gribaudo - thanks to C. Gena e R. Damiano

  7. HTML TABELLA: LE CELLE Il comando TD ha numerosi attributi, per definire la grandezza della cella, l’allineamento del testo al suo interno, ed il colore del suo sfondo: <td align= “left | right | center” {allineamento nella cella} valign= “top | middle | bottom |baseline” {allineamento del testo rispetto alle celle} bgcolor = “colore” width=“numero” {larghezza della cella} height=“numero” {lunghezza della cella} > Marco Gribaudo - thanks to C. Gena e R. Damiano

  8. HTML Ci puo’ essere anche una sola cella per riga: <table> <tr><td>Questa è la prima riga.</td></tr> <tr><td>Questa è la seconda riga.</td></tr></table> Marco Gribaudo - thanks to C. Gena e R. Damiano

  9. HTML In alternativa a <td>, esiste un tag specifico per i titoli delle collonne della tabella (i.e. le celle nella prima riga) <th> per il titolo delle colonne <th> titolo della colonna (bold e centrato) </th> Questo tag visualizza il contenuto della cella in grassetto. Marco Gribaudo - thanks to C. Gena e R. Damiano

  10. HTML E’ possibile creare celle che si estendono su piu’ colonne utilizzando l’attributo colspan: <td (th) colspan=“numero” {numero di colonne nella cella} > Marco Gribaudo - thanks to C. Gena e R. Damiano

  11. ESEMPIO di COLSPAN Il seguente esempio permette di espandere una cella su 2 colonne <table border="1" >    <tr> <td >prima colonna</td>         <td >seconda colonna</td>         <td> terza colonna</td>    </tr> <tr>          <td> come sopra</td>         <td colspan="2">cella che occupa 2 colonne</td>   </tr></table> Marco Gribaudo - thanks to C. Gena e R. Damiano

  12. ESEMPIO di COLSPAN Marco Gribaudo - thanks to C. Gena e R. Damiano

  13. HTML OSS: le tabelle possono essere annidate le une dentro le altre… Marco Gribaudo - thanks to C. Gena e R. Damiano

More Related