[COURS] Comment puis-je faire un tableau ?

Les tables, appelés plus communément les tableaux, c'est en fait assez simple à coder. Ils sont d'une grande utilité, puisque vous pouvez grâce à eux placer vos éléments comme bon vous semble, vous pouvez même les mettre les uns à côté des autres (mais bon, ça je pense que vous le savez déjà xD) !

M'enfin, assez papoté, passons à l'ac-tion. ^^

1) Les balises

Voici les balises d'un tableau :

Code:

<table> </table>

Chaque tableau commence par <table> et se termine par </table>. Tous les paramètres permettant de définir le tableau se place entre ces deux balises.

Comme je vous l'ai dit, d'autres balises se placent à l'intérieur de celles précédemment citées.
Vous pouvez désormais mettre la balise table row. Elle définit une ligne du tableau qui contient minimum une donnée, et vous la notez de cette manière :

Code:

<tr> </tr>

Viens ensuite la dernière balise, table data. Celle-ci définit une cellule du tableau. Vous la noterez comme ceci :

Code:

<td> </td>

Ainsi, votre code ressemblerait à ça :

Code:

<table>
<tr>
<td>Ceci est une cellule de la première ligne</td>
<td>Ceci est la deuxième cellule de la première ligne</td>
<td>Ceci est la troisième cellule de la première ligne</td>
</tr>
<tr>
<td>Ceci est une cellule de la deuxième ligne</td>
<td>Ceci est la deuxième cellule de la deuxième ligne</td>
</tr>
</table>

Mais ce n'est pas fini ! Maintenant il faut remplir tout ça, n'est-ce pas ?
Nous allons donc passez aux attributs.

2) Les attributs

• border : Votre tableau a des "bordures", c'est-à-dire un quadrillage, qui sera visible ou non en fonction de cet attribut. Vous pouvez régler votre bordure de façon à ce qu'il y ait plus ou moins d'épaisseur.
  Ex :
  
  • Pas de bordure :

    Code:

    <table border="0">

  • Bordure d'1 pixel d'épaisseur :

    Code:

    <table border="1">

  • Bordure de 5 pixels d'épaisseur :

    Code:

    <table border="5">

  
  
  
• bordercolor : Cet attribut définit la couleur de la bordure de votre tableau.
  Ex :
  
  • Bordure rouge d'1 pixel :

    Code:

    <table border="1" bordercolor="#FF0000">

  • Bordure bleue de 5 pixels :

    Code:

    <table border="5" bordercolor="#0000FF">

  
  
  
• bdcolor : Vous trouvez votre tableau un peu triste, tout transparent, et vous souhaiteriez mettre un fond d'une certaine couleur dans une de vos cellules, dans une de vos lignes, ou même dans votre tableau tout entier ? Pas de problème, c'est cet attribut qu'il faudra utiliser.
  Ex :
  
  • Cellule avec fond rouge :

    Code:

    <td bgcolor="#FF0000">

  • Ligne avec fond bleu:

    Code:

    <td bgcolor="#0000FF">

  • Tableau avec fond jaune :

    Code:

    <td bgcolor="#FFF000">

  
  
  
• cellpadding : Il détermine les marges à l'intérieur de vos cellules pour chacun des quatre côtés.
  Ex :
  
  • Pas de marge :

    Code:

    <table cellpadding="0">

  • Marge d'1 pixel :

    Code:

    <table cellpadding="1">

  • Marge de 5 pixels :

    Code:

    <table cellpadding="5">

  
  
  
  
• cellspacing : Il détermine l'espace qui sépare chaque cellule de votre tableau.
  Ex :
  
  • Pas d'espace :

    Code:

    <table cellspacing="0">

  • Espace d'1 pixel :

    Code:

    <table cellspacing="1">

  • Espace de 5 pixels :

    Code:

    <table cellspacing="5">

  
  

Voilà, je pense que ce sont ceux qu'il faut connaître. Il en existe d'autres, bien sûr, mais ils sont secondaires. Si cela vous intéresse tant que ça (j'en doute ), demandez-moi dans votre cours ^^

Tout ça c'est bien beau, mais imaginons que vous avez besoin de donner des dimensions précises à votre tableau, comment vous faites ? Eh bien, il faut simplement rajouter l'attribut width (largeur), et éventuellement l'attribut height (hauteur).
Ex :

Code:

<table width="200">

Et pour finir, admettons, vous souhaitez rendre votre tableau encore plus original, et pour cela vous avez décidé de lui mettre un fond. Idée saugrenue ? Peut-être, mais réalisable.
Il suffit de rajouter background="background.gif" (notez que je mets ".gif" comme j'aurais pu mettre ".png" ou ."jpg" ). Et le code qui illustre ceci :

Code:

<table background="background.gif">