Tableau et le CSS
Nous avons vu en html comment créer un tableau et faire la mise en forme du tableau. Ici nous allons faire la même chose mais la mise en forme sera assurée par le CSS à la place du html. Si vous ne savez pas encore comment créer un tableau, vaut mieux aller lire mon cours de html sur la création d’un tableau qui se trouve ici.
Il faut noter que nous allons travailler avec le même tableau de 5 gagnants du concours de html dont voici le code source :1. La bordure et la couleur de la bordure du tableau :
Pour déterminer la bordure du tableau on utilise border. En CSS, border est utilisé pour
déterminer les 4 bordures d’un élément. Dans le cas de notre tableau, voici le code CSS à ajouté sur la feuille
style.css :
Et comme vous avez remarqué, la couleur par défaut de la bordure est la couleur noir ; cependant nous pouvons
choisir la couleur que nous voulons.
Pour choisir la couleur de la bordure, soit on utilise border-color ou on ajoute directement la couleur de la
bordure après la taille de la bordure.
Exemples : Choisissons la couleur rouge comme couleur de la bordure du tableau.
Codes CSS :
1ère cas :
2ème cas :
NB :
Parfois il peut nous arriver que nous voulons choisir 4 bordures ayant chacune une couleur différente ou on veut tout simplement insérer une, deux, ou trois bordures au lieu de quatre. Ça tombe bien car nous allons voir tout de suite comment le faire.
- Pour insérer la bordure inferieur d’un élément, on utilise border-bottom.
- Pour insérer la bordure gauche d’un élément, on utilise border-left.
- Pour insérer la bordure droite d’un élément, on utilise border-right.
- Pour insérer la bordure supérieur d’un élément, on utilise border-top.
Code CSS:
2. le style de la bordure :
Des bordures sous forme des lignes droites peuvent ne pas nous plaire. Alors il faut savoir que nous pouvons
choisir nous même le style d’une bordure.
Pour déterminer le style d’une bordure, soit on utilise border-style qui prend comme valeurs none (aucune),
dashed (tirets), dotted (points), groove (rainure), inset (enfoncé), outset,
double, solid (bordure pleine); soit on ajoute directement la valeur après la taille de la bordure.
Cette dernière on l’a déjà fait au début. Ne me dites surtout pas que vous ne voyez pas solid dans nos exemples
précédents.
Un exemple utilisant border-color avec comme valeur dashed:
3. Equivalent CSS de cellpadding et cellspacing:
Si vous souvenez bien, on a utilisé en html cellpadding=n un attribut qui définit le nombre de pixels(n)
de remplissage autour de contenu de chaque cellule et cellspacing=n un attribut qui définit l’espacement
que doit exister entre les cellules (n est le nombre des pixels que doit avoir l’espacement).
Ici nous allons voir leurs équivalents en CSS .
Cellpadding correspond à padding en CSS. pading détermine la taille des espaces de remplissage
autour d’un élément.
Pour cellspacing, on utilise border-spacing ou border-collapse
4. Exemple : retour sur notre tableau :
Vous vous souvenez de notre tableau qui se trouve ici, eh bien pour le moment nous allons refaire le même tableau mais en utilisant cette fois le CSS pour la mise en forme.
Code CSS:
5. Remarque:
Ce que nous venons de voir sont valables pour tout élément html : tableau, cellule, image, paragraphe…
