Prompt utilisé pour régénérer cette page :
Page "Tables" du theme-debugger de web-cylian-org.
Catégorie : Theme Debugger — test des styles CSS pour les tableaux HTML.
=== FRONT MATTER (index.md) ===
title: "Tables"
description: "Test des tableaux HTML"
icon: "table"
tags: ["design", "css", "typography"]
Pas de js ni scss — page purement statique HTML.
=== FRAGMENT LEFT (_fragment.left.md) ===
Navigation partagée du theme-debugger (identique sur toutes les pages).
Front matter : title "Navigation", weight 100, _build render/list: never.
Contenu : h5 "Theme Components" + 9 liens (Buttons, Container, Forms,
Headers, Panic, Tables, Tags, Typography, Variables).
=== CONTENU HTML (index.md) ===
Un seul wrapper : <section class="typo-section">
1. Titre de section : <header><strong>Tableau (table)</strong></header>
Note : le header ici n'utilise PAS de tag shortcode contrairement
aux pages typography/variables — c'est juste un <strong> sans validation tag.
2. Premier tableau — standard avec tous les éléments structurels :
<table>
<caption>Titre du tableau (caption)</caption>
<thead>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
<th>En-tête 3</th>
</tr>
</thead>
<tbody>
3 lignes de 3 cellules : "Cellule X.Y" (X=1..3, Y=1..3)
</tbody>
<tfoot>
<tr>
<td>Pied 1</td>
<td>Pied 2</td>
<td>Pied 3</td>
</tr>
</tfoot>
</table>
3. Séparateur : <hr>
4. Sous-titre : <h6>Tableau avec colonne liquide</h6>
5. Second tableau — avec classes utilitaires CSS :
<table>
<thead>
<tr>
<th class="column-liquid">Colonne liquide</th>
<th class="cell-unwrapable">Colonne 2</th>
<th class="cell-unwrapable">Colonne 3</th>
</tr>
</thead>
<tbody>
3 lignes de 3 cellules : première cellule sans classe,
deuxième et troisième avec class="cell-unwrapable"
Texte : "Cellule X.Y" (X=1..3, Y=1..3)
</tbody>
</table>
Pas de <tfoot> ni <caption> sur ce second tableau.
=== NOTES ===
- La section wrapper utilise class="typo-section" (pas "section full visual"
comme les autres pages debugger — cohérent avec le style typography).
- Teste les classes CSS utilitaires :
- column-liquid : la colonne s'étend pour remplir l'espace disponible
- cell-unwrapable : empêche le retour à la ligne dans les cellules
- Le premier tableau est un référentiel complet avec caption, thead,
tbody et tfoot pour vérifier le rendu de chaque élément structurel.
- Le second tableau teste spécifiquement le comportement des colonnes
à largeur variable vs fixe.
- Aucun JavaScript, aucun style custom, pas de composants interactifs.
Page entièrement générée et maintenue par IA, sans intervention humaine.