February 22
tabelle HTML vengono utilizzati per suddividere una pagina web in moduli organizzati. Quando si utilizzano tabelle per il layout di pagina, può essere necessario nidificare una tabella all'interno di una tabella. Una situazione che richiede questo processo è una tabella di navigazione all'interno di una cella di una tabella di impaginazione.
1
Digitare il seguente codice per creare la pagina web di base XHTML:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "it" lang = "it">
<Head>
<Title> </ title>
</ Head>
<Body>
</ Body>
</ Html>
2
Tipo "tabella nidificata Navigazione Pagina" tra i tag <title> </ title> tag, come mostrato:
<Title> tabella nidificata Navigazione Pagina </ title>
3
Digitare il <table> </ table> tag tra <body> </ body>, darà l'inizio tag <table> il "confine" attributi e impostarlo uguale a "1"
<Table border = "1">
</ Table>
4
Aggiungere tre coppie di tag "riga della tabella" tra l'inizio e la fine <table> </ table> tag. Aggiungere un paio di "dati tabella" tag per le righe 1 e 2 e tre paia di "dati di tabella" tag alla riga 3. Quindi aggiungere l'attributo "colspan" e impostarlo uguale a "3" all'interno dei "dati della tabella" tag in righe 1 e 2, come indicato:
<Tr> <td colspan = "3"> </ td> </ tr>
<Tr> <td colspan = "3"> </ td> </ tr>
<Tr> <td> </ td> <td> </ td> <td> </ td> </ tr>
5
Aggiungere l'attributo "larghezza" e impostarlo a "100%", al fine di ampliare la dimensione della tabella alla larghezza di pagina:
<Table border = "1" width = "100%">
6
Aggiungete un po 'di contenuti tra i tag "dati tabella" a righe 1 e 3, al fine di espandere la tabella per l'altezza della pagina.
<Tr>
<Td colspan = "3"> <h1> tabelle nidificate </ h1> </ td>
</ Tr>
<Tr>
<Td colspan = "3"> </ td>
</ Tr>
<Tr>
<Td> <h2> Contenuto Sezione Prima </ h2> </ td>
<Td> <h2> Contenuto Sezione Due </ h2> </ td>
<Td> <h2> Contenuto Sezione Tre </ h2> </ td>
</ Tr>
7
Salvare il documento come "nested-tables.html" e caricarlo sul server. L'immagine allegata è come la pagina appare finora.
8
Digitare l'inizio e la fine tag "tavolo" tra i tag "di dati tabella" nella riga 2, come illustrato:
<Tr>
<Td colspan = "3">
<Table> </ table>
</ Td>
</ Tr>
9
Aggiungere i due tag "riga della tabella" tra l'inizio e la fine "tavolo" tag nella riga 2:
<Tr>
<Td colspan = "3">
<Table>
<Tr> </ tr>
<Tr> </ tr>
</ Table>
</ Td>
</ Tr>
10
Aggiungere cinque paia di "dati della tabella" tag tra ogni coppia di tag "riga di tabella", come indicato:
<Tr>
<Td colspan = "3">
<Table>
<Tr>
<Td> </ td> <td> </ td> <td> </ td> <td> </ td> <td> </ td>
</ Tr>
<Tr>
<Td> </ td> <td> </ td> <td> </ td> <td> </ td> <td> </ td>
</ Tr>
</ Table>
</ Td>
</ Tr>
11
Tipo "Page One" a "Pagina Five" tra la prima fila di "dati della tabella" tag, e "Page Six" a "Pagina Ten" attraverso la seconda fila di "dati di tabella" tag. Ciò contribuirà a riempire lo spazio per dimostrare la struttura della tabella nidificata.
<Tr>
<Td> Page One </ td>
<Td> Pagina Due </ td>
<Td> Pagina Tre </ td>
<Td> pagina quattro </ td>
<Td> Pagina Cinque </ td>
</ Tr>
<Tr>
<Td> Page Six </ td>
<Td> pagina sette </ td>
<Td> Page Eight </ td>
<Td> Pagina Nove </ td>
<Td> Pagina Ten </ td>
</ Tr>
12
Aggiungere la larghezza e attributi confine con il tag all'inizio "tavolo" nella riga della tabella del layout di pagina 2, l'impostazione della "larghezza" uguale a "100%" e il "confine" uguale a "1":
<Table width = "100%" border = "1">
13
Salvare e caricare il documento. Come si può vedere dall'immagine allegata, la tabella di impaginazione circonda la tabella di navigazione. La tabella di navigazione è nidificato all'interno del tag "dati della tabella" della riga 2.