Come farsi un sito in HTML e vivere felici

Capitolo I - Lez.n. 6: tabelle

E' vero le Tabelle hanno funestato la nostra infanzia, le mefitiche tabelline! ma sono tanto, tanto utili! Sopratutto per calcolare le tasse che dovrete sborsare quest'anno o magari per capire, matematicamente, che accidenti significa "dichiarazione contestuale..." nei DICO, quindi affronteremo anche in HTML le temute tabelle.

Nonostante i mirabolanti fogli di stile CSS, codice che permette di rendere sempre più belli e armonici, graficamente godibili i nostri siti, le tabelle, ancora, sono, per molti versi, la vera indispensabile impalcatura di un sito o di una semplice pagina web. Le tabelle sono state e per i piccoli siti sono ancora l'ossatura che permette di inserire nella pagina HTML, in modo più preciso ed ordinato, i paragrafi, le foto, i links; sono la "colonna vertebrale" della pagina stessa.
Adesso ci sono nuove soluzioni, che vedremo in seguito, ma per il momento sarà bene imparare a gestire le tabelle per impaginare il nostro sito, imparato a fare un'impalcatura di tabelle e tabelle annidate, gestire, poi, lo spazio nel nostro sito (il layout) con i CSS ci sembrerà una passeggiata!! Intanto avremo acquisito il controllo dello spazio, avremo maggiore dimestichezza con i pixel e con altro ancora.

Vediamo adesso i comandi che indicano al browsers che c'è in giro una tabella:
RICORDANDOTI DI NON LASCIARE SPAZI TRA I SEGNI MAGGIORE E MINORE
ECCOTI I COMANDI PER CREARE SEMPLICI TABELLE IN HTML:

Di una tabella si può impostare anche la larghezza e la lunghezza, lo spessore dei bordi, oltre che l'allineamento che assumeranno testo e immagini, vediamo questi importanti attributi:

Le tabelle, come detto, sono molto importanti per dare ordine e una buona disposizione a quanto scrivi o alle immagini che decidi di "caricare" sulla tua pagina HTML, quindi faremo molte esercitazioni con le tabelle, dovrai imparare ad usarle bene, a impostarne la grandezza, il colore, la posizione.

iniziamo con una semplice tabella,
 VAI SU START > TUTTI I PROGRAMMI > ACCESSORI dal menù che si apre scegli > BLOCCO NOTE, clikka per aprirlo, una volta aperto il tuo documento di blocco note scrivi, RICORDANDOTI DI NON LASCIARE SPAZI TRA I SEGNI MAGGIORE E MINORE:

< html >
< head >
< body >
< table width="600" align="center" valign="top" border="1" >
< th >
questa è l'intestazione di una semplice tabella, come vedete è in grassetto
< /th >
< tr >
< td width="600" align="center" valign="top" >
< p >
questa cella è larga 600 pixel e il suo contenuto è allineato in alto, la tabella ha solo una riga e una cella, è allineata al centro ed ha un bordo di un pixel.
< /p >
< /td >
< /tr >
< /table >
< /body >
< /head >
< /html >

Salva il documento così:
vai sulla barra dei comandi del documento clikka su File > salva con nome... > salva con il nome che preferisci, scegli un nome facile e chiaro devi salvarlo non con l'estensione nomescelto.txt ma con l'estensione nomescelto.html

NB:
se vuoi modificare, o correggere la tua pagina , ecco come devi fare: aprila con Internet Explorer vai su > "visualizza" dal menù a discesa scegli cliccandoci sopra > "HTML" , si aprirà il codice che hai creato, effettua le modifiche opportune sul codice, salvale; aggiorna, la pagina mediante l'apposito pulsante sulla barra di navigazione di Internet Explorer.

Qui puoi scaricare il codice:
Semplice-Tabella.txt
Qui invece puoi salvare la pagian HTML di esempio:
Semplice-Tabella.html
Riepilogo dei comandi studiati

< table > indica che c'è una tabella
< th > intestazione di una tabella
< tr > riga
< td > cella della tabella

  comando table o comando td unito a width="..." larghezza della tabella sullo schermo, può essere espressa in pixel o in percentuale

  comando table unito a border indica lo spessore dei bordi della tabella, lo 0 rende i bordi "invisibili"

  comando table o comando td unito a align="valore" indica la disposizione di tabella
o cella sullo schermo:
i valori sono
left
center
right


  comando table o comando td unito a valign="valore" indica l'allineamento del testo dentro alla tabella e alla cella
i valori sono
top: in alto
middle: al centro
bottom o baseline: in fondo