Hvordan erstatte tabeller med Divs

Tableless web design bruker CSS og div koder for å legge ut dataene på siden. Du kan erstatte HTML-tabeller med "div" tags. For hver tabell rad og kolonne tag, erstatter du den eksisterende HTML-kode med en div tag. Prosessen gjør HTML-koden renere og mer lett leses av andre programmerere som trenger å redigere eller legge til HTML-prosjekter.

Bruksanvisning

1 Høyreklikk på websiden med tabellene du ønsker å erstatte og velge "Åpne med" fra kontekstmenyen. Klikk på HTML eller tekst editor du vil bruke til å redigere siden.

2 Finn tabellen som du vil redigere. Erstatt "<table>" tag med ditt første div, som blir den viktigste div container. Bytt ut alle rader og kolonner i tabellen med nestet div koder. Følgende kode er et eksempel på en HTML-tabell:

<Table>

<Tr>

<Td> første kolonne </ td>

<Td> andre kolonne </ td>

</ Tr>

</ Table>

Erstatt "<table>" tag med en åpning "<div>" tag og erstatte "</ table>" med en avsluttende "</ div>" tag.

3 Sett på tabellraden eller "<tr>" tags med div koder. Ved hjelp av tabellen fra trinn 2, erstatter følgende kode raden i tabellen tagger med div koder:

<Div id = "maincontainer">

<Div id = "tablerow">

<Td> første kolonne </ td>

<Td> andre kolonne </ td>

</ Div>

</ Div>

4 Sett på tabellens celler eller kolonner. Den "<td>" tags inneholde data. Følgende kode fullfører utskifting av HTML-tabell med div koder:

<Div id = "maincontainer">

<Div id = "tablerow">

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

<Div id = "CELL2"> andre kolonne </ div>

</ Div>

</ Div>