Skip to main content

Se débarrasser des espaces dans les tableaux HTML

Top 10 Règles de style masculin 2 sur 2 (Mai 2025)

Top 10 Règles de style masculin 2 sur 2 (Mai 2025)
Anonim

Si vous utilisez des tableaux pour la mise en page (un non-non dans XHTML, il est probable que vous rencontriez l'ajout disgracieux d'espace supplémentaire dans vos mises en page. Pour résoudre ce problème, vous devez vérifier à la fois la définition de votre tableau HTML et les feuille de style régissant.

Définition de table HTML

La balise HTML pour les tables par défaut ne contrôle pas certaines exigences d'espacement. Vérifiez trois choses à propos de la balise "table" dans votre document HTML:

  1. L'attribut cellpadding de votre table est-il défini sur 0?
    1. cellpadding = "0"

  2. L'attribut cellspacing de votre table est-il défini sur 0?
    1. cellpacing = "0"

  3. Y a-t-il des espaces avant ou après votre contenu et les balises de la table?

Le numéro 3 est le botteur. De nombreux éditeurs HTML aiment que le code soit entièrement espacé pour le rendre facile à lire. Mais de nombreux navigateurs interprètent ces onglets, espaces et retours à la ligne comme un espace supplémentaire souhaité dans vos tableaux. Débarrassez-vous des espaces entourant vos balises et vous obtiendrez des tables plus nettes.

Feuilles de style

Cependant, il se peut que le code HTML ne soit pas désactivé. Les feuilles de style en cascade contrôlent certains attributs d'affichage des tableaux et, en fonction de la page, vous pouvez éventuellement avoir délibérément ajouté du code CSS spécifique à un tableau.

Analysez le fichier CSS de référence pour l’une des valeurs suivantes dans la table " ,' ' th "ou ' td " propriétés et ajuster au besoin:

  • frontière: Spécifie les attributs d'une table ou d'une bordure de cellule
  • effondrement de la frontière: Traite les bordures adjacentes comme un seul, pour éviter la duplication des largeurs de bord
  • rembourrage: Offre un espace vide, en pixels, autour de chaque cellule
  • aligner le texte: Détermine l'alignement du texte dans la cellule
  • espacement des bordures: Définit l'espacement entre les cellules, en pixels

Des alternatives

Bien que vous puissiez toujours utiliser des tableaux HTML (la norme est bien établie et universellement prise en charge par les navigateurs actuels), la conception Web réactive la plus moderne utilise des feuilles de style en cascade pour placer des éléments sur une page. Les tableaux ont toujours du sens pour leur objectif initial d'affichage de données tabulaires, mais pour organiser la mise en page et le contenu d'une page, vous feriez bien mieux d'utiliser une mise en forme CSS.