BBCode

Faire un tableau en BBCode

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 07/02/2015 à 21h14
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 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
  • 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. Voiçi 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)