Sommaire :
- Introduction
- Création de l’en-tête du tableau
- Ajouter des lignes au tableau
- Alignement des colonnes
- Personnaliser le tableau (CSS)
Introduction
Il est possible de créer un tableau de façon assez simple, il suffira d’utiliser le caractère
| (Alt Gr + touche 6) et d’avoir de la logique.Pour ce guide, on va utiliser un tableau à trois colonnes, mais vous pouvez en faire avec le nombre que vous souhaitez. Sachez juste qu’un tableau avec trop de colonnes pourrait ne pas s’afficher correctement.
Le tableau s’organise assez simplement, chaque
| va définir une colonne, et entre chaque | vous y insérez le contenu que vous voulez. Création de l’en-tête du tableau
Mais d’abord, il faut créer les intitulés des colonnes, il vous faudra deux lignes, la première indique les intitulés, la seconde marque la séparation avec le reste du tableau. Et on le verra un peu plus loin, cette ligne de démarcation va gérer les alignements :
| Colonne 1 | Colonne 2 | Colonne 3|
|---|---|---|
Voici notre base pour le tableau :
| Colonne 1 | Colonne 2 | Colonne 3 |
|---|
Ajouter des lignes au tableau
On va à présent ajouter une première ligne :
| Colonne 1 | Colonne 2 | Colonne 3|
|---|---|---|
| A1 | B1 | C1 |
| Colonne 1 | Colonne 2 | Colonne 3 |
|---|---|---|
| A1 | B1 | C1 |
Sachez que vous pouvez intégrer au tableau des images ou des emojis, ou utiliser les outils de mise en forme (mettre en gras, en italique, etc.). La largeur des colonnes va s’adapter toute seule à son contenu.
Pour bien montrer le reste du remplissage, on va ajouter une deuxième ligne, sur cette ligne, on va ajouter un emoji :
| Colonne 1 | Colonne 2 | Colonne 3|
|---|---|---|
| A1 | B1 | C1 |
| A2 | B2 | :smile: |
| Colonne 1 | Colonne 2 | Colonne 3 |
|---|---|---|
| A1 | B1 | C1 |
| A2 | B2 |  |
C’est assez simple !
Si vous voulez insérer une case vide, vous devez tout de même créer les démarcations
|. Laissons la case B2 vide pour voir :| Colonne 1 | Colonne 2 | Colonne 3|
|---|---|---|
| A1 | B1 | C1 |
| A2 | | :smile: |
| Colonne 1 | Colonne 2 | Colonne 3 |
|---|---|---|
| A1 | B1 | C1 |
| A2 | |
Alignement des colonnes
Comme je l’ai indiqué, la deuxième ligne avec les tirets gère la démarcation entre l’en-tête du tableau et son contenu, mais il permet aussi de définir l’alignement : gauche, centré ou à droite, pour cela il suffit d’ajouter : à gauche des tirets pour un alignement à gauche, à gauche et à droite pour un centrage, et à droite pour l’alignement à droite :
| Aligné à gauche | Centré | Aligné à droite|
|:---|:---:|---:|
| Cette colonne s'aligne à gauche | Je veux cette colonne centrée | Ici, à droite |
| :earth_americas: | :earth_africa: | :earth_asia: |
Cela donne :
| Aligné à gauche | Centré | Aligné à droite |
|---|---|---|
| Cette colonne s’aligne à gauche | Je veux cette colonne centrée | Ici, à droite |
 |
 |
 |
Voilà vous savez tout ce qu’il y a à savoir sur la construction d’un tableau !
Personnaliser le tableau (CSS)
Vous pouvez personnaliser le visuel du tableau sur votre forum assez simplement en créant une feuille CSS dans la gestion de vos thèmes. Vous pouvez créer un fond sur l’en-tête du tableau, sur l’ensemble du tableau, ajouter une bordure autour de chaque case. Cela va dépendre de vos envies.
Par exemple, sur notre forum, on a ajouté un peu plus d’espace entre chaque colonne, on a ajouté une couleur de fond à l’en-tête du tableau et changé la couleur des bordures (la couleur par défaut était trop claire).
Voici notre exemple de modifications css :
/* tableau */
.cooked table td, .cooked table th {
padding: 5px 10px !important;
}
.cooked table thead, .d-editor-preview table thead {
border-bottom: 2px solid #bbb !important;
background-color: #d3d3d3;
}
.cooked table tr, .d-editor-preview table tr {
border-bottom: 1px solid #bbb;
}