From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/table-layout/index.html | 107 ------------------------------- files/fr/web/css/table-layout/index.md | 107 +++++++++++++++++++++++++++++++ 2 files changed, 107 insertions(+), 107 deletions(-) delete mode 100644 files/fr/web/css/table-layout/index.html create mode 100644 files/fr/web/css/table-layout/index.md (limited to 'files/fr/web/css/table-layout') diff --git a/files/fr/web/css/table-layout/index.html b/files/fr/web/css/table-layout/index.html deleted file mode 100644 index c61d102988..0000000000 --- a/files/fr/web/css/table-layout/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: table-layout -slug: Web/CSS/table-layout -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/table-layout ---- -
{{CSSRef}}
- -

La propriété table-layout définit l'algorithme utilisé pour disposer les cellules, lignes et colonnes d'un tableau.

- -
{{EmbedInteractiveExample("pages/css/table-layout.html")}}
- -

Syntaxe

- -
/* Valeur utilisant un mot-clé */
-table-layout: auto;
-table-layout: fixed;
-
-/* Valeurs globales */
-table-layout: inherit;
-table-layout: initial;
-table-layout: unset;
-
- -

Valeurs

- -
-
{{cssxref("auto")}}
-
Un algorithme automatique, utilisé communément par la plupart des navigateurs, est utilisé pour gérer la disposition du tableau. La largeur du tableau et de ses cellules dépendent de leur contenu.
-
fixed
-
La largeur du tableau et celles des colonnes sont définies grâce aux largeurs des éléments table et col ou grâce à la largeur (explicite) de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes.
-
- Avec cette méthode « fixée », tout le tableau peut être rendu dès que la première ligne a été téléchargée et analysée. Cela permet d'accélérer le temps de rendu par rapport à la valeur auto. En revanche, le contenu des lignes (en dehors de la première), peut ne pas rentrer dans les colonnes avec la largeur calculée. Les cellules dont le contenu est trop large utiliseront la propriété {{cssxref("overflow")}} pour déterminer comment gérer le dépassement.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Cet exemple utilise table-layout: fixed et une largeur donnée (avec la propriété width) afin que le tableau ne s'agrandisse pas avec son contenu. Ainsi, on peut voir l'effet de la propriété {{cssxref("text-overflow")}} et l'application d'une ellipse pour les mots trop longs pour le tableau.

- -

HTML

- -
<table class="exemple">
-  <tr>
-    <td width="7em">Jean</td>
-    <td width="7em">Biche</td>
-  </tr>
-  <tr>
-    <td>Jean-Roger-Michel</td>
-    <td>du Domaine de la Biche</td>
-  </tr>
-</table>
- -

CSS

- -
.exemple {
-  table-layout: fixed;
-  width: 120px;
-  border: 1px solid red;
-}
-
-tr, td {
-  border: solid;
-}
-
-td {
-  border: 1px solid blue;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.table-layout")}}

diff --git a/files/fr/web/css/table-layout/index.md b/files/fr/web/css/table-layout/index.md new file mode 100644 index 0000000000..c61d102988 --- /dev/null +++ b/files/fr/web/css/table-layout/index.md @@ -0,0 +1,107 @@ +--- +title: table-layout +slug: Web/CSS/table-layout +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/table-layout +--- +
{{CSSRef}}
+ +

La propriété table-layout définit l'algorithme utilisé pour disposer les cellules, lignes et colonnes d'un tableau.

+ +
{{EmbedInteractiveExample("pages/css/table-layout.html")}}
+ +

Syntaxe

+ +
/* Valeur utilisant un mot-clé */
+table-layout: auto;
+table-layout: fixed;
+
+/* Valeurs globales */
+table-layout: inherit;
+table-layout: initial;
+table-layout: unset;
+
+ +

Valeurs

+ +
+
{{cssxref("auto")}}
+
Un algorithme automatique, utilisé communément par la plupart des navigateurs, est utilisé pour gérer la disposition du tableau. La largeur du tableau et de ses cellules dépendent de leur contenu.
+
fixed
+
La largeur du tableau et celles des colonnes sont définies grâce aux largeurs des éléments table et col ou grâce à la largeur (explicite) de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes.
+
+ Avec cette méthode « fixée », tout le tableau peut être rendu dès que la première ligne a été téléchargée et analysée. Cela permet d'accélérer le temps de rendu par rapport à la valeur auto. En revanche, le contenu des lignes (en dehors de la première), peut ne pas rentrer dans les colonnes avec la largeur calculée. Les cellules dont le contenu est trop large utiliseront la propriété {{cssxref("overflow")}} pour déterminer comment gérer le dépassement.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Cet exemple utilise table-layout: fixed et une largeur donnée (avec la propriété width) afin que le tableau ne s'agrandisse pas avec son contenu. Ainsi, on peut voir l'effet de la propriété {{cssxref("text-overflow")}} et l'application d'une ellipse pour les mots trop longs pour le tableau.

+ +

HTML

+ +
<table class="exemple">
+  <tr>
+    <td width="7em">Jean</td>
+    <td width="7em">Biche</td>
+  </tr>
+  <tr>
+    <td>Jean-Roger-Michel</td>
+    <td>du Domaine de la Biche</td>
+  </tr>
+</table>
+ +

CSS

+ +
.exemple {
+  table-layout: fixed;
+  width: 120px;
+  border: 1px solid red;
+}
+
+tr, td {
+  border: solid;
+}
+
+td {
+  border: 1px solid blue;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.table-layout")}}

-- cgit v1.2.3-54-g00ecf