HOME -> HTML_TUTORIAL -> html-06 Lørdag, 19. august 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2002 - Opdateret n/a

Lektion 06

Tabeller.

Indhold:

  • Elementer/tags og attributter.
  • Den første tabel.
  • Den første tabel - en gang til.


Elementer/tags og attributter.
En tabel er opdelt i rækker (horisontal) og kolonner (vertikal).

For at kunne lave tabeller har vi brug for følgende elementer:

<table> => Her starter tabellen.
<tr> => Table row.
<td> => Table data.

Vi husker fra før [start-tag] [content] [end-tag].

Grundstrukturen i opbygningen af en tabel er som følgende:


<table>
<tr>
<td>celle nummer 1</td>
<td>celle nummer 2</td>
</tr>
</table>


Nogle attributter:

<border> => Ramme omkring din tabel.
<width> => Angiver bredde.
<height> => Angiver højde.
<bgcolor> => Baggrundsfarve.
<align> => Centrering i tabellen, rækken eller den enkelte celle. Left-center-right.
<valign> => Justering af indhold i cellen i vertikal retning. Top-middle-bottom.
<bordercolor> => Angiver farven af rammen.

De enkelte attributter tilføjes en værdi. Værdierne opgives for det meste i % af skærmbredden eller px (pixels).
Den første tabel.

<table border="1" bordercolor="red">

<tr>
<td>Her er celle 1</td>
<td>Her er celle 2</td>
<td>Her er celle 3</td>
</tr>

<tr>
<td>Her er celle 4</td>
<td>Her er celle 5</td>
<td>Her er celle 6</td>
</tr>

</table>


Ser således ud i browseren:

De enkelte cellers bredde er tilpasset indholdet. Dette gøres automatisk hvis ikke en bredde angives.

Den første tabel - en gang til.
Her kommer den samme tabel en gang til, denne gang anvendes en del attributter med tilhørende værdier.


<table border="1" bordercolor="red" bgcolor="gray" width="500px">

<tr>
<td align="center">Her er celle 1</td>
<td align="right">Her er celle 2</td>
<td>Her er celle 3</td>
</tr>

<tr height="75">
<td valign="bottom">Her er celle 4</td>
<td bgcolor="white">Her er celle 5</td>
<td valign="top">Her er celle 6</td>
</tr>

</table>


Ser således ud i browseren:



Der er ingen grænser for hvad du kan smide ind i dine tabeller. Det kan være tekst, billeder eller en tabel!!
En TABEL placeret i en anden tabel foregår på samme måde som hidtil. Blot skifter du indholdet i tabellens data ud med en ny tabel....OH MY!!!

Her er et meget simpel eksempel:


<table border="1" bordercolor="red">

<tr>
<td>
Tabel 1 celle 1</td>
</tr>

<tr>
<td>

<table border="1" bordercolor="green">
<tr>
<td>
Tabel 2 celle 1</td>
<td>
Tabel 2 celle 2</td>
</tr>
</table>

</td>
</tr>

<tr>
<td>
Tabel 1 celle 3</td>
</tr>

</table>



Ser således ud i browseren:



Det ser ud til at være uhyre svært, men hvis du tager dig tiden til at gennemgå koderne, vil du se at det ikke er spor mystisk overhoved.

Næste lektion handler også om tabeller, ENDNU MERE TABEL VÆRK! OH MYYY!!, her gennemgås colspan og rowspan.

ENDNU MERE TABEL VÆRK! OH MYYY!! >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top