Chargement...

Tailles de tableau HTML

Les tableaux peuvent s’étirer dans une colonne de contenu ou rester compacts comme une carte de prix. Après les bordures qui ont tracé la grille, cette leçon dimensionne la boîte : utilisez CSS (width, max-width, padding, largeurs de colonne optionnelles) pour que le tableau s’adapte aux données et à l’écran. La présentation reste en CSS ; table / tr / th / td portent encore le sens. Si les bordures ont rendu la grille visible, la taille la rend confortable.

Ce que « taille » signifie pour un tableau

La taille n’est pas un seul chiffre. Tout le tableau a une largeur relative à son parent. Les cellules ont besoin de padding pour que le texte respire. Les colonnes peuvent partager l’espace également ou favoriser une colonne d’étiquettes plus large. Sur téléphone, un tableau qui insiste sur 1200px force un défilement horizontal gênant même avec seulement deux colonnes courtes. Des recettes flexibles — souvent width: 100% avec un max-width raisonnable — gardent les grilles simples lisibles sans prétendre que CSS remplace une structure th/td honnête.

Réponse directe

Définissez width sur la table (par ex. 100%) et plafonnez éventuellement avec max-width (par ex. 480px ou 640px). Indiquez la largeur de colonne sur th/td quand une colonne doit prendre plus de place. Préférez pourcentages et max-width aux largeurs fixes énormes en pixels qui débordent sur mobile. Gardez border-collapse et le padding de la leçon bordures pour que taille et lignes coopèrent. Limitez les règles avec une class pour qu’une démo ne redimensionne pas tous les tableaux de la page.

Largeur flexible avec indice de colonne

Un motif débutant courant : le tableau remplit son parent jusqu’à un maximum, les bordures restent collapsed, et la première colonne obtient une plus grande part pour les libellés.

Flexible table width

html
HTML Code 
<style>
table.prices { width: 100%; max-width: 480px; border-collapse: collapse; }
table.prices th, table.prices td { padding: 8px; border: 1px solid #555; }
table.prices th:first-child, table.prices td:first-child { width: 60%; }
</style>
<table class="prices">
<tr><th>Plan</th><th>Price</th></tr>
<tr><td>Starter</td><td>0</td></tr>
<tr><td>Pro</td><td>9</td></tr>
</table>

Lecture de l’exemple flexible

  • width: 100% laisse le tableau utiliser la largeur de contenu disponible
  • max-width: 480px l’empêche de devenir une bande géante sur moniteur large
  • border-collapse: collapse évite que taille et bordures se battent
  • padding: 8px donne à chaque cellule un espace intérieur lisible
  • :first-child { width: 60%; } indique que la colonne du plan doit être plus large que celle du prix
  • Le scope par class (.prices) évite de redimensionner par accident chaque tableau

Tableau compact avec max-width

Parfois vous voulez une petite carte de comparaison qui ne s’étire jamais en full-bleed. Un max-width plus bas (avec encore width: 100% dans ce plafond) garde la grille nette sur bureau et mobile.

Compact max-width table

html
HTML Code 
<style>
table.compact {
width: 100%;
max-width: 320px;
border-collapse: collapse;
}
table.compact th, table.compact td {
padding: 6px 10px;
border: 1px solid #444;
text-align: left;
}
</style>
<table class="compact">
<tr><th>Item</th><th>Stock</th></tr>
<tr><td>USB cable</td><td>14</td></tr>
<tr><td>Notebook</td><td>3</td></tr>
</table>

Lecture de l’exemple compact

  • Même idée flexible, max-width plus serré pour une empreinte type carte
  • Le padding horizontal (6px 10px) peut différer du vertical pour le confort
  • text-align: left est une présentation optionnelle — utile quand nombres et mots partagent une petite grille
  • Toujours pas d’imbrication de tableaux de layout ; vous dimensionnez seulement un vrai tableau de données
  • Redimensionnez le navigateur : le tableau doit rétrécir avec la colonne jusqu’aux limites du contenu, pas forcer une énorme barre de défilement par défaut

Pixels fixes versus habitudes flexibles

Des largeurs fixes comme width: 1200px peuvent paraître correctes sur grand écran et douloureuses sur téléphone. S’il faut un minimum pour l’impression ou un tableau de bord dense, partez d’un width fluide plus max-width, ou prévoyez plus tard une stratégie responsive. Pour les tableaux débutants de ce cours, la taille flexible est la bonne habitude par défaut. Les pourcentages width de colonne sont des indices — le navigateur peut ajuster si le contenu est extrêmement long ou insécable, donc gardez le texte de cellule raisonnablement court en apprenant. Quand une colonne refuse de rétrécir, vérifiez les longues URL ou les mots sans espaces avant de blâmer max-width.

Padding, colonnes et collapse ensemble

Le travail de taille s’assoit à côté de la leçon bordures. Sans padding, les cellules denses semblent à l’étroit même avec une largeur externe parfaite. Sans collapse, les essais de largeur peuvent paraître plus épais ou irréguliers car des bordures séparées consomment de l’espace. Les indices optionnels de colonne (width sur les cellules :first-child, ou sur un th précis) guident le navigateur quand les libellés ont besoin de plus de place que les valeurs. N’utilisez pas le CSS de taille comme excuse pour abandonner les en-têtes th ou reconstruire la page en tableaux de layout imbriqués — ce conflit était déjà tranché dans la session Tables.

Pratiquez dans votre éditeur

  1. Donnez à votre tableau d’exercice width: 100% et un max-width (essayez 480px).
  2. Ajoutez du padding à th/td (réutilisez les styles de bordure si vous les avez encore).
  3. Redimensionnez le navigateur — confirmez qu’un tableau simple à deux colonnes ne force pas un défilement horizontal interminable.
  4. Optionnellement élargissez la première colonne avec :first-child ou une class.
  5. Dupliquez le tableau avec un max-width plus serré comme 320px et comparez l’empreinte.
  6. Mettez temporairement width: 1200px, notez la douleur mobile, puis retirez-le.
  7. Basculez border-collapse pendant que les largeurs sont définies et observez le ressenti de la taille externe.
  8. Écrivez une phrase sous le tableau indiquant le max-width choisi et pourquoi.

Erreurs faciles

  • Tableaux fixes width: 1200px qui cassent les petits écrans
  • Pas de padding, cellules denses difficiles à lire
  • Faire se battre bordures et largeurs sans border-collapse
  • table { width: ... } global qui redimensionne chaque démo de la page
  • S’attendre à ce que les indices width de colonne écrasent des chaînes très longues insécables
  • Utiliser la taille de tableau pour refaire de fausses colonnes de layout pleine page
  • Oublier max-width pour que width: 100% seul étire un petit tableau de trois cellules sur un ultrawide

Résumé

  • Dimensionnez les tableaux avec CSS width et max-width
  • Utilisez le padding pour des cellules lisibles
  • Préférez les mises en page flexibles sur petits écrans
  • Les indices de largeur de colonne sont optionnels et limités par class si possible
  • Gardez les bordures collapsed pour que taille et lignes coopèrent
  • La structure reste en HTML ; les dimensions en CSS
  • Les prochaines leçons centrées sur les en-têtes s’appuient sur une grille déjà adaptée au viewport

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
6
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Html Tutoriel