Faire un tableau en BBCode

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