HTML le Tabelle

Le tabelle sono fondamentali per completare una pagina in html. Come abbiamo visto il pc legge le informazioni da una pagina web a cascata, ossia dalla prima all’ultima riga in ordine di altezza.

Visto questo abbiamo già capito che è molto difficile inserire scritte o immagini dove vogliamo, per questo ci vengono in aiuto le tabelle. Nel linguaggio HTML non dobbiamo immaginare le tabelle come nell’usuale pensiero matematico, ma invece come un complesso di quadrati o rettangoli dove poter inserire oggetti o scritte. 

<table border="2">
<tr>
<td>
contenuto della tabella
</td>
</tr>
</table>

Questo concetto che per anni ha aiutato i webmaster nella costruzione delle pagine HTML è stato ribaltato completamente con l’uscita ed il sempre più numeroso utilizzo del linguaggio XHTML, dove in pratica le tabelle sono utilizzate SOLO per mostrare dati matematici, liste ecc. ma non sono mai utilizzate per l’impaginazione, che è lasciata ad un complesso e misto uso di css e tag DIV. 

I tag per scrivere una tabella sono i seguenti:

Il tag <table> indica che stiamo per aprire/chiudere una tabella.
Il tag <tr >indica che stiamo per aprire/chiudere una riga.
Il  td indica che stiamo per aprire/chiudere una casella (cella) della colonna.

<table border="2">
<tr>
<td>
tabella con
</td>
<td>
due colonne
</td>
</tr>
</table>

<table border="2">
<tr>
<td>
tabella con
</td>
</tr>
<tr>
<td>
due righe
</td>
</tr>
</table>

<table border="2">
<tr>
<td>
tabella
</td>
<td>
con due
</td>
</tr>
<tr>
<td>
colonne e
</td>
<td>
due righe
</td>
</tr>
</table>

rowspan e colspan

Adesso dobbiamo inserire due attributi essenziali:

rowspan e colspan, con questi due attributi possiamo costruire tabelle con colonne o righe multiple, in pratica colonne o righe che possono occupare più spazi (più colonne o più righe) contemporaneamente.

Capirete meglio dagli esempi:

<table border="1">
<tr>
<td>
prima colonna
</td>
<td>
seconda colonna
</td>
</tr>
<tr>
<td colspan="2">
<colspan="2", ossia della larghezza di due colonne 
</tr>
</table>

ALTRI ATTRIBUTI PER LE TABELLE

• bgcolor=” “ nome in inglese o esadecimale del colore.
• background=” “ nome sfondo con estensione gif, jpg, jpeg o png.
• align=” “ può essere right, left, center, justify ed allinea il contenuto delle celle in senso orizzontale.
• valign=” “ può essere top (sopra), middle (centro – default browser), bottom (sotto), baseline (alla base) ed allinea il contenuto delle celle in senso verticale.
• width=” “ unità di misura (px od altro) o in % determina le dimensioni in larghezza.
• height=” “ unità di misura (px od altro) o in % determina le dimensioni in alte

BORDI E SPAZI

Molti attributi possono variare la grandezza, il colore o la visuale dei bordi. Vediamo con degli esempi alcuni di questi: 
border=” ” Può variare partendo da zero (senza bordo).

<table border="10" >
<tr><td>
contenuto della tabella
</td></tr>
</table>

bordercolor=” ” Per il colore del bordo. Da scrivere in inglese o formato esadecimale.

Non è più raccomandato l’uso. Utilizzare invece la proprietà di stile border-color

<table border="2" bordercolor="red">
<tr><td>
contenuto della tabella
</td></tr>
</table>

bordercolordark=” ” Colore sull’ombreggiatura più scura. In inglese o esadecimale.

<table border="2" bordercolordark="red">
<tr><td>
contenuto della tabella
</td></tr>
</table>

bordercolorlight=” ” Colore sull’ombreggiatura più chiara. In inglese o esadecimale.

<table border="2" bordercolorlight="red">
<tr><td>
contenuto della tabella
</td></tr>
</table>

cellpadding=” ” La quantità di spazio fra i bordi e l’oggetto della tabella

<table border="2" cellpadding="15">
<tr><td>
contenuto della tabella
</td></tr>
</table>

cellspacing=” ” La quantità di spazio vuoto fra le celle, da non confondere con border.

<table border="2" cellspacing="15">
<tr><td>
contenuto della tabella
</td></tr>
</table>

frame=” ” Indica il tipo di visuale da assegnare al bordo. I valori da assegnare possono essere:

• above = bordi esterni in alto.
• below = bordi esterni in basso.
• void = senza bordi.
• hsides = bordi orizzontali in alto e in basso.
• lhs = bordi esterni sinistri.
• rhs = bordi esterni destri.
• vsides = bordi esterni destri e sinistri.
• box = tutti i margini.
• border = tutti i margini.

Esempio

<table border="2" bordercolor="red" frame="above">
<tr><td>
above
</td></tr>
</table>

tbody

La tabella che contiene i tag <tbody> e </tbody> viene organizzata in modo che il testo , le immagini e tutto il resto contenuto occupi il minor spazio possibile.

Il Tag Nav

https://www.w3schools.com/html/html_tables.asp