CONTATTACI

Guide per aspiranti programmatori

3 developer in miniatura seduti che lavorano al pc
Lezione 13 / 30

Le tabelle

Ti potrà sembrare, a primo impatto, che una tabella possa non servirti mentre sei alle prese con la stesura della tua pagina html.
In realtà non è così: prova a pensare, ad esempio, alla parte di immagazzinamento dati di un sito web e-commerce: ecco che ti balza immediatamente in mente quanto utile sia una tabella in quel caso!

La tabella in html è, quindi, un elemento indispensabile per l’organizzazione di dati tabellari.

Il linguaggio html dispone anche di tag per ovviare a questa necessità: vediamo insieme come realizzare una tabella in html.

Prima di tutto cerchiamo di analizzare la struttura di una tabella, su due fronti, aiutandoci con un supporto visivo.

Innanzitutto cerchiamo di capire com’è fatta l’ impalcatura della nostra tabella.


Come puoi vedere, una tabella è composta da righe (un esempio ne è la riga evidenziata in giallo) e colonne (la parte evidenziata in grigio chiaro). La loro intersezione dà vita a diverse celle, le quali conterranno i nostri dati. 

Appresa la struttura di base, andiamo ad analizzare le componenti della nostra tabella.
Tag html tabella

Come vedi, abbiamo diverse componenti contraddistinte da altrettanti tag.
Il contenitore della nostra tabella sarà il tag <table></table> che abbraccerà tutti gli altri.
Ora, tenendo bene a mente l’immagine di cui sopra, prova a dare un’occhiata a quella qui sotto: ti aiuterà a capire con esempi concreti che cosa rappresentano gli altri tag.

Proviamo a sviscerare un pò questo esempio: 

Quello che nella precedente tabella era il tag <caption></caption> e rappresentava il titolo della nostra tabella è, nell’ultima immagine, “Dati anagrafici studenti”. La caption, quindi, ci serve per dare un contesto alla nostra tabella. Per definirla, prova a rispondere alla domanda: che cosa sono questi dati?
Avvolta dal tag <thead></thead> troviamo la riga <tr></tr> che abbraccia le intestazioni della tabella, espresse, a loro volta all’interno del tag <th></th>. Il <th> sarà il titolo delle singole colonne e ci aiuterà a suddividere i dati da inserire. (nel nostro caso “nome” ed “età”
A questo punto subentra il corpo della tabella: il tag <tbody></tbody>, costituito dai dati nelle singole celle, inseriti nel tag <td></td>. (nella nostra immagine di riferimento i <td></td> sono “Mario” “24” “Claudia” “28”).
Infine, alla base della nostra tabella troviamo il <tfoot></tfoot>, che delinea il footer della tabella.
Questa sezione serve per inserirvi all’interno dei dati di riepilogo (nel nostro caso la media delle età degli studenti.) 

A questo punto dovresti avere le idee molto più chiare circa com’è fatta una tabella e quali tag utilizzare per inserirne una nel tuo documento html.

Ma, chiarita la teoria, passiamo alla pratica! Ecco un’ immagine atta a farti capire come, concretamente, scrivere il tuo codice per realizzare quanto sopra:

<table>
  <caption>Dati anagrafici studenti</caption>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Età</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mario</td>
      <td>27</td>
    </tr>
    <tr>
      <td>Caludia</td>
      <td>25</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        Media : 26 anni
      </td>
    </tr>
  </tfoot>
</table>

Questa è la modalità corretta di scrivere il codice per la tua tabella.

Tuttavia, se provi a verificare cosa il browser ti renderizzerà seguendo questo codice, quello che ti apparirà potrebbe non piacerti:

Come vedi, abbiamo tutti i nostri dati, ma dove sono i bordi della nostra tabella html? Dov’è la delimitazione delle celle?
La verità è che gli elementi di stile vengano aggiunti sempre attraverso l’inserimento di un foglio CSS nel codice del tuo sito, ma lo vedremo più avanti. 

 

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.