Accueil Formations Apprendre CSS 3

Mise en Forme des Tableaux en CSS

Retour à la formation
Chapitre 33 Leçon 3
Précédent
Suivant

Découvrez comment utiliser le CSS pour donner un style professionnel à vos tableaux HTML.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer les différentes propriétés CSS qui peuvent être appliquées aux tableaux HTML pour améliorer leur présentation. Nous commencerons par ajouter des bordures et réglerons la largeur des colonnes pour garantir un affichage uniforme. Ensuite, nous verrons comment utiliser les propriétés BorderCollapse et BorderSpacing pour gérer l'espacement entre les cellules. Nous apprendrons également à centrer le texte dans les cellules, à ajouter des marges autour du tableau pour une meilleure disposition, et à utiliser des sélecteurs de pseudo-classes pour styliser une ligne sur deux.

La leçon vous prendra également à travers le processus d'ajout de padding et d'ajustement de la hauteur des cellules pour s'assurer que le contenu est bien espacé et lisible. Enfin, nous examinerons comment appliquer des styles spécifiques aux légendes et aux en-têtes de tableau, pour un rendu final esthétique et harmonieux avec l'ensemble du site web.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :
– Apprendre à ajouter des bordures et définir les largeurs de colonnes.
– Comprendre et utiliser les propriétés BorderCollapse et BorderSpacing.
– Savoir centrer du texte et ajouter des marges aux tableaux.
– Appliquer du padding à l'intérieur des cellules pour améliorer la lisibilité.

Prérequis pour cette leçon

Connaissance de base en HTML et en CSS est nécessaire pour suivre cette vidéo.

Métiers concernés

Les compétences enseignées dans cette vidéo peuvent être particulièrement utiles pour les métiers suivants :
– Développeur Web
– Intégrateur Web
– Designer Web

Alternatives et ressources

Pour la mise en forme des tableaux, vous pourriez envisager d'utiliser des frameworks CSS comme Bootstrap ou Foundation qui offrent des styles prédéfinis.

Questions & Réponses

La propriété CSS 'BorderSpacing' permet de gérer l'espacement entre les cellules de tableau.
Utilisez la propriété 'text-align: center;' pour centrer le texte horizontalement et 'vertical-align: middle;' pour centrer le texte verticalement dans les cellules.
La propriété 'tableLayout' définit la disposition des colonnes dans un tableau. La valeur 'auto' laisse le navigateur ajuster automatiquement la largeur des colonnes, tandis que 'fixed' les fixe à la même largeur.