Dopo aver introdotto il tag div ( http://tinformatizzo.blogspot.com/2011/01/il-tag-div-corso-html-di-base.html ) ci cimentiamo nella costruzione delle tabelle con il tag table.
Riprendendo sempre la nostra paginetta html e facendo le opportune modifiche.. otteniamo quello che potete vedere nella figura sottostante..
Prima di esaminare la parte relativa alla tabella, volevo solo puntualizzare che, a differenza della pagina html della scorsa lezione, sono stati modificati solo alcuni valori degli attributi dei div per cambiarne la larghezza e la disposizione. Per cui nulla di nuovo da questo punto di vista.
Questo è il codice html della pagina (in grassetto la parte relativa alla tabella):
<html>
<head>
<title>Corso_HTML_base</title>
</head>
<body>
<div id="presentazioni" style="width:100%;height:10%;background-color:yellow;">
<b>ciao mondo! E' bello fare le pagine html</b>
</div>
<div id="proverbi" style="width:100%;height:80%;background-color:blue;">
<table border=1 bgcolor="white" align="center">
<thead>
<tr>
<th>Proverbio</th>
<th>Data Inserimento</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chi va piano va sano e va lontano</td>
<td>03-01-2011</td>
</tr>
<tr>
<td>Anche l'occhio vuole la sua parte</td>
</tr>
<tr>
<td>Non si può avere la botte piena e la moglie ubriaca</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=2 align="center">Fine tabella</td>
</tr>
</tfoot>
</table>
</div>
<div id="saluti" style="width:100%;height:10%;background-color:red;">
Saluti a tutti
</div>
</body>
</html>
La tabella viene interamente definita all'interno dei tag <table> e </table>
Per prima cosa ci sono tre parti principali della nostra tabella da individuare:
1. L'intestazione delle colonne della tabella - compresa tra i tag <thead> e </thead>;
2. Il contenuto di ogni riga del corpo della tabella - compreso tra i tag <tbody> e </tbody>;
3. Il "piè di pagina" della tabella - compreso tra i tag <tbody> e </tbody>.
In ognuna delle tre parti vengono utilizzati i tag <tr> e </tr> che indicano che tutto ciò che viene scritto all'interno di questi tag contribuirà alla creazione di un'unica riga della tabella stessa.
Per scrivere in una singola cella di una colonna di una riga sono necessari i tag <td> e </td> (solo per l'intestazione si utilizzano invece i tag <th> e </th>) che vengono inseriti tra i tag <tr> e </tr> di una riga.
Ovviamente per fare più righe si utilizzano più tag tr.. per fare più colonne più tag td..
Poniamo un attimo l'attenzione sugli attributi della tabella.
<table border=1 bgcolor="white" align="center">
1. Attributo border impostato a 1. Questo attributo indica che voglio impostare i bordi della tabella (e quindi tutti gli elementi della tabella) ad 1 pixel. Se non lo mettessi non ci sarebbero bordi e la mia tabella, anche mantenendo le giuste posizioni tra gli elementi, apparirebbe come un foglio piatto
2. Attributo bgcolor impostato su white. Non è altro che il colore di sfondo della tabella impostato sul bianco
3. Attributo align impostato su center. Mi permette di allineare la tabella al centro del suo contenitore (in questo caso il contenitore è il div..e quindi al centro del div)
Questi attributi possono essere utilizzati anche per una singola cella nei tag <td> o per una riga nei tag <tr> e non per forza per l'intera tabella. In questo modo possiamo caratterizzare nello specifico singole parti della tabella stessa.. ad esempio colorare le righe o le celle di colore diverso..
Analizzando questa riga del "piè di pagina" della tabella..
<tfoot>
<tr>
<td colspan=2 align="center">Fine tabella</td>
</tr>
</tfoot>
<tr>
<td colspan=2 align="center">Fine tabella</td>
</tr>
</tfoot>
..notiamo che il tag <td> contenuto all'interno presenta un attributo che non avevamo ancora visto.. il colspan (impostato a 2 in questo caso..)
Il colspan indica che la cella che stiamo creando sarà l'unione di più celle (in questo caso 2). Siccome nell'intestazione avevo specificato due colonne per l'intera tabella..ciò significa che questa cella, col colspan=2, occuperà in larghezza tutta la tabella.
Per finire un'osservazione: notate che nonostante io abbia specificato due colonne nell'intestazione.. e due colonne nella prima riga nel tbody.. nelle ultime due righe del tbody ho inserito solo una colonna! E' perfettamente fattibile..nessun errore..
Se avessi specificato anche l'altra colonna con gli altri <td></td> senza nulla dentro, mi sarebbe comparso il riquadro della cella vuoto..
Bene..in realtà c'è qualche altro attributo riguardante le tabelle come ad esempio il rowspan, il bordercolor.. ecc.. ma essendo un corso di base non voglio darvi informazioni aggiuntive per riempirvi inutilmente la testa, man mano che la curiosità aumenta sarete portati a cercare quello che vi interessa altrove o (spero) nella mia prossima guida più approfondita..
@cewitail
RispondiEliminaYou are welcome :)
Ottimo, grazie.
RispondiElimina99PiXEL