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

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

Lektion 07

Endnu mere tabel værk! OH MYYY!!.

Indhold:

  • Indledning.
  • Colspan.
  • Rowspan.


Indledning.
Tabeller er som du ved opdelt i kolonner (vertikal) og rækker (horisontalt). Se eksempel:



Ikke så meget mystik i dette!


Colspan og rowspan.
Indlednings vis kan jeg nævne, at rowspan og colspan er attributter som placeres i forbindelse med <td>-tagen. Colspan betyder så meget som "spænde over kolonner" og rowspan betyder "spænde over rækker".
Colspan.
Når du anvender colspan får du mulighed for at en celle kan spænde over flere kolonner!! Det lyder måske lidt underlig i starten, men se på dette eksempel: Vi laver en tabel med en række indeholdende tre celler. I række to ønsker vi kun en celle, hvor teksten er centreret. Til dette anvender vi følgende html kode:


<table border="1">

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

<tr>
<td align="center">celle 4</td>
</tr>

</table>


Dette vil i din browser se ud som følgende:



Hvis nu vi anvender colspan i forbindelse med celle 4, vil denne celle blive spændt ud over de tre kolonner. Vi ændrer koden ved at tilføje colspan og antal kolonner. Koden ser herefter ud som følgende:


<table border="1">

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

<tr>
<td align="center" colspan="3">celle 4</td>
</tr>

</table>


Vi har sat colspan til at være tre, da celle 4 sammenlagt skal spænde over tre kolonner.

Ser sådan ud i din browser:



Lidt pænere, ikke også!
Rowspan.
Det samme gør sig gældende ved rowspan, her er der ikke kolonner vi spænder over, men rækkerne. Prøv at se på efterfølgende eksempel.


<table border="1">

<tr>
<td rowspan="3">celle 1</td>
<td>celle 2</td>
<td>celle 3</td>
</tr>

<tr>
<td>celle 4</td>
<td>celle 5</td>
</tr>

<tr>
<td>celle 6</td>
<td>celle 7</td>
</tr>

</table>




Det var det! Ikke mere om tabeller, rowspan og colspan. Prøv selv at lave nogle tabeller.
Næste lektion handler links.

LINKS! >>

 

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