Sådan Erstat tabeller med divs

Tableless Webdesign bruger CSS og div tags at lægge data på siden. Du kan erstatte dine HTML-tabeller med "div" tags. For hver tabel række og kolonne tag, du erstatte den eksisterende HTML-kode med en div tag. Processen gør HTML-koden renere og lettere læst af andre programmører, der har brug for at redigere eller tilføje til dine HTML-projekter.

Vejledning

1

Højreklik på websiden med tabellerne, du ønsker at udskifte, og vælg "Åbn med" fra genvejsmenuen. Klik på HTML eller tekst editor du vil bruge til at redigere siden.

2

Find den tabel, du vil redigere. Udskift "<table>" tag med din første div, som bliver det vigtigste div container. Udskift alle rækker og kolonner i tabellen med indlejrede div tags. Følgende kode er et eksempel på en HTML-tabel:

<Table>

<Tr>

<Td> første kolonne </ td>

<Td> anden kolonne </ td>

</ Tr>

</ Table>

Udskift "<table>" tag med en åbning "<div>" tag og erstatter "</ table>" med et afsluttende "</ div>" tag.

3

Udskift tabelrække eller "<tr>" tags med div tags. Ved hjælp af tabellen fra trin 2, følgende kode erstatter tabel rækken tags med div tags:

<Div id = "maincontainer">

<Div id = "tablerow">

<Td> første kolonne </ td>

<Td> anden kolonne </ td>

</ Div>

</ Div>

4

Udskift tabellens celler eller kolonner. Den "<td>" tags indeholder dine data. Følgende kode fuldender udskiftning af HTML-tabel med div tags:

<Div id = "maincontainer">

<Div id = "tablerow">

<Div id = "cell1"> første kolonne </ div>

<Div id = "cell2"> anden kolonne </ div>

</ Div>

</ Div>

Relaterede artikler