Les Tableaux
Afin d'organiser textes et images, l'utilisation d'un tableau s'avère parfois inévitable. Avant de vous lancer dans la construction d'un tableau digne de ce nom, voici le b.a-ba des choses à savoir !
Pourquoi faire un tableau ?
Le tableau peut vous être très utile lorsque vous voulez obtenir une mise en page spéciale, par exemple pour votre sujet de gestion: difficile d'organiser de façon claire et esthétique les liens, les sujets de votre personnages, sans passer par là. Il permet de mettre sur un même alignement, du texte, des images, etc...
Les Bases
Pour créer un tableau, vous avez besoin de trois éléments de base qui sont les balises: < table > , < tr > et < td > !
< table > sert à ouvrir le tableau, et à le refermer. Votre tableau doit toujours commencer par un < table > et se terminer par un < / table >.
< tr > sert à ouvrir une ligne de votre tableau. Une ligne doit être refermée avant que vous puissiez en ouvrir une nouvelle. Ainsi, une ligne commencera toujours pas un < tr > et sera toujours terminée par un < / tr >.
< td > sert à ouvrir une colonne de votre tableau. De la même manière qu'un ligne, une colonne devra toujours être refermée avant que vous puissiez en ouvrir une nouvelle. Ouverture, grâce à un < td > et fermeture avec un < / td >.
Créer un tableau simple
Pour créer un tableau tout simple, il ne vous faudra savoir qu'une seule chose, en plus de ce qui a été précisé dans le point suivant: on ouvre toujours une ligne (< tr >) avant de d'ouvrir une colonne (< td >). Pourquoi? Parce que !
Non, tout simplement parce que c'est plus propre, et comme en maths, le codage demande un minimum de rigueur. ^^ Vous avez normalement toutes les clefs en mains pour pouvoir créer un tableau simple, selon vos préférences. Pour l'exemple, nous allons créer un tableau qui comportera trois lignes, et deux colonnes. Si vous avez suivi, le code pour un tableau de ce type sera donc le suivant:
- Code:
-
<table>
<tr><td>Ma Cellule 1</td><td>Ici la Cellule 2</td></tr>
<tr><td>La Cellule 3</td><td>Et la Cellule 4</td></tr>
<tr><td>Par ici la Cellule 5</td><td>Et enfin la Cellule 6</td></tr>
</table>
Et on obtiendra quelque chose comme ceci:
Ma Cellule 1 | Ici la Cellule 2 |
La Cellule 3 | Et la Cellule 4 |
Par ici la Cellule 5 | Et enfin la Cellule 6 |
Voilà, vous avez compris le principe ? ^^ Rien de bien compliqué, n'est ce pas ? Prochainement, nous verrons comment personnaliser les tableaux, afin de passer d'un tableau tout simple, à un tableau un peu plus complexe.
NB : • Si vous avez une dent contre le HTML (ca peut arriver! xD), vous pouvez parfaitement remplacer les "<" par des "[" sans que cela affecte les codes.
Il faut savoir que le mélange de BBcode ( codes avec des crochets: [ ) et de codes HTML (ceux avec des : < ) n'est pas très apprécié par le forum ! Pour éviter les "bugs" essayer au maximum de rester dans un seul "langage", soit BBcode de A à Z, soit HTML, se A à Z également. ^^
• Ne sauter pas de lignes entre vos différentes balises de tableaux: cela sera certes, plus claire pour vous, lorsque vous "bidouillerez" vos codes, mais ça va surtout créer un espace indésirable en haut de votre tableau. Pour supprimez cet espace, retirez simplement tous les retours à la lignes qui séparent vos td, tr, et table. ^^