Mentre ci sono molti modi diversi per creare un layout Web, c'è un modo semplice per fare il lavoro: tag Usa HTML per creare un layout di tabella. HTML è il linguaggio di sviluppo Web universalmente accettato utilizzato in tutto il mondo. Nessun browser Web avrà difficoltà la visualizzazione di un sito progettato su una base HTML. Il layout del tavolo può essere visualizzato per mostrare i confini organizzativi, se lo si desidera. I pesi e gli stili di questi confini possono diventare parte del layout Web.

istruzione

1 Aprire qualsiasi programma di modifica del testo e nome e salvare il nuovo documento utilizzando l'estensione .html. Iniziare e terminare un layout di tabella con il <table> e </ table> tag. Il tag <table> indica al browser di creare una tabella utilizzando il utilizzando i seguenti parametri; la </ table> tag dice al browser per terminare il tavolo.

2 Creare ogni riga della tabella utilizzando i tag <tr> e </ tr>. Ogni riga viene creato utilizzando i seguenti comandi:

<Table>
<Tr>
</ Tr>
<Tr>
</ Tr>
<Tr>
</ Tr>
</ Table>

3 Aggiungi contenuto (dati della tabella) per ogni cella singola tabella utilizzando i tag <td> e </ td>. dati della tabella viene aggiunto a ogni riga utilizzando i seguenti comandi:

<Table>
<Tr>
<Td> riga 1, cella 1 </ td>
<Td> riga 1, cella 2 </ td>
<Td> riga 1, cellule 3 </ td>
</ Tr>
<Tr>
<Td> fila 2, cella 1 </ td>
<Td> fila 2, cella 2 </ td>
<Td> fila 2, 3 celle </ td>
</ Tr>
<Tr>
<Td> riga 3, cella 1 </ td>
<Td> riga 3, cella 2 </ td>
<Td> riga 3, cella 3 </ td>
</ Tr>
</ Table>

4 Aggiungere intestazioni per ogni colonna utilizzando il <th> e </ th> tag. I titoli vengono aggiunti a ogni colonna utilizzando i seguenti comandi:

<Table>
<Tr>
<Th> Colonna 1 titolo </ th>
<Th> Colonna 2 Intestazione </ th>
<Th> Colonna 3 Intestazione </ th>
</ Tr>
<Tr>
<Td> riga 1, cella 1 </ td>
<Td> riga 1, cella 2 </ td>
<Td> riga 1, cellule 3 </ td>
</ Tr>
<Tr>
<Td> fila 2, cella 1 </ td>
<Td> fila 2, cella 2 </ td>
<Td> fila 2, 3 celle </ td>
</ Tr>
<Tr>
<Td> riga 3, cella 1 </ td>
<Td> riga 3, cella 2 </ td>
<Td> riga 3, cella 3 </ td>
</ Tr>
</ Table>

5 Aggiungere definizioni di confine alla tabella utilizzando l'attributo border. I confini sono resi visibili utilizzando i seguenti comandi:

<Table border = "2">
<Tr>
<Td> riga 1, cella 1 </ td>
<Td> riga 1, cella 2 </ td>
<Td> riga 1, cellule 3 </ td>
</ Tr>
<Tr>
<Td> fila 2, cella 1 </ td>
<Td> fila 2, cella 2 </ td>
<Td> fila 2, 3 celle </ td>
</ Tr>
<Tr>
<Td> riga 3, cella 1 </ td>
<Td> riga 3, cella 2 </ td>
<Td> riga 3, cella 3 </ td>
</ Tr>
</ Table>

Il numero vicino al attributo border cambia il peso, o lo spessore della linea di confine che separa le celle della tabella.

6 Aggiungere un'intestazione e piè di pagina fila alla tabella utilizzando l'attributo colspan. L'attributo colspan viene aggiunto utilizzando i seguenti comandi:

<Table border = "2">
<Tr>
<Td colspan = "3"> Intestazione Contenuto </ td>
</ Tr>
<Tr>
<Td> riga 1, cella 1 </ td>
<Td> riga 1, cella 2 </ td>
<Td> riga 1, cellule 3 </ td>
</ Tr>
<Tr>
<Td> fila 2, cella 1 </ td>
<Td> fila 2, cella 2 </ td>
<Td> fila 2, 3 celle </ td>
</ Tr>
<Tr>
<Td> riga 3, cella 1 </ td>
<Td> riga 3, cella 2 </ td>
<Td> riga 3, cella 3 </ td>
</ Tr>
<Tr>
<Td colspan = "3"> piè di pagina Contenuti </ td>
</ Tr>
</ Table>

L'attributo colspan crea una cella che si estende in tutto il numero di colonne nella tabella. Questo attributo non crea un'intestazione e / o di una riga piè di pagina di per sé, ma consente una facile ed efficace il posizionamento di un colpo di testa e una riga piè di pagina se questi sono desiderati.

Consigli e avvertenze

• Ci sono spiegazioni di altri attributi HTML, come l'altezza, l'allineamento, e gli attributi di larghezza, disponibile sul Web, questi consentono di sviluppare ulteriormente l'aspetto del vostro layout Web.