HTML Tabeller

Du kan oprette tabeller ved hjælp af HTML.

Eksempel

Table
Dette eksempel viser, hvordan man opretter tabeller i et HTML-dokument.
Tabelkanter
Dette eksempel viser forskellige typer af tabelkanter.

(Du kan finde flere eksempler nederst på siden)

Table

En tabel defineres ved <table>-tagget. Hver tabel har flere rækker (defineret ved <tr>-tagget), og hver række deles op i flere celler (defineret ved <td>-tagget). Bokstaven td refererer til tabellens data (table data), dvs. indholdet af datacellen. Datacellen kan indeholde tekst, billeder, lister, afsnit, formulær, lodrette linjer, tabeller osv.

<table border="1">
<tr>
<td>række 1, celle 1</td>
<td>række 1, celle 2</td>
</tr>
<tr>
<td>række 2, celle 1</td>
<td>række 2, celle 2</td>
</tr>
</table>

Vises i browseren som følger:

række 1, celle 1 række 1, celle 2
række 2, celle 1 række 2, celle 2

Tabeller og kantegenskab

Hvis du ikke definerer kantegenskaben, vises der ingen kant på tabellen. Dette er nogle gange nyttigt, men de fleste af tiden ønsker vi at vise kanten.

Brug kantegenskaben til at vise en tabel med kant.

<table border="1">
<tr>
<td>Række 1, celle 1</td>
<td>Række 1, celle 2</td>
</tr>
</table>

Tabellens rubrikker

Tabellens rubrikker defineres ved <th>-tagget.

De fleste browsere viser rubrikker som fedd, centreret tekst:

<table border="1">
<tr>
<th>Overskrift</th>
<th>En anden overskrift</th>
</tr>
<tr>
<td>række 1, celle 1</td>
<td>række 1, celle 2</td>
</tr>
<tr>
<td>række 2, celle 1</td>
<td>række 2, celle 2</td>
</tr>
</table>

Vises i browseren som følger:

Overskrift En anden overskrift
række 1, celle 1 række 1, celle 2
række 2, celle 1 række 2, celle 2

Tomrums i tabellen

I nogle browsere vises tabellenheder uden indhold ikke godt. Hvis en celle er tom (uden indhold), kan browseren muligvis ikke vise kantlinjen for denne celle.

<table border="1">
<tr>
<td>række 1, celle 1</td>
<td>række 1, celle 2</td>
</tr>
<tr>
<td></td>
<td>række 2, celle 2</td>
</tr>
</table>

Browseren kan vise det sådan:

Tomrums i tabellen

Bemærk:Den tomme cellekants ramme vises ikke. For at undgå dette kan du tilføje en tom mellemrum som pladsHOLDER for at vise rammen.

<table border="1">
<tr>
<td>række 1, celle 1</td>
<td>række 1, celle 2</td>
</tr>
<tr>
<td> </td>
<td>række 2, celle 2</td>
</tr>
</table>

Vises i browseren som følger:

række 1, celle 1 række 1, celle 2
　 række 2, celle 2

Flere eksempler

Tabeller uden kant
This example demonstrates a table without borders.
Table header (Heading) in the table
This example demonstrates how to display the table header.
Empty cells
This example shows how to handle empty cells with " ".
Table with title
This example demonstrates a table with a title (caption).
Table cells spanning rows or columns
This example demonstrates how to define table cells spanning rows or columns.
Table tags within
This example demonstrates how to display elements within different elements.
Cell margin (Cell padding)
This example demonstrates how to use Cell padding to create whitespace between cell content and its border.
Cell spacing (Cell spacing)
This example demonstrates how to use Cell spacing to increase the distance between cells.
Add background color or background image to the table
This example demonstrates how to add background to the table.
Add background color or background image to table cells
This example demonstrates how to add background to one or more table cells.
Align content in table cells
This example demonstrates how to use the "align" attribute to arrange cell content to create an attractive table.
Frame (frame) attribute
This example demonstrates how to use the "frame" attribute to control the border around the table.

Table tag

Table Description
<table> Define the table
<caption> Define the table title.
<th> Define the header of the table.
<tr> Define the row of the table.
<td> Define the table cell.
<thead> Define the header of the table.
<tbody> Define the body of the table.
<tfoot> Define the footer of the table.
<col> Define attributes used for table columns.
<colgroup> Define the group of table columns.