Inizia a creare tabelle semplici in HTML

Le tabelle HTML sono di gran lunga una delle migliori istruzioni HTML mai create. La possibilità di formattare una pagina Web con istruzioni di tabella è sorprendente! Imparali, usali e amali!

Tabelle di base:

Prendiamo la nostra lista della spesa che abbiamo usato nel tutorial della lista e questa volta la trasformiamo in una tabella. Metteremo gli articoli nella prima colonna e i prezzi nella seconda colonna.

Questo è il codice che lo ha reso possibile. Il codice effettivo è a sinistra e la descrizione in inglese è a destra. La descrizione è indentata per mostrare la “struttura” del prospetto della tabella.

Confuso? Ok, diamo un'occhiata alla tabella sopra. Questa tabella è in realtà piuttosto semplice. Costruisci tavoli più o meno allo stesso modo in cui leggi un libro; da sinistra a destra e dall'alto verso il basso. La tabella inizia con un tag <table> e termina con un tag </table> . Ogni riga inizia con un tag <tr> e termina con un tag </tr> . Ciascun dato della tabella inizia con un tag <td> e termina con un tag </td> .

Ma quello non è un tavolo, dici! Non ha un confine! In realtà, è un tavolo. È una tabella senza bordo o BORDER="0″ . Questo concetto è molto importante quando vuoi usare le istruzioni TABLE per formattare le tue pagine web. Non vuoi sempre un bordo spesso. Ok, questa volta creiamo un tavolo con un BORDO .

L'unica differenza tra questa tabella e la precedente è l'istruzione <table> che assomiglia alla seguente.

<bordo tabella=”7″>

Abbastanza facile, eh? La dimensione del bordo è rappresentata in pixel. Ok, ora diamo un po' più di SPAZIO CELLULARE . Questa è la spaziatura tra le celle della nostra tabella. Puoi anche pensare a questo come allo spessore della parete tra le celle della tabella.

Sembra molto meglio. Riesci a vedere la differenza? Anche in questo caso l'unico cambiamento è nell'istruzione <table> che assomiglia alla seguente.

<bordo tabella=”7″ spaziatura celle=”7″>

Anche il CELLSPACING , come il BORDER , si misura in pixel. Ma il testo sembra troppo vicino alle pareti del tavolo, dici! Ok, ok, possiamo risolvere anche quello. Si chiama CELLPADDING . È lo spazio tra il contenuto della cella ei bordi delle pareti cellulari.

Ah, ora è così che volevi? No? Beh, ho dovuto esagerare un po' i numeri, ma quello era solo per cercare di fare un punto. Spero che tu possa vedere le differenze. La tabella precedente è stata creata con l'istruzione <table> mostrata di seguito.

<table border=”7″ cellspacing=”7″ cellpadding=”7″>

Immagini di inquadratura:

Ora vogliamo entrare nelle cose più divertenti. Inquadrare le immagini è un ottimo modo per migliorare le tue foto. Li fa sembrare saltare fuori dalla pagina. Ecco il mio capolavoro di 5 secondi.

Grafica piuttosto interessante, rende anche bella la mia brutta foto. Ecco il codice che lo ha creato.

<bordo tabella=”7″ alt=””>
<tr>
<td><img src="image.gif"></td>
</tr>
</tabella>

Il tag <tr> e il tag </tr> possono essere omessi se lo desideri. Funzionerà ancora bene. I puristi dell'HTML probabilmente sosterranno che questi tag devono essere presenti. Se ti senti così, come faccio di solito, usali.

Oppure puoi anche incorniciare le tue foto con il testo come mostrato di seguito.

Netto, eh! Il codice è mostrato di seguito.

<bordo tabella=”7″ cellpadding=”10″>
<tr>
<td><img src=”image.gif” alt=””></td>
<td>Che<br>capolavoro!</td>
</tr>
</tabella>

Ho un'altra nota sull'inquadratura delle immagini. Se hai problemi a centrare l'immagine, prova quanto segue.

<td align="center"><img src="image.gif"></td>

Collegamenti di inquadratura:

Puoi anche inserire link all'interno di una tabella. In effetti puoi inserire l'intera pagina all'interno di un gruppo di comandi della tabella se lo desideri e usando BORDER=”0″ nessuno potrebbe davvero dirlo. Perché vorresti farlo, chiedi? Per formattare immagini e testo insieme sulla tua pagina; pensaci. Ok, torniamo all'inquadratura del collegamento.

Ecco il codice che l'ha fatto.

<bordo tabella=”7″ cellpadding=”10″>
<tr>
<td><a href="http://www.google.com/">Google.com</a></td>
<td><a href="http://www.yahoo.com/">Yahoo!</a></td>
</tr>
<tr>
<td><a href="http://www.jjwdesign.com/">JJW Design</a></td>
<td><a href="http://www.iproundup.com/">Roundup IP</a></td>
</tr>
</tabella>

Bene, spero che questa piccola sezione sulla dichiarazione <table> ti sia piaciuta. C'è molto di più che puoi fare con l'istruzione <table> rispetto a quanto è possibile in questo tutorial. Tuttavia, spero che questo abbia aiutato.

Link a questo tutorial!

Hai trovato utile questo tutorial? Se è così, per favore aiutami a condividerlo con gli altri collegandomi ad esso. Basta inserire il codice HTML qui sotto nella tua pagina Web per creare un collegamento a questo tutorial.