Lister og tabeller

HTML5 har to typer lister: den ordnede <ol>og den uordnede <ul>. Forskellen mellem dem er, at den ordnede sætter dem i nummerisk orden, hvor den uordende sætter dem på punktform.

Ordnede lister


<ol>
	<li>Første punkt</li>
	<li>Andet punkt</li>
	<li>Tredie punkt</li>
	...
</ol>
Resulat:
  1. Første punkt
  2. Andet punkt
  3. Tredie punkt
  4. ...

Bogstaver og romertal

Man kan indsætte andet end tal ved at anvende attributten type="" f.eks:


<ol type="a">
	<li>Første punkt</li>
	<li>Andet punkt</li>
	<li>Tredie punkt</li>
	...
</ol>
Resulat:
  1. Første punkt
  2. Andet punkt
  3. Tredie punkt
  4. ...

Mulighederne er:

type="a" type="A" type="i" type="I"
  1. Første punkt
  2. Andet punkt
  3. Tredie punkt
  4. Fjerde punkt
  5. Femte punkt
  1. Første punkt
  2. Andet punkt
  3. Tredie punkt
  4. Fjerde punkt
  5. Femte punkt
  1. Første punkt
  2. Andet punkt
  3. Tredie punkt
  4. Fjerde punkt
  5. Femte punkt
  1. Første punkt
  2. Andet punkt
  3. Tredie punkt
  4. Fjerde punkt
  5. Femte punkt

Flere indstillinger

Det kan også lade sig gøre at lave lister, hvor man tæller ned eller hvor man starter med en anden værdi.

Start med en anden værdi

For at starte med en anden værdi indsætter man attributten start="".


<ol start="5">
	<li>Første punkt</li>
	<li>Andet punkt</li>
	<li>Tredie punkt</li>
	...
</ol>
Resulat:
  1. Første punkt
  2. Andet punkt
  3. Tredie punkt
  4. ...
Tæl ned

For at tælle den modsatte vej indsættes attributten reversed


<ol reversed>
	<li>Første punkt</li>
	<li>Andet punkt</li>
	<li>Tredie punkt</li>
	...
</ol>
Resulat:
  1. Første punkt
  2. Andet punkt
  3. Tredie punkt
  4. ...

Uordnede lister


<ul>
	<li>Første punkt</li>
	<li>Andet punkt</li>
	<li>Tredie punkt</li>
	...
</ul>
Resulat:
  • Første punkt
  • Andet punkt
  • Tredie punkt
  • ...

Lister i flere niveauer

For at lave lister i flere niveauer indsætter man blot en liste i en liste. Herunder har har jeg lavet en nummereret liste, hvor det første punkt skal have underpunkter. Det gøres ved at indsætte en liste i den <li> der skal have underpunkterne.

Læg mærke til at man kan ændre typen for hver liste, også selvom den er indlejret i andre lister.


<ol class="">
	<li>Første punkt
		<ol type="a">
			<li>Første punkt</li>
			<li>Andet punkt</li>
			<li>Tredie punkt</li>
		</ol>
	</li>
	<li>Andet punkt</li>
	<li>Tredie punkt</li>
</ol>
Resulat:
  1. Første punkt
    1. Første punkt
    2. Andet punkt
    3. Tredie punkt
  2. Andet punkt
  3. Tredie punkt

CSS af lister

https://www.w3schools.com/css/css_list.asp

Tabeller

Tabeller vil blive gennemgået ud fra en praktisk anvendelse. Det betyder at du skal klikke på linket under koden for at se resulatet af den.

Vi vil i første omgang anvende nedestående kode og så CSS'e den løbende.


<table class="">
	<thead>
		<tr>
			<th>Tabelhovede  1</th>
			<th>Tabelhovede  2</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Tabelfod1</td>
			<td>Tabelfod2</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Indhold A1</td>
			<td>Indhold B1</td>
		</tr>
		<tr>
			<td>Indhold A2</td>
			<td>Indhold B2</td>
		</tr>
		<tr>
			<td>Indhold A3</td>
			<td>Indhold B3</td>
		</tr>
	</tbody>
</table>

Eksempel uden CSS:

html_table_00.html

Rammer og kanter

For at få rammer på skal vi indsætte følgende i vores CSS-fil

	
table, th, td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
}
	

Det koden fortæller er at:

  • Der skal være en ramme omkring hele tabellen (table)
  • Der skal være en ramme om alle th-elementer
  • Der skal være en ramme om alle td-elementer

Derudover fortæller border-collapse, at det skal være en enkelt ramme. Oprindeligt er rammerne på en hjemmeside med dobbelte streger.

Eksempel CSS:

html_table_01.html

Fletning af celler