Vidéo: Formation Dreamweaver -14- Création de feuilles de style CSS 2024
Outre l'utilisation de l'inspecteur des propriétés dans Adobe Dreamweaver CS6, vous pouvez mettre en forme des tableaux entiers ou des cellules (et leur contenu) en utilisant CSS (feuilles de style en cascade). Dans la plupart des cas, cela est considéré comme une meilleure pratique, car il maintient une séparation entre le balisage, le contenu et le style utilisé pour le rendre esthétique.
Vous pouvez utiliser CSS pour mettre en forme une table comme suit:
-
Créez une règle de classe CSS à partir de l'inspecteur des propriétés ou du panneau Styles CSS.
-
Dans la catégorie Type, sélectionnez une taille et une couleur pour le texte de votre tableau.
-
Dans la catégorie Arrière-plan de la boîte de dialogue Définition d'une règle CSS, attribuez une couleur d'arrière-plan à votre tableau à l'aide de la propriété Couleur d'arrière-plan, puis cliquez sur OK.
-
Sélectionnez la table à laquelle vous souhaitez appliquer le nouveau style de classe.
-
Affectez la classe à l'aide de la liste déroulante Classe de l'inspecteur des propriétés.
L'ensemble de votre table prend en charge le nouveau formatage.
De la même manière que vous pouvez utiliser l'inspecteur des propriétés pour colorier et aligner des cellules individuelles, vous pouvez créer et appliquer des règles CSS aux cellules du tableau. Dans la plupart des cas, cela est considéré comme une meilleure pratique que de s'appuyer sur des attributs HTML. Pour ce faire, procédez comme suit:
-
Créez une règle de classe CSS à partir de l'inspecteur des propriétés ou du panneau Styles CSS.
-
Dans la catégorie Arrière-plan, sélectionnez une couleur d'arrière-plan.
-
Dans la catégorie Block, sélectionnez Middle dans la liste déroulante Vertical-Align, sélectionnez Center dans la liste déroulante Text-Align, puis cliquez sur OK.
-
Sélectionnez la cellule de tableau à laquelle vous souhaitez appliquer la nouvelle classe.
-
Dans l'inspecteur des propriétés, localisez la liste déroulante Classe et sélectionnez votre nouvelle classe.
Vos choix de mise en forme sont appliqués à la cellule du tableau.