Hvordan bruke CSS DIV erstatte Tabeller

May 7

HTML-tabeller er laget for å inneholde tekst data som er sortert i rader og kolonner, og selv om du kan også bruke tabeller for å plassere bilder og andre elementer på en side, er det bedre å bruke HTML "<div>" tag, sammen med gjennomgripende stilark eller CSS, for å formatere en side. Du kan bruke "<div>" tag å skape samme rader og kolonner som finnes i en tabell, og formatere den bredden og høyden på hver celle individuelt, noe som gir deg mer kontroll over plassering av elementer.

Bruksanvisning

CSS

1 Åpne et vanlig tekstdokument i en tekst editor.

2 Skriv inn følgende for å skape stilen for utsiden av tabellen:

container

{

display: table;

border-style: solid;

border-width: 2 piksler;

width: 100%;

}

3 Skriv inn følgende for å skape stilen for tabellrader:

rad

{

display: table-row;

height: 100px;

border-style: solid;

border-width: 2 piksler;

}

4 Skriv inn følgende for å skape stilen for tabellkolonnene:

col

{

display: table-cell;

text-align: center;

vertical-align: top;

border-style: solid;

border-width: 2 piksler;

}

5 Lagre filen som "css_table.css."

HTML

6 Åpne et vanlig tekstdokument i en tekst editor.

7 Skriv inn følgende for å starte HTML-dokument og link til CSS dokumentet:

<Html>

<Head>

</ Head>

<Body>

8 Skriv inn følgende for å starte container som vil holde tabellen:

9 Skriv inn følgende for å opprette den første raden som inneholder tre kolonner:

<div id = "row">

& Lt; div id = "col">

& Lt; p> Først Column & lt; / br>

Row One & lt; / br> & lt; / p>

& Lt; / div>

& Lt; div id = "col">

& Lt; p> andre kolonnen & lt; / br>

Row One & lt; / br> & lt; / p>

& Lt; / div>

& Lt; div id = "col">

& Lt; p> Tredje kolonne & lt; / br>

Row One & lt; / br> & lt; / p>

& Lt; / div>

10 Skriv inn følgende for å opprette andre rad av tre kolonner:

<div id = "col">

& Lt; p> Først Column & lt; / br>

Row Two & lt; / br> & lt; / p>

& Lt; / div>

& Lt; div id = "col">

& Lt; p> andre kolonnen & lt; / br>

Row Two & lt; / br> & lt; / p>

& Lt; / div>

& Lt; div id = "col">

& Lt; p> Tredje kolonne & lt; / br>

Row Two & lt; / br> & lt; / p>

& Lt; / div>

11 Skriv inn følgende for å lukke beholderen div og HTML-dokumentet:

</ Div>

</ Body>

</ Html>

12 Lagre dokumentet som "css_table.html."

1. 3 Åpne HTML-dokumentet i enhver nettleser for å se tabellen.