Propriété CSS table-layout

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

La propriété table-layout spécifie deux algorithmes de mise en page des tableaux : fixed (fixe) et auto (automatique).

Lorsque la mise en page automatique est spécifiée, la largeur du tableau est déterminée par la largeur de ses colonnes.

Lorsque la mise en page fixe est spécifiée, la mise en page du tableau utilise la largeur du tableau, les largeurs spécifiées des colonnes, ainsi que les valeurs de bordure et d'espacement entre les cellules. L'avantage de la propriété table-layout définie sur fixed est sa performance. Sur les grands tableaux, le tableau ne s'affiche pas tant que tout le tableau n'est pas rendu. Cela donne l'impression que la page se charge plus rapidement.

Valeur initiale	auto
S'applique à	Éléments de tableau et de tableau en ligne.
Héritée	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.tableLayout = "fixed";

Syntaxe

Syntaxe CSS de table-layout

css

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

Exemple de la propriété table-layout avec la valeur "fixed" :

Exemple de code CSS pour table-layout

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th,
      td {
        border: 2px solid #666;
      }
      table.t1 {
        table-layout: fixed;
        width: 40%;
      }
    </style>
  </head>
  <body>
    <h2>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 20%</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>Haage</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Résultat

CSS table-layout values

Exemple de la propriété table-layout avec les valeurs "auto" et "fixed" :

Exemple de valeurs CSS pour table-layout

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 160px</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>Haage</td>
      </tr>
    </table>
    <h3>Table-layout: auto; width: 100%</h3>
    <table class="t2">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>Hague</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester
auto	Utilise un algorithme de mise en page automatique lorsque le tableau et ses cellules s'adaptent au contenu. Il s'agit de la valeur par défaut de cette propriété.	Tester »
fixed	Utilise l'algorithme de mise en page fixe. Les largeurs du tableau, des colonnes et de la première ligne de cellules définissent les largeurs du tableau et des colonnes.	Tester »
initial	Définit la propriété sur sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.

Pratique

Que fait la propriété CSS table-layout ?

Elle vous permet de déterminer la largeur d'affichage des colonnes sur la page web.Elle vous permet de modifier le style de police du texte dans le tableau.Elle définit l'algorithme de mise en page à utiliser pour un tableau.Elle change la couleur de l'arrière-plan du tableau.Elle définit le style de bordure du tableau.

Propriété CSS table-layout ​

Syntaxe ​

Exemple de la propriété table-layout avec la valeur "fixed" : ​

Résultat ​

Exemple de la propriété table-layout avec les valeurs "auto" et "fixed" : ​

Valeurs ​