Questa prima tabella ha il bordo evidenziato per renderla visibile. Normalmente l'attributo "border" e' mantenuto a 0 ( zero )
ATTENZIONE: Se il tag TD non definisce l'allineamento, Internet Explorer , pone il testo al centro mentre gli altri browser lo collocano a sinistra.
Il listato relativo a questa tabella ignora questa regola e potrete controllare aprendo la pagina con Explorer e con altri Browser.
Definire sempre l'attributo del tag TD.

Stessa tabella ma con il tag "DIV" che contiene l'attributo "left" e quindi sia tabella che il testo, anche se TD non definito, sono allineati a sinistra.

Anche questa e' una tabella ma senza il bordo.
"DIV"con attributo uguale a "center", "Table" come la prima ma con l'attributo "border" a 0 ( zero ) e il tag "TD"  con attributo = "left"



Qui il listato della prima tabella - Notare i tag  <br> ( Ritorno a capo ) e <b> ( grassetto ) e </b> ( chiusura tag )
<div align="center">
    <table border="1" cellpadding="0" cellspacing="0" width="1000" height="0" bordercolor="#ff0000" >
      <tr>
         <td>
            <font face="Arial" color="#FFFFFF">
                 Questa prima............ ( zero )<br>
                 <b>Definire sempre l'attributo del tag TD.</b>  ............
        </td>
       </tr>
    </table>
</div>

Vediamo i TAG ricordando che tutti i tag, per le ragioni esposte in precedenza devono essere scritti in minuscolo.

<div align="center">     Crea il contenitore DIV al centro pagina
   <table border="1" cellpadding="0" cellspacing="0" width="1000" height="0" bordercolor="#ff0000" >
     Table border = spessore bordo in pixel
     cellpadding = spazio all'interno delle celle
     cellspacing = spazio tra le celle
     width = larghezza tabella in pixel
     height = altezza tabella in pixel. Se omessa la tabella si adatta al contenuto
     bordercolor = colore bordo. Se border = 0 il colore e' ininfluente
       <tr>      Definisce la riga della tabella
         <td>     Definisce le celle della riga della tabella
                <font face="Arial" color="#FFFFFF">
                           Qui il testo
                 font face = definisce il font ed il color, in questo caso "ffffff" bianco.  Il codice Esadecimale va preceduta da #
                 NOTA: questo tag e' obsoleto e viene sostituito dai CSS di cui vedremo in seguito un semplice esempio
         </td>     Inizio dei tag di chiusura rispettando l'annidamento. L'ultimo tag e' il primo ad essere chiuso.
       </tr>
    </table>
</div>

 Dopo la tabella verra' elencato il listato i cui riferimenti ai Tag sono stati spiegati in precedenza.

Prova scrittura e
ritorno a capo

<div align="center">
<table border="1" cellpadding="0" cellspacing="0" width="1000" height="100" bordercolor="#ff0000">
    <tr>
      <td align="left">
        <a style="font-size:16px; color: #ffffff; font-family: verdana;">
            Prova scrittura e<br> ritorno a capo
        </a>
     </td>
   </tr>
 </table>
</div>


La tabella ha una sola riga TR ed una sola cella TD , in pratica e' un rettangolo.
TD align=left La scritta viene allineata a sinistra
a style = Carattere 16px, colore bianco, Verdana
br ritorno a capo dopo la e
/a chiude la definizione del carattere
Come si puo' notare la scritta e' allineata a sinistra ma anche allineata verticalmente al centro della tabella.

Nei prossimi esempi la scritta sara' allineata in alto, in basso, a destra, al centro. Per meglio osservare evidenziamo la tabella.

<td align="left" valign="top">
La scritta si pone a sinistra ed in alto


La scritta si pone a sinistra ed in basso

<td align="left" valign="bottom">
La scritta si pone al centro
<td align="center">
<td align="right" valign="top">
La scritta si pone a destra ed in alto


La scritta si pone a destra ed in basso

<td align="right" valign="bottom">


Gli altri attributi relativi alle tabelle prevedono la gestione degli sfondi sia con il colore che con le immagini.
L'altezza della tabella, anche se non definita, viene incrementata dai dati in essa inseriti.
NON viene influenzata dalla immagine di sfondo. L'esempio che segue mostra il caricamento di una immagine di sfondo 1000 x 400 px mentre la tabella misura 1000 x 100 px
Se l'altezza fosse superiore all'altezza della immagine questa viene comunque duplicata e quindi , come gia' visto nella parte dedicata agli sfondi, usare sempre sfondi simmetrici o se si vuole una fotografia, non ridimensionare la tabella ma mantenere la sua altezza proporzionata all'immagine.
Alla tabella che segue e' stato eliminato il bordo.
L'immagine viene caricata dal tag table con l'istruzione background="logo1.jpg"


 <table border="0" cellpadding="0" cellspacing="0" width="1000" height="100" bordercolor="#ff0000" background="logo1.jpg">


A seguire una tabella con sfondo colorato
Il colore viene definito dal tag table con l'istruzione bgcolor="#770c06"


 <table border="0" cellpadding="0" cellspacing="0" width="1000" height="100" bordercolor="#ff0000" bgcolor="#770c06">


Fino ad ora abbiamo esaminato una tabella che in pratica e' un rettangolo ma le tabelle possono creare tracciati formati da righe e celle e combinati in modo da realizzare schemi complessi in cui si integrano testi ed immagini.
L' attributo TR gestisce le righe mentre quello TD gestisce le celle.
Vediamo un esempio di tabella con 2 righe e 2 celle. La tabella sara' con il bordo e sia le righe che le celle con sfondo colorato



Qui di seguito il listato per realizzare le 4 celle. Noterete che il colore di sfondo della tabella bgcolor e' definito ma non si vede poiche' coperto dai colori delle celle.

<div align="center">
    <table border="1" cellpadding="0" cellspacing="0" width="1000" height="100" bordercolor="#ff0000" bgcolor="#000080">
      <tr >
           <td bgcolor="ffff00">
           </td>
           <td bgcolor="ff0000">
           </td>
      </tr>

      <tr >
           <td bgcolor="00ffff">
           </td>
           <td bgcolor="00ff00">
           </td>
      </tr>
   </table>
</div>



Ed ora la stessa tabella dove pero' attiviamo cellpaddind, la distanza degli oggetti interni alla cella dal suo bordo e cellspacing, la distanza tra le celle


Qui di seguito il listato per realizzare le 4 celle. Ora il colore di sfondo della tabella e' visibile, le celle sono distanziate tra di loro ed anche la parte interna dista 20 px dal margine.

<div align="center">
    <table border="1" cellpadding="20" cellspacing="20" width="1000" height="100" bordercolor="#ff0000" bgcolor="#000080">
      <tr >
           <td bgcolor="ffff00">
           </td>
           <td bgcolor="ff0000">
           </td>
      </tr>

      <tr >
           <td bgcolor="00ffff">
           </td>
           <td bgcolor="00ff00">
           </td>
      </tr>
   </table>
</div>


Le tabelle pero' non si limitano a quanto fino ad ora visto, esse si possono sviluppare in un grande numero di righe e di celle e queste possono occupare spazi non in linea e non simmetrici.
Vediamo ora una tabella con 3 righe e 10 celle dove ogni cella ha uno sfondo colorato rappresentato dall' istruzione bgcolor + codice colore.
Il tag TD dimensiona la cella solo in altezza e solo nel primo tag dopo TR. La larghezza della cella width viene dimensionata automaticamente in base al numero delle celle. Nel nostro caso 10 celle, tabella 1000px, ogni cella = 100px. &nbsp; rappresenta lo spazio tra > e < .
NOTA:Inserire sempre almeno un spazio tra i tag

                   
                   
                   

<div align="center">
 <table border="0" cellpadding="0" cellspacing="0" width="1000">
  <tr>
    <td height="50"  bgcolor="#F08767">&nbsp;</td>
    <td bgcolor="#1EF30D">&nbsp;</td>
    <td bgcolor="#1EFFAA">&nbsp;</td>
    <td bgcolor="#EB9A74">&nbsp;</td>
    <td bgcolor="#F0B767">&nbsp;</td>
    <td bgcolor="#00FFBA">&nbsp;</td>
    <td bgcolor="#0FB7B1">&nbsp;</td>
    <td bgcolor="#132033">&nbsp;</td>
    <td bgcolor="#00876B">&nbsp;</td>
    <td bgcolor="#629888">&nbsp;</td>
  </tr>
  <tr>
   <td height="50" bgcolor="#002C74">&nbsp;</td>
   <td bgcolor="#55B0E3">&nbsp;</td>
   <td bgcolor="#9BD6F7">&nbsp;</td>
   <td bgcolor="#3582AD">&nbsp;</td>
   <td bgcolor="#942300">&nbsp;</td>
   <td bgcolor="#DF5516">&nbsp;</td>
   <td bgcolor="#325FC6">&nbsp;</td>
   <td bgcolor="#5B88EE">&nbsp;</td>
   <td bgcolor="#08F9BD">&nbsp;</td>
   <td bgcolor="#7183FF">&nbsp;</td>
  </tr>
  <tr>
   <td height="50" bgcolor="#8073C3">&nbsp;</td>
   <td bgcolor="#770C06">&nbsp;</td>
   <td bgcolor="#500000">&nbsp;</td>
   <td bgcolor="#600000">&nbsp;</td>
   <td bgcolor="#700000">&nbsp;</td>
   <td bgcolor="#800000">&nbsp;</td>
   <td bgcolor="#900000">&nbsp;</td>
   <td bgcolor="#A00000">&nbsp;</td>
   <td bgcolor="#B00000">&nbsp;</td>
   <td bgcolor="#C00000">&nbsp;</td>
  </tr>
</table>
</div>

Vediamo ora come realizzare una tabella le cui celle non sono simmetriche e nemmeno allineate.
Per realizzare questo useremo i tag TD con l'attributo  colspan e rowspan . Per scelta mia non uso i tag opzionali caption, thead, tfoot, tbody che identificano le righe di una tabella. Preferisco averne io il controllo completo.


-->
Palestra Gym Club
Orario Lunedi' Martedi' Mercoledi' Giovedi' Venerdi' Sabato Domenica
09,10-10,00 Pilates Power Yoga Rowing Pilates Fit Box Walking
10,10-11,00 Total Body Acquagym Trekkmill Trekkmill Pilates  
13,00-14,30 Power Yoga Rowing Zumba
17,00-18,00 Boxing Thai Box Judo for seniors Stretching Running
20,30-22,00 Acquagym Trekkmill Rowing Fit Box

<div align="center" >
<table border="1" cellpadding="0" cellspacing="0" width="1000" height="0" bordercolor="#325fc6" bgcolor="#dddddd"
style="font-size:13px; color: #000000; font-family: verdana;">
<tr>
   <td height="40" colspan="8" align="center"> <!-- Deve coprite 8 colonne e quindi colspan = 8 -->
         <b>Palestra Gym Club</b>
   </td>
</tr>
<tr align="center">                                     <!-- Questa riga e' completa con 8 caselle -->
  <td height="20" width="97">Orario</td>
  <td height="20" width="127"><b>Lunedi'</b></td>
  <td height="20" width="127"><b>Martedi'</b></td>
  <td height="20" width="127"><b>Mercoledi'</b></td>
  <td height="20" width="127"><b>Giovedi'</b></td>
  <td height="20" width="127"><b>Venerdi'</b></td>
  <td height="20" width="127"><b>Sabato</b></td>
  <td height="20" width="127"><b>Domenica</b></td>
</tr>
<tr align="center">                          <!-- Tutta la riga allinea al centro delle caselle meno la prima che e' definita con align -->
  <td height="20" width="97" align="left"><b>09,10-10,00</b></td>
  <td height="60" width="127" rowspan="3">Pilates</td>                      <!-- Qui copre 3 righe ed infatti l'altezza e' 60px -->
  <td height="20" width="127">Power Yoga</td>
  <td height="20" width="254" colspan="2">Rowing</td>                <!-- Qui copre 2 colonne e la larghezza e' 254 px -->-->
  <td height="20" width="127">Pilates</td>
  <td height="20" width="127">Fit Box</td>
  <td height="20" width="127">Walking</td>
</tr>
<tr align="center">
  <td height="20" width="97" align="left"><b>10,10-11,00</b></td>
  <td height="20" width="127">Total Body</td>
  <td height="20" width="127">Acquagym</td>
  <td height="20" width="127">Trekkmill</td>
  <td height="20" width="127">Trekkmill</td>
  <td height="40" width="127" rowspan="2">Pilates</td>                   <!-- copre 2 righe" -->
  <td height="80" width="127" rowspan="4">&nbsp;</td>                  <!-- copre 3 righe" -->
</tr>
<tr align="center">
  <td height="20" width="97" align="left"><b>13,00-14,30</b></td>
  <td height="20" width="254" colspan="2">Power Yoga</td>          <!-- Copre 2 colonne" -->
  <td height="20" width="127">Rowing</td>
  <td height="20" width="127">Zumba</td>
</tr>

<tr align="center">
  <td height="20" width="97" align="left"><b>17,00-18,00</b></td>
  <td height="20" width="127">Boxing</td>
  <td height="20" width="127">Thai Box</td>
  <td height="20" width="127">Judo for seniors</td>
  <td height="40" width="254" rowspan="2" colspan="2">Stretching</td>          <!-- Copre 2 righe e 2 colonne -->
  <td height="20" width="127">Running</td>
</tr>

<tr align="center">
  <td height="20" width="97" align="left"><b>20,30-22,00</b></td>
  <td height="20" width="127">Acquagym</td>
  <td height="20" width="127">Trekkmill</td>
  <td height="20" width="127">Rowing</td>
  <td height="20" width="127">Fit Box</td>
</tr>
</table>
</div>