BBCode : faire un tableau
Table des matières
Depuis PHPBoost 2.0 il est possible de faire des tableaux en BBCode.
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.
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.
Nous allons faire un tableau qui contient une seule cellule. Voilà le code source :
Explications :
Il faut comprendre que la description du tableau se fait d'abord selon les lignes, puis pour chaque ligne on définit des colonnes, ce qui définit pour chaque intersection une cellule.
Faisons maintenant un tableau à deux cellules sur la même ligne :
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 :
Pour rajouter une ligne il faut utiliser la balise row et y insérer des cellules.
Il est important de mettre le même nombre de colonnes dans chaque ligne pour ne pas risquer de déformer le tableau. Si vous souhaitez faire des fusions de cellules reportez vous au paragraphe fusions de cellules.
On peut donc grâce à cette balise créer des tableaux avec n'importe quel nombre 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.
Pour fusionner deux colonnes verticalement 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.
Il est évident que l'on peut fusionner autant de colonnes que l'on veut. Pour cela il faut indiquer dans l'attribut colspan le nombre de cellules à fusionner.
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.
Nous pouvons aussi fusionner des cellules à la fois horizontalement et verticalement.
Il est important de respecter l'ordre : d'abord colspan et ensuite rowspan.
Pour distinguer les cellules entre elles 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 :
Comme précisé en introduction, la balise table permet de donner au tableau son propre CSS.
Voici comment insérer du CSS pour un tableau.
Voyons maintenant les principales propriétés CSS d'un tableau.
Tout d'abord il faut connaitre un minimum la syntaxe du CSS qui est très simple.
Vous allez aussi pouvoir personnaliser vos cellules ([col] et [head]) grâce au css. Voiçi un petit aperçu des possibilités.
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 | ||
---|---|---|
|
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
Il faut comprendre que la description du tableau se fait d'abord selon les lignes, puis pour chaque ligne on définit des colonnes, ce qui définit pour chaque intersection une cellule.
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.
Il est important de mettre le même nombre de colonnes dans chaque ligne pour ne pas risquer de déformer le tableau. Si vous souhaitez faire des fusions de cellules reportez vous au paragraphe fusions de 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 verticalement 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 horizontallement [/col] [/row] [row] [col] Cellule bas gauche [/col] [col] Cellule bas droite [/col] [/row] [/table] |
Il est évident que l'on peut fusionner autant de colonnes que l'on veut. Pour cela il faut indiquer dans l'attribut colspan le nombre de cellules à fusionner.
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] |
Il est important de respecter l'ordre : d'abord colspan et ensuite rowspan.
Mise en forme avancée
Cellules d'en-tête
Pour distinguer les cellules entre elles 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 connaitre un 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. Voiçi 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 |
|