Come creare una tabella nidificata

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.

istruzione

layout di pagina

1 Come creare una tabella nidificata


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 Come creare una tabella nidificata


Tipo "tabella nidificata Navigazione Pagina" tra i tag <title> </ title> tag, come mostrato:
<Title> tabella nidificata Navigazione Pagina </ title>

3 Come creare una tabella nidificata


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 Come creare una tabella nidificata


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 Come creare una tabella nidificata


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 Come creare una tabella nidificata


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 Come creare una tabella nidificata


Salvare il documento come "nested-tables.html" e caricarlo sul server. L'immagine allegata è come la pagina appare finora.

Annidata Tavola di navigazione

8 Come creare una tabella nidificata


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 Come creare una tabella nidificata


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 Come creare una tabella nidificata


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 Come creare una tabella nidificata


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 Come creare una tabella nidificata


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 Come creare una tabella nidificata


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.

Consigli e avvertenze

  • Aggiungere l'attributo "align" per i tag "di dati tabella" all'interno della tabella di navigazione, e li uguale a "centro" per il centro-allineare il testo di navigazione. Aggiungere l'attributo "align", impostare uguale a "centro", al tag "dati della tabella" nella riga 1 per centrare il titolo della pagina.