AngelodiluceInternet

Corso HTML,avatar,gif,sfondi, ,icone, programmi free ,aforismi,poesie,Karaoke
 
IndiceCalendarioFAQCercaLista UtentiGruppiRegistratiAccedi
Cerca
 
 

Risultati secondo:
 
Rechercher Ricerca avanzata
Argomenti simili
calendario
Contavisite
Migliori postatori
Angelodiluce
 
Valentina
 
raffaeled3
 
Luca
 
Lady
 
Eleonora
 
Stella
 
leona
 
Lia
 
michela2
 
Chi è in linea
In totale ci sono 3 utenti in linea: 0 Registrati, 0 Nascosti e 3 Ospiti

Nessuno

Il numero massimo di utenti online contemporaneamente è stato 158 il Lun Dic 10, 2012 9:48 pm
Statistiche
Abbiamo 38 membri registrati
L'ultimo utente registrato è Cristiano71

I nostri membri hanno inviato un totale di 653 messaggi in 646 argomenti
traduttore
PAGERANK
Page Rank Checker Button
Partner



Condividere | 
 

 Le Tabelle.

Vedere l'argomento precedente Vedere l'argomento seguente Andare in basso 
AutoreMessaggio
Angelodiluce
Admin
avatar

Messaggi : 925
Data d'iscrizione : 19.06.10

MessaggioTitolo: Le Tabelle.   Sab Giu 19, 2010 7:06 am

Le tabelle contrariamente a quanto si potrebbe pensare non servono soltanto per incolonnare e tabulare dati, la struttura di una tabella serve anche come "contenitore" per testi ed immagini, proprio come ho fatto io per creare questa rubrica Primi Passi. In questo caso ho reso la tabella invisibile in modo da non compromettere l'aspetto estetico della pagina.

Vediamo come si crea una semplice tabella:
Codice:
<table>

Questo è l'elemento che dichiara una tabella, da solo dice poco o niente, necessita di altri elementi, almeno due:
Codice:
<tr> e <td>
che si trovano annidati al suo interno e che servono rispettivamente per suddividere la tabella in righe e in colonne. Intere tabelle possono poi essere a loro volta contenute all'interno di celle di altre tabelle, da qui il termine nidificate, un po' come succede con quelle scatole cinesi dove una è all'interno di un'altra.

Iniziamo nel modo più semplice possibile, supponendo di volere una tabella con una sola cella, questa la sua definizione

Codice:
<table border="1">
<tr>
  <td> qui andrà messo il contenuto della tabella </td>
</tr>
</table>



Questo il risultato grafico:






qui andrà messo il contenuto della tabella



Da notare che ogni elemento che riguarda la tabella necessita del relativo elemento (o tag) di chiusura /, dove
Codice:
<tr>
decreta l'inizio di una nuova riga, mentre
Codice:
<td>
è la cella vera e propria. Dovendo creare una tabella con due celle affiancate, praticamente due colonne, sarà sufficiente affiancare due elementi
Codice:
<td>
all'interno di uno stesso elemento
Codice:
<tr>

Codice:
<table border="1">
<tr>
  <td> cella sinistra </td><td> cella destra </td>
</tr>
</table>

Questo il risultato:





cella sinistra cella destra

Con la stessa logica è possibile aggiungere tutte le righe e le celle che servono, quindi:



Codice:
<table border="1">
<tr>
  <td> cella alta a sinistra </td><td> cellaalta a destra </td>
</tr><tr>
  <td> cella bassa a sinistra </td><td> cella bassa a destra </td>
</tr>
</table>








cella alta a sinistra cellaalta a destra
cella bassa a sinistra cella bassa a destra


Questo il risultato grafico:

Definirei questo meccanismo abbastanza semplice oltre che molto logico, quindi facile da capire. Spesso però servono tabelle che non siano regolari come quella appena vista, c'è bisogno di avere colonne o righe irregolari. Questo accade abbastanza spesso quando l'uso della tabelle non si limita alla semplice tabulazione dei dati ma viene adoperata come contenitore di oggetti quali: immagini, applets, scripts, testi, e tutto quello che può far parte di una pagina web.

Vediamo allora come creare delle tabelle particolari facendo uso di altri due attributi: rowspan e colspan che servono rispettivamente per occupare più di una sola cella in senso orizzontale ed in quello verticale. Visto che modificano la cella sono applicabili al solo elemento (o tag)
.

Vediamo un esempio: supponendo di dover occupare con una sola cella più colonne di una tabella regolare, adopereremo colspan specificando il numero di colonne da occupare, che nel nostro caso potrà essere al massimo 2 (ovvio la nostra tabella in questo caso è formata da 2 sole colonne):

Codice:
<table border="1">
<tr>
  <td> cella alto sinistra </td><td> cella alto destra </td>
</tr>
<tr>
  <td colspan="2"> questa cella occupa lo spazio di due celle </td>
</tr>
</table>

Questo il risultato grafico:








cella alto sinistra cella alto destra
questa cella occupa lo spazio di due celle


Allo stesso modo volendo occupare più righe di una tabella regolare, si farà uso di rowspan specificando il numero di righe da occupare, che nel nostro caso potrà essere al massimo 2 (ovvio la nostra tabella in questo caso è formata da 2 sole righe):

Codice:
<table border="1">
<tr>
  <td rowspan="2"> questa cella occupa 2 righe </td><td> cella alto destra </td>
</tr>
<tr>
  <td> cella basso destra </td>
</tr>
</table>


Questo il risultato grafico:









questa cella occupa 2 righe cella alto destra
cella basso destra




Come abbiamo appena avuto modo di vedere combinando questi attributi è possibile ottenere una struttura ottimale, tutto dipende da come e che cosa vogliamo impaginare.

Vediamo un altro esempio, supponendo di volere un tipo di impaginazione stile giornale quotidiano: testata, colonne e piede pagina; questo il codice:

Codice:
<table border="1">
<tr>
<td colspan="3" align="center">testata pagina</td>
</tr>
<tr>
<td>colonna 1 </td><td>colonna 2 </td><td>colonna 3 </td>
</tr>
<tr>
<td colspan="3" align="center">piede pagina</td>
</tr>
</table>


questo il risultato:












testata pagina
colonna 1 colonna 2 colonna 3
piede pagina



Il bordo in alcuni casi potrebbe risultare fastidioso, oppure per qualche strano motivo lo si potrebbe preferire più vistoso, uno degli attributi dell'elemento è proprio border che se impostato a zero non produce alcun bordo, viceversa è possibile specificarne lo spessore in pixel. Questo sotto un esempio con bordo a zero:

Codice:
<table border="0">


Codice:
<table border="1">
<tr>
<td colspan="3" bgcolor="Red">testata pagina</td>
</tr>
<tr>
<td bgcolor="Lime">colonna 1 </td>
<td bgcolor="Silver">colonna 2 </td>
<td bgcolor="Yellow">colonna 3 </td>
</tr>
<tr>
<td colspan="3" bgcolor="Aqua">piede pagina</td>
</tr>
</table>














testata pagina
colonna 1 colonna 2 colonna 3
piede pagina


Gli attributi supportati dalle celle sono molti: align con i parametri: right, left, center, justify che servono per allineare il contenuto delle celle rispettivamente a: destra, sinistra, centro, giustificato.

width con i parametri espressi in pixel o in % per fissare le dimensioni in larghezza.

height con i parametri espressi in pixel o in % per fissare le dimensioni in altezza.
Tornare in alto Andare in basso
Vedi il profilo dell'utente http://angelodiluceinternet.forum-ativo.com
 
Le Tabelle.
Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto 
Pagina 1 di 1
 Argomenti simili
-
» Linguaggio interno per testi MW
» DM 27 settembre 2010
» STESSO CODICE CER MA DIVERSI CODICI DI PERICOLO
» PROROGA SISTRI TABELLE SCAGLIONI PRODUTTORI
» Aiuto compilazione tabelle......

Permessi di questa sezione del forum:Non puoi rispondere agli argomenti in questo forum
AngelodiluceInternet :: Lezioni di HTML-
Andare verso: