Bonjour
Après avoir trouvé un tutoriel qui m'a permis d'apprendre à faire des tableau, et après m'être pratiquée à en faire sur le portail de mon forum de test, je viens donc poster ce tutoriel pour apprendre à faire des tableaux sur votre page d'accueil ou sur votre portail.
Les tableaux sont très utiles et vous permettent de faire pleins de choses comme :
- organiser vos partenaires (c'est toujours plus esthétique quand tout est aligné)
- faire plusieurs colonnes dans votre message d'accueil (vous ne vous en doutiez peut-être pas, mais pour le message d'accueil de ce forum d'entraide, nos administrateur ont utilisé un tableau pour faire deux colonnes).
- Reproduire l'index de votre forum sur votre portail (comme sur ce forum de support)
- Et bien d'autres!
D'ailleurs, la plupart des sites webs sont construits à partir de tableaux!
-------------------------
Tout d'abord, commençons par les bases!
Premièrement, lorsqu'on fait un tableau, on utilise toujours ces balises de base qui sont les suivantes :
: Balise ouvrante pour tous les tableaux
: Balise fermante pour tous les tableaux
: Balise ouvrante pour commencer une rangée dans le tableau
: Balise fermante pour finir une rangée dans le tableau
: Basise ouvrante pour commencer une cellule dans une rangée
| : Balise fermante pour finir une cellule dans une rangée.
---------------------
Commençons maintenant par des tableaux tout simples.
Mais juste avant, afin de minimiser les risques d'oublis de fermer les balises (et ainsi éviter les plantages de page), je vous donne ces petites astuces.
Lorsque vous commencez à faire un tableau, commencez toujours par mettre les balises
tout de suite l'un en dessous de l'autre. En faisant ceci, vous n'oublierez pas de fermer la balise.
N'hésitez pas à faire des sauts de ligne pour aérer le code du tableau. Cela va ainsi vous aider à placer vos balises.
Pour faire un tableau de 2 rangées et de 2 colonnees, voici le code suivant . Vous voyez comment j'ai organisé le code avec les sauts de ligne et les espaces pour rendre ça plus ordonné.
- Code:
-
<table>
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
Et voici le résultat :
![[TUTORIEL] Faire un tableau en HTML Table1](https://img.photobucket.com/albums/v381/ladykatt/Print%20Screen/table1.jpg)
Un deuxième exemple? Allons-y avec un tableau contenant une seule rangée de 4 colonnes :
- Code:
-
<table>
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
Résultat :
![[TUTORIEL] Faire un tableau en HTML Table2](https://img.photobucket.com/albums/v381/ladykatt/Print%20Screen/table2.jpg)
Prenons ce même tableau et ajoutons-y une deuxième rangée de 4 cellules en ajoutant ceci au code :
- Code:
-
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
ce qui donne ceci comme code :
- Code:
-
<table>
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>
Résultat :
![[TUTORIEL] Faire un tableau en HTML Table3](https://img.photobucket.com/albums/v381/ladykatt/Print%20Screen/table3.jpg)
Maintenant, vous avez capté le principe?
Si oui, nous pouvons maintenant passer au chapitre suivant, qui sera consacré aux bordures et aux espacement dans les tableaux.
Home 
phpBB France 
