Internet
Site Web: fonctionnement, structure et programmation
Avant d'attaquer le positionnement et la mise en page d'éléments grâce aux CSS, étudions comment tirer parti de nos nouvelles connaissances pour styler un tableau. Pour y parvenir, nous nous pencherons sur le site de Marc (téléchargeable ici) pour lequel nous avions déjà réalisé un tableau complexe que nous avions omis de mettre en forme. A ce dessein, ajoutez la partie sélectionnée ci-dessous dans le fichier journal.css puis visualiser le résultat dans votre navigateur:
Style de base du tableau
Affichage du style dans le navigateur
Comme nous pouvons le constater avec l'exemple ci-dessus, les cellules du tableau sont calquées sur le modèle de boîte: elles possèdent des espacements et des bordures. Par contre, pour les marges, il y a une grande différence. Les cellules n'ont pas de marge, elles ont un certain espace autour de leur contour et cet espace vaut pour le tableau tout entier. L'espace situé entre les bordures des cellules se nomme border-spacing et est définie pour l'ensemble du tableau. Outre l'utilisation de la propriété border-spacing, il est possible de résoudre autrement les bordures. La propriété CSS border-collapse fusionne les bordures de façon à supprimer l'espace qui les sépare. Le navigateur ignore par conséquent tout l'espace de bordure donné au tableau.
Marge entre les cellules
Fusion des marges entre les cellules
Nous pouvons constater que la bordure autour des cellules n'est plus double, exactement ce que nous voulons.
Modifier le style du tableau de telle sorte que le texte des colonnes Date, Température et Qualité des repas soit centré et que celui des colonnes Altitude et Population soit aligné à droite. A ce dessein, créez deux classes distinctes, une pour centrer les textes et l'autre pour les aligner à droite.
Résultat à obtenir
|
Marc adore l'orange. Il serait dès lors approprié de donner une propriété background-color à certaines cellules du tableau. Rajoutez de la couleur à la ligne d'en-tête ainsi qu'aux lignes paires du tableau à l'aide des règles CSS ci-dessous. Notez que pour la deuxième règle, il est impératif que vous définissiez une nouvelle classe couleurCellule et que vous déclariez les éléments concernés directement dans le code XHTML:
En affichant le résultat dans le navigateur, nous constatons que le tableau présente un défaut stylistique: le tableau imbriqué est également coloré. Ce défaut peut être corrigé en utilisant les sélecteurs descendants.
Changez uniquement la couleur de fond des en-têtes du tableau de Marc et Julie, sans toucher à la couleur des autres en-têtes du tableau. Vous avez besoin pour cela d'un sélecteur qui ne porte que sur ces en-têtes imbriqués.
|
