Lezione 10: Tabelle

« Older   Newer »
 
.
  1.  
    .
    Avatar

    Advanced Member

    Group
    Administrator
    Posts
    2,238

    Status
    Offline

    Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne.


    E' difficile?



    All'inizio costruire le tabelle in HTML può sembrare complicato, ma se mantieni la calma e fai attenzione, in effetti è esattamente logico - proprio come ogni altra cosa in HTML.


    Esempio 1:


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



    Sul browser sarà così:

    Cella 1Cella 2
    Cella 3Cella 4



    Che differenza c'è tra <tr> e <td>?

    Come vedrai dall'esempio sopra, questo probabilmente è l'esempio HTML più complicato che abbiamo fatto finora. Scomponiamolo e spieghiamo i diversi tag:

    Vengono usati 3 elementi diversi per costruire una tabella:

    il tag di apertura e il tag di chiusura
    iniziano e terminano la tabella. Logico.
    <tr> è la sigla delle parole inglesi "table row" (cioè, riga della tabella) e inizia e termina una riga orizzontale. Ancora logico.
    <td> è la sigla delle parole inglesi "table data" (cioè, dati della tabella). Questo tag inizia e termina ogni cella della riga della tua tabella. Tutto semplice e logico.
    Questo è quello che succede nell'Esempio 1: la tabella inizia con un , seguito da un, che indica l'inizio di una nuova riga. In ogni riga vengono inserite due celle:e. In seguito la riga viene chiusa con une immeditamente dopo inizia una nuova riga. Anche la nuova riga contiene due celle. La tabella viene chiusa con
    Cella 1Cella 2
    .

    Solo per chiarire: le righe sono le linee orizzontali di celle e le colonne sono linee verticali di celle:


    Esempio 2:


    CODICE
    <table>
             <tr>
                   <td>Cella 1</td>
                   <td>Cella 2</td>
                   <td>Cella 3</td>
                   <td>Cella 4</td>
             </tr>
             <tr>
                   <td>Cella 5</td>
                   <td>Cella 6</td>
                   <td>Cella 7</td>
                   <td>Cella 8</td>
             </tr>
             <tr>
                   <td>Cella 9</td>
                   <td>Cella 10</td>
                   <td>Cella 11</td>
                   <td>Cella 12</td>
             </tr>
           </table>



    Sul browser si vedrà così:

    Cella 1Cella 2Cella 3Cella 4
    Cella 5Cella 6Cella 7Cella 8
    Cella 9Cella 10Cella 11Cella 12


    Ci sono degli attributi?

    Naturalmente ci sono degli attributi. Per esempio, l'attributo border viene usato per specificare lo spessore del bordo intorno alla tua tabella:

    Esempio 3:

    CODICE
    <table border="1">
             <tr>
                   <td>Cella 1</td>
                   <td>Cella 2</td>
             </tr>
             <tr>
                   <td>Cella 3</td>
                   <td>Cella 4</td>
             </tr>
           </table>



    Sul browser si vedrà così:


    Cella 1Cella 2
    Cella 3Cella 4


    Lo spessore del bordo viene specificato in pixel (Vedi la lezione 9)

    Così come si fa con le immagini, puoi definire la larghezza della tabella in pixel - o, alternativamente, in percentuale dello schermo:

    Esempio 4:


    CODICE
    <table border="1" width="30%">


    Questo esempio visualizzerà sul tuo browser una tabella di larghezza 30% dello schermo. Provalo da sola.

    Altri attributi?

    Ci sono tanti attributi per le tabelle. Qui ne vedi altri due:

    align: specifica l'allineamento orizzontale di tutta la tabella, in una riga o in una singola cella. Per esempio, sinistro, centro o destro.
    valign: specifica l'allineamento verticale del contenuto di una cella. Per esempio, alto, mezzo o basso.
    Esempio 5:
    CODICE
    <td align="right" valign="top">Cell 1</td>


    Cosa posso inserire nella mia tabella?

    In teoria nella tabella puoi inserire qualsiasi cosa: testo, link, imagini ...MA, le tabelle sono destinate alla presentazione di dati tabellari (cioè dati che possono essere significativamente presentati in righe e colonne), quindi evita di mettere nelle tabelle oggetti, semplicemente perchè vuoi che siano posizionatii uno accanto all'altro.

    Tempo fa su Internet - cioè pochi anni fa - le tabelle venivano spesso usate come strumento per il layout. Ma se vuoi avere il controllo di come verranno presentati testo e immagini c'è un modo molto più interessante per farlo (suggerimento: CSS). Ne parleremo di più in seguito.

    Adesso metti in pratica quello che hai appena imparato e progetta tabelle di diverse misure, con diversi attributi e contenuto. Questo ti dovrebbe tenere impegnato per un po' di ore.
     
    Top
    .
0 replies since 28/1/2012, 18:59
 
.