domenica 27 Settembre 2020

Download in corso

Softwareone.it

07-01-2019

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.

Pubblicità

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:

contenuto della tabella

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>
tabella con due colonne
<table border="2">
<tr>
<td>
tabella con
</td>
</tr>
<tr>
<td>
due righe
</td>
</tr>
</table>

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

rowspan e colspan

Adesso dobbiamo inserire due attributi essenziali:

Pubblicità

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>
prima colonnaseconda colonna

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>
contenuto della tabella

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

Pubblicità

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>
contenuto della tabella

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

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

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

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

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>
contenuto della tabella

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>
contenuto della tabella

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.

Pubblicità

Esempio

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

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

Lascia un commento

Pubblicità