CSS - Mise en forme des tableaux.
Réponse AJAX

Notre tableau de base

Nous allons travailler sur un tableau qui représente les différentes matières en BTS SIO.

Remarquez :

Mises en forme CSS

Position du tableau

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 }

tab1

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).

tab2

Taille du tableau

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).

tab3

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 :

tab4

Notez ici la mise en forme CSS qui permet de centrer et élargir le tableau.

Votre réponse n°1

Les arrières-plan

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.

tab5

Les bordures

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 :

tab6

Notez ici la mise en forme CSS qui permet de créer les bordures ci-dessus.

Votre réponse n°2

Fusionner les bordures

Il peut être esthétique de fusionner les bordures, grâce à border-collapse:collapse appliqué à la balise table :

tab7

Position de la légende

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 :

tab8

Les contours arrondis

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.

tab9

Couleur d'arrière-plan transparente

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).

taba

À vous de jouer

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) :

Votre réponse n°3

Mettez ici une capture d'écran de votre résultat :

Votre réponse n°4