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>