Tabelle INFO WEB LEZIONE N.6 RAVENNA, 2 APRILE 2008 In HTML le tabelle vengono largamente utilizzate per organizzare i dati in tabelle creare il layout della pagina servendosi di tabelle nascoste Si definiscono utilizzando il tag <table> Dott. Giuseppe Contissa giuseppe.contissa@unibo.it Inserire righe e colonne Per inserire una riga si utilizza il tag all interno di ogni riga si può inserire il tag <th></th> per le intestazioni Per inserire una colonna si utilizza il tag<td> </td> Esempio 20 <table> <th>colonna 1 </th> <th>colonna 2</th> Attributi del tag TABLE Con gli attributi del tag <table> è possibile definire le dimensioni della tabella il bordo della tabella lo spazio tra le celle lo spazio tra celle e contenuto lo sfondo l allineamento Dimensioni delle tabelle Attributi width height Possono essere espresse in pixel (la misura della tabella rimane invariata), o in percentuale della pagina (la misura della tabella cambia in base alla risoluzione di chi la visualizza)
Esempio 21 Esempio 21 (continua) <table width=20%>.. <table width=500> Impostare il bordo Visualizzare il bordo Spessore del bordo border=n Colore del bordo bordercolor=#rrggbb o nome colore Ombra del bordo bordercolordark=#rrggbb o nome colore Visibilità del bordo Frame= void elimina tutti i bordi esterni above mostra il bordo solo in alto below mostra il bordo solo in basso lhs mostra il bordo solo sul lato sinistro rhs mostra il bordo solo sul lato destro hsides mostra il bordo solo sui lati orizzontali vsides mostra il bordo solo sui lati verticali box mostra il bordo su tutti i lati Esempio 22 Esempio 22 (continua) <table border= 1 bordercolor= red >.. <table border= 4 bordercolordark= blue >
Esempio 22 (continua) Sfondo delle tabelle Colore unitario dello sfondo bgcolor= #rrggbb o nome colore Immagine di sfondo background= filename Esempio 23 Esempio 23 (continua) <table bgcolor= red >.. <table background=./images/sfondo.jpg > Inserire spazi nelle tabelle Esempio 24 Per inserire uno spazio tra celle si deve dare un valore all attributo CELLPADDING Per stabilire la distanza tra la cella e il contenuto si deve dare un valore all attributo CELLSPACING <table border=1 cellpadding=10 cellspacing=20> <th>colonna 1 </th> <th>colonna 2</th>
Esempio 24 (continua) Allineamento Allineamento del contenuto della tabella valign= top con il lato superiore della cella bottom con il lato inferiore della cella Allineamento del contenuto della riga o colonna align= left right center Ultime note Esempio 25 Per creare celle vuote si deve inserire il carattere speciale tra i tag es. <td> </td> Per creare celle che occupano più di una riga si devono utilizzare gli attributi rowspan e colspan <table border= 1 cellpadding= 10 width= 80% > <tr align="center > <th rowspan= 2 >A</th> <th colspan= 3 >B</th> <tr align="center > <th>c</th> <th>d</th> <th>e</th > <tr align="center"> <td>1</td><td>2</td><td>3</td ><td>4</td> <tr align="center"> <td>5</td><td>6</td><td>7</td ><td>8</td> <table> Esempio 25 (continua) Trasferimento FTP Per spostare un sito su un server web si utilizza solitamente il protocollo FTP (file transfer protocol), per mezzo di un programma client FTP, (es. CuteFtp o WS-Ftp) che viene configurato indicando: Indirizzo ftp del sito dove verranno caricate le pagine e le immagini Nome utente e password per l accesso
Trasferimento FTP (continua) File sul PC personale File sul PC remoto Cliccare per copiare i file selezionati Questa è una immagine del programma WS- FTP. Altri programmi hanno interfacce un po diverse, ma funzionano allo stesso modo. Una volta effettuata la procedura di login, si selezionano e si copiano i file dal computer locale al server Attenzione a copiare non solo i file html ma anche le immagini. A questo punto il sito è online sul web