Tutti in Riga Con Le Tabelle – WEB DESIGN #4

Negli scorsi articoli abbiamo visto insieme come creare una semplice pagina web con diversi elementi al suo interno.

Il risultato non era male ma possiamo notare subito qualcosa di strano: gli elementi che avevamo inserito apparivano in ordine sequenziale (uno sotto l’altro) dandoci l’impossibilità di gestire l’estetica della pagina a nostro piacimento.

Qui entrano in gioco le tabelle, supponiamo di dover realizzare una pagina nella quale è presente un’intestazione e subito sotto un menù formato da tre elementi cliccabili (link).

In questo caso possiamo immaginare la struttura della nostra pagina come una tabella formata da 2 righe:

La prima riga ha una colonna sola e conterrà il titolo

La seconda riga ha tre colonne nelle quali verranno inseriti i link del nostro menù 

tabella

Per realizzare la struttura ipotizzata in precedenza ci avvarremo del tag <table>. Se non sai nulla riguardo il tag table ti consiglio di dare un’occhiata qui (table tag)

Questo è il codice necessario per la nostra struttura, il tag <tr> indica la creazione di una riga mentre il tag <td> di una colonna.

Il risultato finale visualizzato nel browser sarà il seguente:

Adesso puoi sbizzarrirti a creare tutti i layout che hai in mente utilizzando le tabelle a tuo piacimento. 

Se hai qualche dubbio o chiarimento chiedimi pure nei commenti 🙂

Leave a Reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>