Dernière mise à jour : 20/12/2018 à 12h27
Table des matières
Cette nouvelle balise supporte les imbrications infinies et elle permet une personnalisation presque totale puisqu'elle permet de définir au tableau des propriétés graphiques en CSS.
Introduction
La création d'un tableau n'est pas une opération simple à comprendre. La balise table de PHPBoost suit la même logique que la création de tableaux en HTML, seules les balises ne portent pas le même nom.
Pour mieux expliquer cet article va progresser pas à pas avec de nombreux exemples.
Tableau de base
Nous allons faire un tableau qui contient une seule cellule. Voilà le code source :
Tableau de base : une ligne et une colonne | ||
|
Code BBCODE : [table] [row] [col] Tableau à une cellule [/col] [/row] [/table] |
Explications :
- table : marque le début du tableau
- row : marque le début d'une ligne du tableau
- col : marque une colonne
Faisons maintenant un tableau à deux cellules sur la même ligne :
Tableau de base : une ligne et deux colonnes | |||
|
Code BBCODE : [table] [row] [col] Cellule de gauche [/col] [col] Cellule de droite [/col] [/row] [/table] |
Il est donc important de remarquer que pour rajouter une cellule il suffit de rajouter une colonne dans la ligne.
Rajoutons maintenant une deuxième ligne :
Tableau à deux lignes et deux colonnes | |||||
|
Code BBCODE : [table] [row] [col] Cellule haut gauche [/col] [col] Cellule haut droite [/col] [/row] [row] [col] Cellule bas gauche [/col] [col] Cellule bas droite [/col] [/row] [/table] |
Pour rajouter une ligne il faut utiliser la balise row et y insérer des cellules.
On peut donc grâce à cette balise créer des tableaux avec n'importe quel nombre de cellules.
Fusion de cellules
Nous avons vu qu'il est nécessaire de mettre le même nombre de cellules dans chaque ligne. Voyons maintenant comment fusionner des cellules.
Fusion de colonnes
Pour fusionner deux colonnes horizontalement il faut simplement déclarer une seule des cellules et lui donner l'argument colspan="2" afin de lui faire remarquer que celle déclaration de cellule vaudra pour deux cellules. Voilà un exemple.
Tableau avec cellules fusionnées | |||||
|
Code BBCODE : [table] [row] [col colspan="2"] Deux cellules fusionnées horizontalement [/col] [/row] [row] [col] Cellule bas gauche [/col] [col] Cellule bas droite [/col] [/row] [/table] |
Fusion de lignes
Voyons maintenant comment fusionner deux cellules selon la verticale. La démarche est la même que pour fusionner horizontalement sauf qu'on utilise ici l'attribut rowspan.
Tableau avec cellules fusionnées | ||||
|
Code BBCODE : [table] [row] [col rowspan="2"] Deux cellules fusionnées verticalement [/col] [col] Cellule haut droite [/col] [/row] [row] [col] Cellule bas droite [/col] [/row] [/table] |
Fusion horizontale et verticale
Nous pouvons aussi fusionner des cellules à la fois horizontalement et verticalement.
Tableau avec cellules fusionnées | ||||||||
|
Code BBCODE : [table] [row] [col colspan="2" rowspan="2"] Quatre cellules fusionnées verticalement [/col] [col] Cellule haut droite [/col] [/row] [row] [col] Cellule milieu droite [/col] [/row] [row] [col] Cellule bas gauche [/col] [col] Cellule bas milieu [/col] [col] Cellule bas droite [/col] [/row] [/table] |
Mise en forme avancée
Cellules d'en-tête
Pour distinguer les cellules d'en-tête il existe une balise qui permet de donner un style différent des cellules par défaut ; il permet par exemple de distinguer le libellé d'une colonne et son contenu.
Au lieu d'utiliser la balise col il faut simplement mettre head, son fonctionnement est strictement identique à celui de col, seule l'apparence graphique en sera modifiée.
Voyons un exemple :
Tableau à mise en forme avancée | |||||||||||
|
Code BBCODE : [table] [row] [head] Légume [/head] [head] Couleur [/head] [/row] [row] [col] Carotte [/col] [col] Orange [/col] [/row] [row] [col] Radis [/col] [col] Rouge [/col] [/row] [row] [col] Salade [/col] [col] Vert [/col] [/row] [row] [col] Pomme de terre [/col] [col] Jaune [/col] [/row] [/table] |
Personnalisation du tableau grâce au CSS
Comme précisé en introduction, la balise table permet de donner au tableau son propre CSS.
Personnalisation du tableau en lui-même
Voici comment insérer du CSS pour un tableau.
Code BBCODE :
[table style="css du tableau"] //Contenu du tableau [/table]
Voyons maintenant les principales propriétés CSS d'un tableau.
Tout d'abord il faut connaître au minimum la syntaxe du CSS qui est très simple.
Code BBCODE :
propriété 1: valeur; propriété 2 : valeur; propriété 3 : valeur; ...
Propriété | Action | Valeurs |
border-collapse | Coller les bordures du tableau entre elles |
|
border-spacing | Définit l'espace entre les cellules |
|
margin | Définit les marges |
|
width | Définit la largeur du tableau |
|
height | Définit la hauteur du tableau |
|
Personnalisation des cellules
Vous allez aussi pouvoir personnaliser vos cellules ([col] et [head]) grâce au css. Voici un petit aperçu des possibilités.
Propriété | Action | Valeurs |
background | Fond de la cellule |
Ex: background:black url('http://www/phpboost.com/image.jpg') repeat-x; |
border | Bordure de la cellule |
Ex: border:1px solid black; |
width | Définit la largeur de la cellule |
|
height | Définit la hauteur de la cellule |
|
color | Définit la couleur du texte de la cellule |
|
padding | Définit la marge intérieure de la cellule |
|