[Tuto HTML] Faire des tableaux

Bonjour à tous !

Dans ce tuto, nous allons voir comment créer des tableaux avec du code html. Cela peut vous sembler un peu compliqué au début, mais vous verrez qu’à force de le faire, cela finit par aller tout seul Wink

1/ Les différentes balises

Tout d’abord, il y a la balise qui va définir votre tableau :

Code:

<table> votre tableau sera ici </table>

Ensuite, les balises qui définissent les lignes et les colonnes :

Code:

<tr> ligne </tr>
<td> colonne </td>

2/ La mise en page du tableau

Ici nous allons voir comment mettre un peu de forme dans vos tableaux.

Commençons d’abord par mettre un peu de couleur dans notre tableau. Pour cela, nous allons utiliser la balise « bgcolor ». Voici un exemple :

Code:

<table bgcolor="#6633CC">
<tr>
   <td>ligne 1 - colonne 1</td>
   <td>ligne 1 - colonne 2</td>
   <td>ligne 1 - colonne 3</td>
</tr>
<tr>
   <td>ligne 2 - colonne 1</td>
   <td>ligne 2 - colonne 2</td>
   <td>ligne 2 - colonne 3</td>
</tr>
</table>

Spoiler:

Vous pouvez faire la même chose pour les lignes et cases. Par exemple :
¤ ligne colorée :

Code:

<table>
<tr bgcolor="#009966">
   <td>ligne 1 - colonne 1</td>
   <td>ligne 1 - colonne 2</td>
   <td>ligne 1 - colonne 3</td>
</tr>
<tr>
   <td>ligne 2 - colonne 1</td>
   <td>ligne 2 - colonne 2</td>
   <td>ligne 2 - colonne 3</td>
</tr>
</table>

Spoiler:

¤ case colorée :

Code:

<table>
<tr>
   <td bgcolor="#CC6633">ligne 1 - colonne 1</td>
   <td>ligne 1 - colonne 2</td>
   <td>ligne 1 - colonne 3</td>
</tr>
<tr>
   <td>ligne 2 - colonne 1</td>
   <td>ligne 2 - colonne 2</td>
   <td>ligne 2 - colonne 3</td>
</tr>
</table>

Spoiler:

Dans ce premier exemple, vous voyez qu’il n’y a pas de border à notre tableau. Si vous voulez en mettre, il vous suffit d’ajouter « border ». Exemple :

Code:

<table bgcolor="#6633CC" border="1">
<tr>
   <td>ligne 1 - colonne 1</td>
   <td>ligne 1 - colonne 2</td>
   <td>ligne 1 - colonne 3</td>
</tr>
<tr>
   <td>ligne 2 - colonne 1</td>
   <td>ligne 2 - colonne 2</td>
   <td>ligne 2 - colonne 3</td>
</tr>
</table>

Spoiler:

3/ La mise en forme du texte

Il existe des balises afin de mettre en forme votre texte au sein du tableau. Rassurez vous, ce sont les mêmes que l’on utilise dans les pages html.

¤ Aligner le texte à droite : align="right"
¤ Centrer le texte : align="center"
¤ Aligner le texte à gauche : align="left"
¤ Justifier le texte : align="justify"

Voici donc un premier jet, je vous ajouterai d’autres balises par la suite Smile

EDIT : MAJ du 25/11/2010

kiri a écrit:

Il est possible de fusionner les cellules verticalement ou horizontalement

colspan="Nombre de cellules" : définit le nombre de cellules à fusionner horizontalement.

rowspan="Nombre de cellules" : définit le nombre de cellules à fusionner verticalement.

petit exemple :

1
4	5
	7	8

Code:

on peut également régler les espacements entre les cellules avec :

Code:

cellpadding="0" cellspacing="0"

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]

_________________

SoP Story :: 2ème votes éliminatoires