HTML <table> tag

Definitie en gebruik

<table> De tag definieert de HTML-tabel.

Een HTML-tabel bestaat uit een <table> elementen en een of meerdere <tr>en<th> en <td> Elementen bestaan uit:

HTML-tabellen kunnen ook de volgende elementen bevatten:

Zie ook:

HTML-tutorial:HTML table

HTML DOM referentiehandleiding:Table-object

CSS-tutorial:Tabelstijlen instellen

Voorbeeld

Voorbeeld 1

Een eenvoudige HTML-tabel met twee kolommen en twee rijen:

<table>
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Try it yourself

Voorbeeld 2

Hoe je samenvallende randen aan een tabel toevoegt (gebruik CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
{}
</style>
</head>
<body>
<table>
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Try it yourself

Voorbeeld 3

Hoe je een tabel rechts uitlijnt (gebruik CSS):

<table style="float:right">
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

Voorbeeld 4

Hoe je een tabel centreren (gebruik 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>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

Voorbeeld 5

Hoe je een achtergrondkleur aan een tabel toevoegt (gebruik CSS):

<table style="background-color:#00FF00">
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

Voorbeeld 6

Hoe je binnenste marges aan een tabel toevoegt (gebruik CSS):

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
{}
th, td {
  padding: 10px;
{}
</style>
</head>
<body>
<table>
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Try it yourself

Voorbeeld 7

Hoe je de breedte van een tabel instelt (gebruik CSS):

<table style="width:400px">
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

Voorbeeld 8

Hoe je kopregels maakt:

<table>
  <tr>
    <th>Naam</th>
    <th>E-mail</th>
    <th>Telefoon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Try it yourself

Voorbeeld 9

Hoe je een tabel met kopregels maakt:

<table>
  <caption>Maandelijkse spaargeld</caption>
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

Voorbeeld 10

Hoe je een tabelcel overschrijft over meerdere rijen of kolommen definieert:

<table>
  <tr>
    <th>Naam</th>
    <th>E-mail</th>
    <th colspan="2">Telefoon</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>

Try it yourself

Global attributes

<table> The tag also supports Global attributes in HTML.

event attributes

<table> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <table> Element:

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

Try it yourself

Browser support

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