Il layout tableless HTML ha sostituito il layout di tabella HTML per rendere il codice più efficiente, più facile da leggere e meno probabilità di avere errori. È possibile sostituire i tag tabella HTML utilizzando il tag div. tag div incorporati agiscono come righe e le colonne della tabella. Dopo aver sostituito i tag table con i tag div, il layout rimane la stessa, ma il codice è più facile da gestire se mai hai bisogno di apportare modifiche in futuro.

istruzione

1 Fare clic sulla pagina HTML che contiene la tabella che si desidera convertire. Fai clic su "Apri con", quindi fare clic l'editor HTML che si desidera utilizzare.

2 Trovare il tag table apertura. Si inizia la conversione, sostituendo l'apertura e chiusura tag tavolo con l'apertura e chiusura tag div. Il codice che segue è un esempio di una tabella con due colonne e una riga:

<Table>

<Tr>

<Td> Dati riga # 1 </ td>

<Td> Dati Row # 2 </ td>

</ Tr>

</ Table>

3 Sostituire le apertura e chiusura tag table con i tag div. Utilizzando l'esempio nella Fase 2, sostituendo i tag table con un div contenitore principale si presenta come il seguente codice:

<Div id = "principale">

<Tr>

<Td> Dati riga # 1 </ td>

<Td> Dati Row # 2 </ td>

</ Tr>

</ Div>

4 Sostituire i tag riga della tabella con i tag div embedded. I tag "TR" rappresentano le righe della tabella. Il codice seguente mostra la tabella da passaggi 2 e 3 con tag div per le righe:

<Div id = "principale">

<Div id = "file">

<Td> Dati riga # 1 </ td>

<Td> Dati Row # 2 </ td>

</ Div>

</ Div>

5 Sostituire le celle della tabella o colonne con i tag div finali incorporati. Il codice seguente completa la sostituzione della tabella di esempio con i tag div:

<Div id = "principale">

<Div id = "file">

<Div id = "column1"> Dati riga # 1 </ div>

<Div id = "Column2"> Dati Row # 2 </ div>

</ Div>

</ Div>