Hur man byter bord med divs

December 10

Tableless webbdesign använder CSS och div-taggar för att lägga ut uppgifter på sidan. Du kan byta ut HTML-tabeller med "div" taggar. För varje tabellrad och kolumn tag, ersätter du det befintliga HTML-kod med en div tagg. Processen gör HTML-koden renare och lättare läsas av andra kodare som behöver ändra eller lägga till HTML-projekt.

Instruktioner

1 Högerklicka på webbsidan med tabellerna som du vill ersätta och välj "Öppna med" på snabbmenyn. Klicka på HTML eller textredigerare som du vill använda för att redigera sidan.

2 Leta upp tabellen som du vill redigera. Byt ut "<table>" tag med din första div, som blir huvud div container. Byt ut alla rader och kolumner i tabellen med kapslade div-taggar. Följande kod är ett exempel på en HTML-tabell:

<Table>

<Tr>

<Td> första kolumnen </ td>

<Td> andra kolumnen </ td>

</ Tr>

</ Table>

Ersätt taggen "<table>" med en öppning "<div>" tag och ersätta "</ table>" med en avslutande "</ div>" tag.

3 Byt tabellrad eller "<tr>" taggar med div-taggar. Med hjälp av tabellen från steg 2, följande kod ersätter tabellrad taggar med div-taggar:

<Div id = "maincontainer">

<Div id = "tablerow">

<Td> första kolumnen </ td>

<Td> andra kolumnen </ td>

</ Div>

</ Div>

4 Byt tabellens celler eller kolumner. Den "<td>" taggar innehåller dina data. Följande kod avslutar byte av HTML-tabell med div-taggar:

<Div id = "maincontainer">

<Div id = "tablerow">

<Div id = "CELL1"> första kolumnen </ div>

<Div id = "CELL2"> andra kolumnen </ div>

</ Div>

</ Div>


        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2019 Astrixsoft.com | Contact us: webmaster# astrixsoft.com