Hvordan lage en 5-kolonne tabell CSS Website

Tabeller er gamle måter å formatere informasjon på en webside. Tabeller er konstruert av rader og kolonner. Den skjærer av en rad og kolonne er en celle. Innenfor disse cellene, webmastere er i stand til å lagre tekst eller skjemakontroller og presentere dem til brukeren i en formatert, justert område på websiden. Men tabellene er vanskelig å kontrollere på en side, så Cascading Style Sheets (CSS) tok over. CSS er en måte å lage bordlignende områder på en side uten krav og begrensninger i en tabell.

Bruksanvisning

1 Åpne din favoritt HTML tekst editor. For en enkel editor, kan Notepad brukes. Mer avanserte redaktører som Visual Studio fargekode HTML, slik at det er lettere å lese og redigere når sidene blir flere hundre linjer.

2 Skriv åpningen HTML-koden for CSS tabellen i teksteditor. Det første elementet i en tabell er "<table>" tag. For CSS, det er den "<div>" tag. Nedenfor er koden for å starte CSS tabellen element:
<Div style = "width: 450 piksler;"> </ div>
Denne koden skaper en CSS bord som tar opp 450 piksler på brukerens skjerm.

3 Lag den første cellen og kolonne i CSS tabellen. Embedded divs i HTML-koden lage kjøtt av tabellen. Hver div plassert i første div vil skape en celle. Nedenfor er koden for å lage en one-celle tabell i CSS:
<Div style = "width: 450 piksler;">
<Div width: 50%; "> First Cell </ div>
</ Div>
Den innebygde div er en kolonne som tar opp 50% av CSS tabellens bredde.

4 Lag den andre cellen til å fylle ut resten av CSS tabellens bredde. Siden bare 50% av tabellen ble fylt i trinn 3, er en annen div opprettet for å fylle ut resten av tabellen. Dette skaper en tabell med to kolonner. Nedenfor er koden for å lage den andre cellen:
<Div style = "width: 450 piksler;">
<Div width: 50%; "> First Cell </ div>
<Div width: 50%; "> Second Cell </ div>
</ Div>

5 Trykk på "Ctrl" og "S" tasten på tastaturet. Dette sparer filen på harddisken. Naviger til plasseringen på harddisken hvor filen ble lagret. Dobbeltklikk den og filen åpnes i et nettleservindu. Du skal se en tabell med to celler merket "First Cell" og "Second Cell."