Nous allons travailler sur un tableau qui représente les différentes matières en BTS SIO.
Remarquez :
Les propriétés CSS margin-top, margin-right, margin-bottom et margin-left, appliquées à balise <table> permettent de positionner le tableau par rapport au flux HTML.
En général, vous voudrez décaler légérement le tableau de la gauche de la page : table { margin-left:50px }
Ou alors vous souhaiterez centrer le tableau au milieu de la page : table { margin-left:auto; margin-right:auto }
Vous pouvez utiliser le raccourci table { margin:auto } (qui s'applique aussi à margin-top et margin-bottom, mais ça ne change rien dans ce cas car la valeur auto en top et bottom ne crée pas de marge).
Vous souhaiterez parfois aérer le tableau en l'étirant en largeur, avec une taille fixe : width:500px;
Ou éventuellement avec une taille proportionnelle à la largeur de la fenêtre : width:90%; (attention, dans ce cas, la largeur du tableau variera lorsqu'on redimensionnera la fenêtre, ce qui n'est pas forcément du meilleur effet).
On peut également aérer le tableau en ajoutant une "marge interne" (padding) entre les bordures et les textes. Ici, un padding:5px appliqué à tous les th et td :
Vous pourrez mettre des couleurs en arrière-plan avec background-color:code couleur
Vous pourrez mettre des images d'arrière-plan avec background-image:url(fichier image)
L'aspect d'une image d'arrière-plan se contrôle avec background-position, background-size, background-attachement, background-repeat.
Dans l'exemple suivant, les différents styles ont été appliquée à thead th (qui signifie : les th contenus dans le thead), tbody th, tfoot td.
La propriété CSS border:style épaisseur couleur permet de définir la taille des bordures. Par exemple : border:solid 4px #506AFF (appliquée ci-dessous à la balise table
Les bordures peuvent être différentes pour le table, les th et les td, et vous pouvez même différencier chaque cellule en utilisant des classes.
J'ai vu qu'on pouvait donner des bordures spécifiques aux thead, tbody, tfoot, mais je n'ai pas réussi.
Les propriétés peuvent prendre les valeurs suivantes :
Il peut être esthétique de fusionner les bordures, grâce à border-collapse:collapse appliqué à la balise table :
La légende du tableau, positionnée par défaut en haut, peut être placée en bas grâce à caption-side:bottom appliqué à la balise table. Pour l'exemple, j'ai également mis la légende en gras :
On peut arrondir les bords du tableau ou de chaque cellule, grâce à border-radius:20px appliqué aux balises table, th, td.
Attention : ça m'a l'air incompatible avec border-collapse:collapse (à enlever).
Si on souhaite quatre coins différents (c'est le cas ici, par exemple pour "Semestre 2" ou pour le pied de page), on utilise border-radius:2px 4px 6px 8px (dans l'ordre : haut-gauche, haut-droit, bas-droit, bas-gauche, soit le sens horaire).
Cette propriété est en fait beaucoup plus riche que ça et permet de faire des effets délirants.
Sur cet exemple, vous voyez l'image de fond par transparence la couleur d'arrière-plan (blanche) des cellules de contenu.
La couleur d'arrière-plan utilisée ici est : background-color:rgba(255,255,255,0.5) (0.5 signifiant à moitié transparent, et le a de rgba signifie un canal alpha, c'est comme ça qu'on nomme en général les canaux de transparence).
Essayez d'appliquer les propriétés CSS nécessaires pour vous rapprocher au plus de cette dernière capture d'écran (vous pouvez sûrement faire mieux parce que je me suis pas totalement cassé sur ce coup-là).
Notez ici l'ensemble du code (HTML + sa feuille de style interne) :
Mettez ici une capture d'écran de votre résultat :