The Best Geek Forum

Guida alle tabelle

Il mondo del responsive è il modo migliore per la creazione di un contenuto! <html><title>Tebigeek!</title></html>

Moderatore: Moderatore in prova

Guida alle tabelle

:welcomeani:

Fino a poco tempo fa, le tabelle erano lo strumento più utile e più utilizzato in una comune pagina Web. Se si voleva ordinare la pagina o se si voleva creare una lista, non vi era metodo migliore che usare le tabelle.

Oggi ordinare una pagina è molto più facile attraverso l'uso del DIV o degli identificati e attraverso le pagine CSS, quindi le tabelle vengono riservate a casi specifici. Una tabella come sappiamo è come un contenitore, formato da righe e colonne. In HTML per indicare la presenza di una tabella (se vogliamo creare il contenitore) è necessario utilizzare il TAG TABLE come da esempio:

Codice: Seleziona tutto

<table>
</table>
Per indicare le righe e le colonne all'interno della tabella, è necessario utilizzare i TAG TR (table row) e TD (table date) che rappresentano rispettivamente le righe e le colonne, come da esempio:

Codice: Seleziona tutto

<table>
	<tr>
		<td>Questa è una cella</td>
	</tr>
</table>
Seguendo l'esempio, avremo una tabella formata da una riga e una colonna, quindi da una cella sola. E' possibile chiaramente avere più celle in una sola riga e più righe in una sola cella come da esempio:

Codice: Seleziona tutto

<table>
	<tr>
		<td>Questa è una cella</td>
		<td>Questa è una seconda cella</td>
	</tr>
</table>
Come un qualsiasi TAG, anche la tabella ha degli attributi molti utili che ci permettono di modellarla a nostro piacimento. Sicuramente i più importanti sono:

-Width (larghezza, può essere espressa in pixel(px) o % (consigliato))
-Height (altezza, può essere espressa in pixel(px) o % (consigliato))
-Align (allineamento del contenuto della cella/tabella , può assumere valori right-left-center
-Border (spessore del bordo, espresso in pixel (px))
-Bgcolor (colore di sfondo della tabella)
-Bordercolor (colore dei bordi della tabella)
-Cellspacing (distanza tra due celle , espresso in pixel (px))
-Cellpadding (distanza tra un testo della cella e il suo bordo), espresso in pixel(px)

NOTA BENE! L'ALTEZZA E LA LARGHEZZA POSSONO ESSERE APPLICATE ANCHE A SINGOLE RIGHE O COLONNE!!


Molto spesso, si ha la necessità di creare una tabella con più celle unite tra loro. A questo scopo sono stati creati gli attributi COLSPAN e ROWSPAN che vanno inseriti nelle colonne in cui sono presenti le celle da unire come da esempio:

COLSPAN:

Codice: Seleziona tutto

<table>
	<tr>
		<td>Questa è una cella</td>
		<td>Questa è una cella</td>
	</tr>
	
	<tr>
		<td colspan="2">Questa cella occuperà 2 spazi nella riga</td>
	</tr>
</table>
ROWSPAN:

Codice: Seleziona tutto

<table>
	<tr>
		<td rowspan="2">Questa cella occuperà anche lo spazio delle cella della riga inferiore</td>
	</tr>
	
	<tr>
		<td>Questa è una cella</td>
		<td>Questa è una cella</td>
	</tr>
</table>
Come abbiamo accennato per il TAG DIV, è possibile creare tabelle dentro altre tabella inserendo altri TAG TABLE nei TAG TABLE precedenti.

:thanks:
Ottima guida :D Come sempre!