Hvordan lage 3 kolonner i HTML for en webside

December 13

Kolonner tillate for tilpasning av en webside layout. De viser informasjon vertikalt og hjelpe deg å skille mellom separate områder. I en tre-kolonne side, bruker den første kolonnen for navigasjon, den midterste kolonnen for hovedinnholdet, og den siste kolonnen for ytterligere informasjon du ønsker å fremme. Hyper Text Markup Language lar deg bruke "DIV" eller "Table" koder for å lage kolonner og angi grenser, størrelse og bakgrunn av celler.

Bruksanvisning

Bruk divs

1 Start en tekstredigeringsprogram, for eksempel Notisblokk, Wordpad eller EditPad. Velg "Fil" og "New" fra menyen for å opprette et nytt dokument.

2 Kopier hjelp av hurtigtastene "Ctrl" og "C" og deretter lim - "Ctrl" og "V" - følgende HTML-kode på siden din. Den legger tre kolonner til side:

<Html>

<Head>

<Style>

<! -

hoved~~POS=TRUNC {

width: 100%;

}

.column1 {

background-color: gul;

padding: 2 piksler;

margin-right: 5px;

width: 150px;

float: left;

}

.column2 {

background-color: blue;

padding: 2 piksler;

margin-right: 5px;

width: 75px;

float: left;

}

.column3 {

background-color: red;

padding: 2 piksler;

margin-right: 5px;

width: 100px;

float: left;

}

</ Style>

</ Head>

<Body>

<Div class = "kolonne 1"> Innholdet i første kolonne </ div>

<Div class = "COLUMN2"> Innholdet i andre kolonne </ div>

<Div class = "kolonne 3"> Innholdet i tredje kolonne </ div>

</ Div>

</ Body>

</ Html>

3 Erstatt "width" for ".column1", ".column2" og ".column3" med bredde du vil angi. Sett på "background-color" verdi for hver kolonne med bakgrunnsfargen du vil bruke. For å opprette kolonner uten bakgrunn, fjerne linjen som inneholder "background-color", slik som:

background-color: red;

Bruke tabeller

4 Velg "Fil" og "New" fra menyen i din favoritt teksteditor.

5 Kopier og lim inn følgende HTML-kode på siden din for å sette inn tre kolonner:

<Html>

<Body>

<Tr>

<Td style = "width: 250px; background-color: gul; text-align: top;"> Innholdet i første kolonne </ td>

<Td style = "width: 250px; background-color: blue; text-align: top;"> Innholdet i andre kolonne </ td>

<Td style = "width: 250px; background-color: red; text-align: top;"> Innholdet i tredje kolonne </ td>

</ Tr>

</ Table>

</ Body>

</ Html>

6 Bytt bredde med kolonnebredden du vil angi. Erstatt verdien for "background-color" med den bakgrunnen du ønsker. For å fjerne bakgrunnsfargen, fjerne sin kode, for eksempel:

background-color: gul;