Chez-swan.net : FAQ - BBcode tableau

Accueil

FAQ

PHPBoost Framework V3 images

BBcode tableau

Les tableaux en bbcode n'auront plus de secret pour vous!

Comment insérer un tableau avec le BBCode ?

Vous avez la possibilité d'insérer des tableaux en bbcode dans les news, articles, pages, forum et wiki.

Les 3 balises a utiliser pour le créer sont:

'table' sert à la création d'un tableau
'row' défini une ligne
'col' défini une case sur une ligne.

Pour créer un tableau de base:

Code TEXT :

[table]
	[row]
		[head colspan="2"]Titre du tableau[/head]
	[/row]
	[row]
		[col]Case de gauche en haut[/col]
		[col]Case de droite en haut[/col]
	[/row]
	[row]
		[col]Case de gauche en bas[/col]
		[col]Case de droite en bas[/col]
	[/row]
[/table]

Ce qui vous donnera visuellement:

Titre du tableau
Case de gauche en haut	Case de droite en haut
Case de gauche en bas	Case de droite en bas

Comment gèrer la largeur à 100% d'un tableau ?

Pour que la largeur du tableau prenne la totalité sur votre page, passez la fonction "width" comme ceci "width:100%" sur la table principale.

Code TEXT :

[table style="width:100%;"]
	[row]
		[head colspan="2" Titre du tableau][/head]
	[/row]
	[row]
		[col]Case de gauche en haut[/col]
		[col]Case de droite en haut[/col]
	[/row]
	[row]
		[col]Case de gauche en bas[/col]
		[col]Case de droite en bas[/col]
	[/row]
[/table]

Résultat:

Titre du tableau
Case de gauche en haut	Case de droite en haut
Case de gauche en bas	Case de droite en bas

Comment gèrer la largeur et la hauteur d'un tableau ?

Pour gérer la largeur et la hauteur d'un tableau, vous avez une façon de le faire. Le plus simple est de lui définir la taille en "px" (pixels). Car sans valeur précise, le tableau se formate en proportion du texte inséré.

Pou pouvoir appliquer ces deux fonctions, il faut passer par une insertion de style.

Code TEXT :

[table]
	[row]
		[head colspan="2" style="height:50px; width:500px"]Titre du tableau[/head]
	[/row]
	[row]
		[col]Case de gauche en haut[/col]
		[col]Case de droite en haut[/col]
	[/row]
	[row]
		[col]Case de gauche en bas[/col]
		[col]Case de droite en bas[/col]
	[/row]
[/table]

Résultat:

Titre du tableau
Case de gauche en haut	Case de droite en haut
Case de gauche en bas	Case de droite en bas

Ces valeurs peuvent aussi s'appliquer aux cases "col".

Comment créer un tableau à cellule unique?

C'est très simple :
Code TEXT :

 
[table]
	[row]
		[col]
			Tableau à cellule unique
		[/col]
	[/row]
[/table]

Résultat:

Tableau à une cellule

Voilà

Comment créer un tableau avec une ligne et deux colonnes?

C'est le même principe que le tableau à cellule unique, sauf que l'on rajoute une balise "col" supplémentaire en dessous de la première balise "col".

Code TEXT :

[table]
	[row]
		[col]
			Cellule de gauche
		[/col]
		[col]
			Cellule de droite
		[/col]
	[/row]
[/table]

Résultat:

Cellule de gauche

Cellule de droite

Pour créer une troisième colonne etc ... Il vous suffit de reprendre le principe de base expliquer au début de la question.

Comment créer un tableau à deux lignes et deux colonnes?

Pour rajouter une deuxième ligne, nous rajoutons la balise row en dessous de la première et on y insère des cellules.

Code TEXT :

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

Résultat:

Cellule haut gauche	Cellule haut droite
Cellule bas gauche	Cellule bas droite

Il est extrêmement important de mettre le même nombre de colonnes (col) dans chaque ligne pour ne pas déformer le tableau.

Comment fusionner des cellules horizontalement dans un tableau?

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.

Exemple:

Code TEXT :

[table]
	[row]
		[col colspan="2"]
			Deux cellules fusionnées.
		[/col]
	[/row]
	[row]
		[col]
			Cellule bas gauche
		[/col]
		[col]
			Cellule bas droite
		[/col]
	[/row]
[/table]

Résultat:

Deux cellules fusionnées.
Cellule bas gauche	Cellule bas droite

Plus il y aura de cellules, et plus vous devrez augmenter la valeur du colspan.

Comment fusionner des cellules verticalement dans un tableau?

Voyons maintenant comment fusionner deux cellules verticalement . Le principe est le même que pour fusionner horizontalement sauf qu'on utilise ici l'attribut "rowspan".

Exemple:

Code TEXT :

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

Résultat:

Deux cellules fusionnées verticalement	Cellule haut droite
	Cellule bas droite

Plus il y aura de cellules, et plus vous devrez augmenter la valeur du rowspan.

Comment fusionner des cellules verticalement et horizontalement dans un tableau?

La fusionner des cellules à la fois horizontalement et verticalement est aussi possible, maintenat que vous connaissez l'attribut "colspan" et "rospan" :

Code TEXT :

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

Résultat:

Quatre cellules fusionnées verticalement		Cellule haut droite
Quatre cellules fusionnées verticalement		Cellule milieu droite
Cellule bas gauche	Cellule bas milieu	Cellule bas droite

Très important: Respecter l'ordre des attributs: d'abord colspan et ensuite rowspan.

A vous de jouer maintenant

Comment modifier les cellules d'en-tête dans un tableau?

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

Code TEXT :

 
[table]
	[row]
		[head]
			Animaux
		[/head]
		[head]
			Catégories
		[/head]
	[/row]
	[row]
		[col]
			Chiens
		[/col]
		[col]
			Canidés
		[/col]
	[/row]
	[row]
		[col]
			Baleine
		[/col]
		[col]
			Mamifères
		[/col]
	[/row]
	[row]
		[col]
			Aigle
		[/col]
		[col]
			Rapaces
		[/col]
	[/row]
[/table]

Résultat:

Animaux	Catégories
Chiens	Canidés
Baleine	Mamifères
Aigle	Rapaces

Comment personnaliser un tableau grâce au CSS?

La balise "table" voir même "head" permet de donner au tableau une apparence particulière avec des propriétés CSS. Les principales propriétés CSS d'un tableau sont:

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)

Pour insérer du CSS dans un tableau:

Code BBCODE :

[table style="css du tableau"]
//Contenu du tableau
[/table]

Et voici la syntaxe appropriée:

Code BBCODE :

style="propriété(1):valeur; propriété(2):valeur; propriété(3):valeur; etc..."

Se qui nous donne:

Code BBCODE :

style="height:XXpx; width:XXpx; margin:XXpx; etc..."

Comment personnaliser les cellules "head" et "col" grâce au CSS?

Vous pouvez aussi personnaliser vos cellules ([col] et [head]) grâce au css. Les possibilités qui s'offrent à vous:

Propriété	Action	Valeurs
background	Fond de la cellule.	valeur : : Largeur de la bordure. (solid, dotted, dashed, groove, double, inset, outset, ridge): Type de bordure. couleur.
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/ou #000000;
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)
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)

Pour insérer du CSS le[head]et [col] :

Code BBCODE :

[table]
	[row]
		[head style="css du head"]
			Contenu de la cellule
		[/head]
		[head style="css du head"]
			Contenu de la cellule
		[/head]
	[/row]
	[row]
		[col style="css du col"]
			Contenu de la cellule
		[/col]
		[col style="css du col"]
			Contenu de la cellule
		[/col]
	[/row]
[/table]

Et voici la syntaxe appropriée:

Code BBCODE :

style="propriété(1):valeur; propriété(2):valeur; propriété(3):valeur; etc..."

Se qui nous donne:

Code BBCODE :

style="height:XXpx; width:XXpx; padding:XXpx; etc..."

Chez-swan.net

Votre espace

Question aléatoire

Livre d'or

Statistiques

Mini sondage

En ligne

Pour créer un tableau de base:

Résultat:

Résultat:

Résultat:

Résultat:

Résultat:

Exemple:

Résultat:

Exemple:

Résultat:

Résultat:

Résultat:

Pour insérer du CSS dans un tableau:

Pour insérer du CSS le[head]et [col] :