W3docs
fr
Se connecter

Propriété CSS table-layout

Use the table-layout CSS property which is used to lay out table cells, rows and columns. Learn about property values and see examples.

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 initialeauto
S'applique àÉléments de tableau et de tableau en ligne.
HéritéeNon.
AnimableNon.
VersionCSS2
Syntaxe DOMobject.style.tableLayout = "fixed";

Syntaxe

Syntaxe CSS de table-layout

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

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

Exemple de code CSS pour table-layout

<!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>
Essayez vous-même »

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

<!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>
Essayez vous-même »

Valeurs

ValeurDescriptionTester
autoUtilise 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 »
fixedUtilise 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 »
initialDéfinit la propriété sur sa valeur par défaut.Tester »
inheritHérite la propriété de son élément parent.

Pratique

Pratique

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