Webmastering by Emiliano ©Unsito.it |
Lezione n.5 Il corso di HTML: Le tabelle Oggi impariamo a disegnare una tabella in una pagina web. Il tag che ci consente di inserirne una e' il tag <TABLE>, che insieme ai tag di inserimento riga <TR> e cella <TD> ci permette di definirne la struttura. Bisogna fare attenzione nell'inserimento delle righe e delle celle, perche' si deve prima inserire la riga e poi all'interno di questa il numero di celle necessarie. Facciamo un esempio pratico: costruiamo una tabella di due righe e due colonne. Inseriamo all'interno del body della nostra pagina html il tag <TABLE> e poi inseriamo il tag di costruzione della prima riga <TR>. Ora inseriamo la prima cella della prima riga con il tag <TD>, ed il testo che vogliamo scrivere in questa cella, poi chiudiamo la prima cella </TD> ed apriamo la seconda riempiendo anche questa, per poi chiuderla. Chiudiamo anche la prima riga </TR> e costruiamo la seconda riga esattamente come abbiamo fatto per la prima ed infine chiudiamo anche la tabella </TABLE>. Troppo difficile? Osserviamo l'esempio di seguito e tutto sara' chiaro. Ecco l'esercizio appena svolto: <HTML> <HEAD> <!-- SPAZIO RELATIVO ALL'INTESTAZIONE --> </HEAD> <BODY> <TABLE BORDER=1> <!-- INIZIO TABELLA --> <TR> <!-- INIZIO PRIMA RIGA --> <TD> <!-- INIZIO PRIMA CELLA --> Riga 1 Cella 1 </TD> <TD> <!-- INIZIO SECONDA CELLA --> Riga 1 Cella 2 </TD> </TR> <!-- FINE PRIMA RIGA --> <TR> <!-- INIZIO SECONDA RIGA --> <TD> <!-- INIZIO PRIMA CELLA --> Riga 2 Cella 1 </TD> <TD> <!-- INIZIO SECONDA CELLA --> Riga 2 Cella 2 </TD> </TR> <!-- FINE SECONDA RIGA --> </TABLE> <!-- FINE TABELLA --> </BODY> </HTML> Seguite le operazioni gia' fatte piu' volte per visualizzare il programma all'interno del browser ed esercitatevi aumentando il numero di righe e colonne della tabella. Con le tabelle al suo interno, la nostra pagina web si fa piu' interessante e, se ben fatta, di approccio piu' gradevole per chi la guarda. Esercitatevi quindi con le tabelle, che sono indispensabili per una buona pagina internet. |