Propriété CSS table-layout

❮ Précédent Suivant ❯

La propriété table-layout spécifie les algorithmes utilisés pour disposer les cellules, lignes et colonnes d'un tableau.

La propriété table-layout spécifie deux algorithmes pour disposer des tableaux: fixed et automatic.

Quand on spécifie la disposition du tableau "automatic", la largeur du tableau est définie par la largeur de ses colonnes.

Quand on spécifie la disposition du tableau "fixed", la disposition du tableau utilise la largeur du tableau, quelque largeur spécifiée des colonnes et les valeurs des bordures et d'espacement des cellules.

Valeur initiale	auto
Appliquée	Éléments du tableau et du tableau en ligne(inline).
Héritée	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.tableLayout = "fixed";

Syntaxe

table-layout: auto | fixed | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      th, td {
      border: 2px solid #666;
      }
      table.t1 {
      table-layout: fixed;
      width: 40%;  
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété table-layout </h2>
    <h3>Table-layout: fixed; width: 20%</h3>
    <table class="t1">
      <tr>
        <th>Pays</th>
        <th>Capitale</th>
        <th>Ville</th>
      </tr>
      <tr>
        <td>Russie</td>
        <td>Moscou</td>
        <td>Saint Petersbourg</td>
      </tr>
      <tr>
        <td>Anglais</td>
        <td>Londre</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>Les Pays-Bas</td>
        <td>Amsterdam</td>
        <td>Haage</td>
      </tr>
    </table>
  </body>
</html>

Essayez-vous-même!

Un exemple dans lequel les algorithmes "auto" et "fixed" sont utilisés:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      th,td {
      border: 2px solid #666;
      }
      table.t1 {
      table-layout: fixed;
      width: 250px;  
      }
      table.t2 {
      table-layout: auto;
      width: 100%;  
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété table-layout</h2>
    <h3>Table-layout: fixed; width: 160px</h3>
    <table class="t1">
      <tr>
        <th>Pays</th>
        <th>Capitale</th>
        <th>Ville</th>
      </tr>
      <tr>
        <td>Russie</td>
        <td>Moscou</td>
        <td>Saint Petersbourg</td>
      </tr>
      <tr>
        <td>Anglais</td>
        <td>Londre</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>Les Pays-Bas</td>
        <td>Amsterdam</td>
        <td>Haage</td>
      </tr>
    </table>
    <h3>Table-layout: auto; width: 100%</h3>
    <table class="t2">
      <tr>
        <th>Pays</th>
        <th>Capitale</th>
        <th>Ville</th>
      </tr>
      <tr>
        <td>Russie</td>
        <td>Moscou</td>
        <td>Saint Petersbourg</td>
      </tr>
      <tr>
        <td>Anglais</td>
        <td>Londre</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>Les Pays-Bas</td>
        <td>Amsterdam</td>
        <td>Hague</td>
      </tr>
    </table>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Utilise un algorithme deautomatique quand le tableau et ses cellules dépendent de leur contenu. C'est la valeur initiale de cette propriété.
fixed	Utilise un algorithme fixe. Les largeurs du tableau, colonnes et la première ligne des cellules définissent le tableau et les largeurs des colonnes.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.