HTML <table> etiket

Definition og brug

<table> Etikett definerer HTML-tabellen.

En HTML-tabel består af en <table> et element og en eller flere <tr>og<th> og <td> Elementbestående af:

HTML-tabel kan også indeholde følgende elementer:

Se også:

HTML-tutorial:HTML tabel

HTML DOM referencehåndbog:Table-objekt

CSS-tutorial:Indstil tabelstilen

Eksempel

Eksempel 1

En simpel HTML-tabel, der indeholder to kolonner og to rækker:

<table>
  <tr>
    <th>Måned</th>
    <th>Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
</table>

Prøv det selv

Eksempel 2

Hvordan tilføjer man sammenfaldende kanter til tabel (brug af CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Måned</th>
    <th>Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Prøv det selv

Eksempel 3

Hvordan justerer man tabel til højre (brug af CSS):

<table style="float:right">
  <tr>
    <th>Måned</th>
    <th>Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>

Prøv det selv

Eksempel 4

Hvordan centrerer man tabel (brug af CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
  <tr>
    <th>Måned</th>
    <th>Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>

Prøv det selv

Eksempel 5

Hvordan tilføjer man baggrundsfarve til tabel (brug af CSS):

<table style="background-color:#00FF00">
  <tr>
    <th>Måned</th>
    <th>Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>

Prøv det selv

Eksempel 6

Hvordan tilføjer man indre margin til tabel (brug af CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Måned</th>
    <th>Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Prøv det selv

Eksempel 7

Hvordan indstiller man tabelbredde (brug af CSS):

<table style="width:400px">
  <tr>
    <th>Måned</th>
    <th>Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>

Prøv det selv

Eksempel 8

Hvordan opretter man tabeloverskrifter:

<table>
  <tr>
    <th Navn</th>
    <th>E-post</th>
    <th>Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Prøv det selv

Eksempel 9

Hvordan opretter man en tabel med titel:

<table>
  <caption>Månedlige sparepenge</caption>
  <tr>
    <th>Måned</th>
    <th>Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>

Prøv det selv

Eksempel 10

Hvordan definerer man en tabelcelle, der strækker sig over flere rækker eller kolonner:

<table>
  <tr>
    <th Navn</th>
    <th>E-post</th>
    <th colspan="2">Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Prøv det selv

Globale egenskaber

<table> Tagget understøtter også Globale egenskaber i HTML.

event egenskaber

<table> Tagget understøtter også Event egenskaber i HTML.

Standard CSS-indstillinger

De fleste browsere vil bruge følgende standardværdier til visning <table> Element:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

Prøv det selv

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support