Si vous utilisez des tableaux pour la mise en page (un non-non en XHTML), il est probable que vous constaterez l'ajout inesthétique 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 table HTML et les spécificités de toute feuille de style en vigueur.
Définition du tableau HTML
Le HTML étiqueter pour les tables par défaut ne contrôle pas certaines exigences d'espacement. Vérifiez trois choses sur le tableau balise dans votre document HTML:
- Votre tableau a-t-il l'attribut cellpadding défini sur 0?
cellpadding="0"
- Votre tableau a-t-il l'attribut cellspacing défini sur 0?
espacement des cellules="0"
- Y a-t-il des espaces avant ou après votre contenu et les balises du tableau ?
Le numéro 3 est le kicker. Beaucoup Éditeurs HTML aiment avoir le code tout espacé, pour le rendre facile à lire. Mais de nombreux navigateurs interprètent ces onglets, espaces et retours chariot comme un espace supplémentaire souhaité à l'intérieur de vos tableaux. Débarrassez-vous de l'espace blanc entourant vos balises et vous aurez des tables plus nettes.
Feuilles de style
Cependant, ce n'est peut-être pas le code HTML qui est désactivé. Feuilles de style en cascade contrôlez certains attributs d'affichage des tables et, selon la page, vous pouvez ou non avoir délibérément ajouté du CSS spécifique à la table en premier lieu.
Analysez le fichier CSS régissant pour l'une des valeurs suivantes à l'intérieur du tableau, e, ou alors tdpropriétés et ajustez au besoin:
- frontière: spécifie les attributs d'un tableau ou d'une bordure de cellule
- effondrement de la frontière: traite les bordures adjacentes comme une seule, pour éviter de dupliquer les largeurs de bordure
- rembourrage: Offre un espace vide, en pixels, autour de chaque cellule
- aligner le texte: détermine le alignement de texte au sein de la cellule
- espacement des frontières: définit l'espacement entre les cellules, en pixels
Alternatives
Bien que vous puissiez toujours utiliser des tableaux HTML (la norme est bien établie et universellement prise en charge dans les navigateurs), 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 un sens pour leur objectif initial d'afficher des données tabulaires, mais pour organiser la mise en page et le contenu d'une page, il est préférable d'utiliser la mise en page CSS à la place.