Hvordan lage en webside ved hjelp av DIV I stedet for en tabell

May 8

HTML-tabeller har blitt brukt til å kontrollere formateringen av en webside, inkludert tekst, bilder, skjemafelt og andre tabeller. Men de er mer egnet til å håndtere tekstdata enn bilder og nestede tabeller. CSS (Cascading Style Sheet) \ "<div> \" tag kan brukes til å opprette en tabell-lignende format som er mer egnet til å håndtere bilder, skjemafelt og andre tabeller. Også, i motsetning tabeller, stilark kan holdes i et eksternt dokument og knyttet til i HTML-dokumentet, noe som betyr en stilark kan brukes på tvers av flere sider på nettstedet ditt.

Bruksanvisning

CSS

1 Åpne et tekstdokument i en tekst editor.

2 Lag tabellen element med følgende kode: <br /> <br /> #table {<br /> bredde: 90% <br /> GO <br /> display: table <br /> GO <br /> grensen : 1px solid black;}

3 Lag radelement med følgende kode: <br /> <br /> #row {display: table-rad;}

4 Lag celle elementer med følgende kode: <br /> <br /> #left {<br /> bredde: 200px <br /> GO <br /> padding: 1em <br /> GO <br /> grensen: 1px solid svart <br /> GO <br /> display: table-cell <br /> GO <br />} <br /> <br /> #right {<br /> bredde: 200px <br /> GO <br /> padding: 1em <br /> GO <br /> border: 1px solid svart <br /> GO <br /> display: table-cell <br /> GO <br />} <br /> < br /> #middle {<br /> padding: 1em <br /> GO <br /> border: 1px solid svart <br /> GO <br /> display: table-cell <br /> GO <br /> }

5 Lagre filen med navnet \ "table.css \"

HTML

6 Åpne en ny tekstdokument.

7 Skriv inn følgende linjer for å starte html dokumentet og link til stylesheet: <br /> <br /> <html> <br /> <head> <br /> <link rel = \ "stylesheet \" type = \ " text / css \ "href = \" table.css \ "/> <br /> </ head>

8 Skriv inn følgende linjer for å opprette tabellen: <br /> <br /> <body> <br /> <div id = \ "table \">

9 Skriv inn følgende linje for å opprette rad: <br /> <br /> <div id = \ "rad \">

10 Skriv inn følgende linjer for å lage tabellceller: <br /> <br /> <div id = \ "venstre \"> <br /> <h4> Venstre </ h4> <br /> <p> Dette er venstre kolonne </ p> <br /> </ div> <br /> <br /> <div id = \ "midt \"> <br /> <h4> Senter </ h4> <br /> <p > Dette er den midterste kolonnen </ p> <br /> </ div> <br /> <br /> <div id = \ "riktige \"> <br /> <h4> høyre </ h4> <br /> <p> Dette er høyre kolonne </ p>

11 Skriv inn følgende linjer for å lukke \ "<div> \" -kodene og avslutt HTML-dokumentet: <br /> <br /> </ div> <br /> </ div> <br /> </ div> < br /> </ body> <br /> </ html>

12 Lagre dokumentet med \ ". Html \" filtypen.

1. 3 Test ditt bord ved å åpne HTML-dokumentet i en nettleser.