Quelques notions de tableau

Admin

Notions générales

Un tableau est un ensemble de cases réparties dans une surface rectangulaire.
Elles sont disposées en abscisses et en ordonnées, c’est à dire en lignes et en colonnes
La convention usuelle pour les tableaux veut que l’origine de l’abscisse et de l’ordonnée est le point en haut à gauche, soit la première cellule en haut à gauche. La dernière est donc en bas à droite.

Un tableau peut n’avoir qu’une seule case, donc une seule ligne et une seule colonne.

La limite des lignes et des colonnes est dépendante des techniques de gestion du tableau.
Pour l’outil, elles sont fixées arbitrairement à 50 lignes et 12 colonnes (on peut y réprésenter un calendrier annuel Very Happy

).

Une cellule (ou une case) se repère dans le tableau par son abscisse et son ordonnée, ses coordonnées.
Dans un tableur comme celui utilisé pour travailler dans le fichier de l’outil ;
Les abscisses sont numérotées en lettre de A à Z et ensuite AA → ZZ, AAA → AMJ (sur mon ordi, un rapide calcul renvoie 26,374 colonnes et 1,048,576 lignes = 27,655,143,424 cellules … 27 milliards … c’est beaucoup, non ? En tout cas, bien plus que nous en avons réellement besoin …

Le sens d’avancement convenu dans le tableau est celui de la lecture occidentale, de gauche à droite puis de haut en bas.
Nous retrouverons ce sens dans la mise en forme des codes BBCode et HTML.
C’est également le sens de gestion des fusions de cellules., regrouper en une cellules, plusieurs cellules adjacentes.

	→ → → sens de lecture → → →
↓	Ligne / Colonne	1 ou A	2 ou B	3 ou C	4 ou D
Sens↓	1	A1 ou 1,1	B1 ou 1,2	C1 ou 1,3	D1 ou 1,4
De↓	2	A2 ou 2,1	B2 ou 2,2	C2 ou 2,3	D2 ou 2,4
Lecture↓	3	A3 ou 3,1	B3 ou 3,2	C3 ou 3,3	D3 ou 3,4
↓	4	A4 ou 4,1	B4 ou 4,2	C4 ou 4,3	D4 ou 4,4

Un tableau en BBCode

Note : Afin de présenter les balises BBCode sans qu’elles soient interprétées par le forum. Elles seront dénaturées par un point. [balise.][/balise.]

Le tableau
Il est toujours déclaré par la balise [table.] à sont entrée et la [/table.] à sa sortie.
Un tableau est compris entre ces 2 balises.
[table.] mes lignes et mes colonnes [/table.]

Les lignes
En BBCode on ne signale pas les colonnes. On signale uniquement les lignes. Le nombre de colonnes est le nombre cellules dans la ligne.
Les balises pour signaler les lignes sont [tr.] pour commencer et [/tr.] pour la finir.
[tr.] mes cellules[/tr.]

Les cellules
La cellule est l’entité contenant tout ce qui devra être affiché.
Elle débute par [td.] et finit par [/td.]
[td.] … mon texte ... [/td.]
[td.] … mon image ... [/td.]
[td.] … ma vidéo ... [/td.]
[td.] … tout ce qui peut s’afficher ... [/td.]

En pratique
Un tableau à 1 ligne et 1 colonne s’écrira
[table.] [tr.] [td.] … le truc à afficher … [/td.] [/tr.] [/table.]

Mon premier tableau à 1 ligne et 1 colonne

Code:: [table][tr][td] ... mon premier tableau … [/td][/tr][/table]

Tableau N°1

... mon premier tableau …

Un tableau à 2 ligne et 2 colonne s’écrira
[table.] [tr.] [td.] … le truc à afficher … [/td.] [td.] … le truc à afficher … [/td.] [/tr.] [tr.] [td.] … le truc à afficher … [/td.] [td.] … le truc à afficher … [/td.] [/tr.][/table.]

Mon premier tableau à 2 lignes et 2 colonnes

Code:: [table]
[tr][td] ... ma cellule 1,1… [/td][td] ... ma cellule 1,2… [/td][/tr]
[tr][td] ... ma cellule 2,1… [/td][td] ... ma cellule 2,2… [/td][/tr]
[/table]

La convention d’écriture est :

[table.]
---[tr.]
------[td.] ... ma cellule 1,1… [/td.]
------[td.] ... ma cellule 1,2… [/td.]
---[/tr.]
---[tr.]
------[td.] ... ma cellule 2,1… [/td.]
------[td.] ... ma cellule 2,2… [/td.]
---[/tr.]
[/table.]

Tableau N°2

... ma cellule 1,1…	... ma cellule 1,2…
... ma cellule 2,1…	... ma cellule 2,2…

Créer un tableau à petites dimensions n’est pas difficile.
La complexité sera grandissante avec le nombre de lignes.

Et surtout …. pour obtenir des présentations dignes
La somme des paramètres à mettre en place pour obtenir un tableau en couleur avec bordures, centré n’est pas négligeable.
Un petit coup d’oeil sur le code du tableau violet ci-à gauche.

Code:: [table style="width:100%;border-collapse:separate; background-color:#1b75bc;"] [tr] [td style="background-color:#dfcce4; border:dotted; text-align:center;"][color=#000000]... ma cellule 1,1…[/color][/td] [td style="background-color:#bcaed5; border:solid 1px; text-align:center;"][color=#000000]... ma cellule 1,2 …[/color][/td] [/tr] [tr] [td style="background-color:#c7a0cb; border:dashed; text-align:center;"][color=#000000]... ma cellule 2,1…[/color][/td] [td style="background-color:#9d85be; border:double; text-align:center;"][color=#000000]... ma cellule 2,2 …[/color][/td] [/tr] [/table]

Et hop, on a compris tout l’intérêt d’avoir un petit outil qui gère sans coup férir l’écriture des nombreux attributs nécessaires pour obtenir ce qui sépare le tableau N° 3 du tableau N° 2.

Tableau N° 3

... ma cellule 1,1…	... ma cellule 1,2 …
... ma cellule 2,1…	... ma cellule 2,2 …