Balise <table> HTML

Définition et utilisation

<table> Les balises définissent les tableaux HTML.

Un tableau HTML est composé d'un <table> un élément et un ou plusieurs <tr>、<th> et <td> Composants :

Un tableau HTML peut également inclure les éléments suivants :

Veuillez également consulter :

Tutoriel HTML :Tableau HTML

Manuel de référence HTML DOM :Objet Tableau

Tutoriel CSS :Définir le style du tableau

Exemple

Exemple 1

Un tableau HTML simple, contenant deux colonnes et deux lignes :

<table>
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
</table>

Essayer vous-même

Exemple 2

Comment ajouter des bordures pliées au tableau (en utilisant CSS) :

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Essayer vous-même

Exemple 3

Comment aligner un tableau à droite (en utilisant CSS) :

<table style="float:right">
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
</table>

Essayer vous-même

Exemple 4

Comment centrer un tableau (en utilisant 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>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
</table>

Essayer vous-même

Exemple 5

Comment ajouter une couleur de fond au tableau (en utilisant CSS) :

<table style="background-color:#00FF00">
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
</table>

Essayer vous-même

Exemple 6

Comment ajouter un marge interne au tableau (en utilisant CSS) :

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
</table>
</body>
</html>

Essayer vous-même

Exemple 7

Comment définir la largeur d'un tableau (en utilisant CSS) :

<table style="width:400px">
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
</table>

Essayer vous-même

Exemple 8

Comment créer un en-tête de tableau :

<table>
  <tr>
    <th>Nom</th>
    <th>Courriel</th>
    <th>Téléphone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Essayer vous-même

Exemple 9

Comment créer un tableau avec des en-têtes :

<table>
  <caption>Épargne mensuelle</caption>
  <tr>
    <th>Mois</th>
    <th>Épargne</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Février</td>
    <td>￥4500</td>
  </tr>
</table>

Essayer vous-même

Exemple 10

Comment définir une cellule de tableau spanning plusieurs lignes ou colonnes :

<table>
  <tr>
    <th>Nom</th>
    <th>Courriel</th>
    <th colspan="2">Téléphone</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>

Essayer vous-même

Attributs globaux

<table> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<table> Les balises prennent également en charge Attributs d'événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <table> Élément :

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

Essayer vous-même

Compatibilité des navigateurs

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