BBCode

Faire un tableau en BBCode

Dernière mise à jour : 20/12/2018 à 12h27
Table des matières
  1. Introduction
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.

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
Tableau à une cellule




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 construction d'un 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
cellule de gauchecellule de droite




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


Cellule haut gauche



Cellule haut droite



Cellule bas gauche



Cellule bas droite



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


Deux cellules fusionnées horizontalement



Cellule bas gauche



Cellule bas droite



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]






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


Deux cellules fusionnées verticalement



Cellule haut droite



Cellule bas droite





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


Quatre cellules fusionnées verticalement



Cellule haut droite



Cellule milieu droite



Cellule bas gauche



Cellule bas milieu



Cellule bas droite





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


Légume



Couleur



Carotte



Orange



Radis



Rouge



Salade



Vert



Pomme de terre



Jaune



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
  • collapse : les bordures sont collées entre elles (par défaut dans le BBCode PHPBoost)
  • separate : les bordures sont dissociées
border-spacing Définit l'espace entre les cellules
  • valeur: en pixels 3px par exemple
margin Définit les marges
  • auto : le tableau est centré
width Définit la largeur du tableau
  • valeur : en % (50% par exemple): largeur proportionnelle à la place disponible
  • valeur : en pixels (50px par exemple)
height Définit la hauteur du tableau
  • valeur : en % (50% par exemple): Hauteur proportionnelle à la place disponible
  • valeur : en pixels (50px par exemple)




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
  • couleur: hexadécimale ou en anglais.
  • url('adresse de l'image') : Image en fond
  • repeat: (repeat-x, repeat-y, repeat, no-repeat) Répétition de l'image de fond.


Ex: background:black url('http://www/phpboost.com/image.jpg') repeat-x;
border Bordure de la cellule
  • valeur: Largeur de la bordure
  • (solid, dotted, dashed, groove, double, inset, outset, ridge): Type de bordure
  • couleur


Ex: border:1px solid black;
width Définit la largeur de la cellule
  • valeur: en % (50% par exemple): largeur proportionnelle à la place disponible
  • valeur: en pixels (50px par exemple)
height Définit la hauteur de la cellule
  • valeur: en % (50% par exemple): Hauteur proportionnelle à la place disponible
  • valeur: en pixels (50px par exemple)
color Définit la couleur du texte de la cellule
  • couleur: hexadécimale ou en anglais
padding Définit la marge intérieure de la cellule
  • valeur: en % (50% par exemple): Hauteur proportionnelle à la place disponible
  • valeur: en pixels (50px par exemple)
Cette page a été vue 31661 fois