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_01.html

Eksempel med rammer og kant:

For at få rammer på skal vi anvende følgende

	
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.