Le tableau en html
| 
Aller maintenant à la page carotte.htm en utilisant soit les flèches 
ou bien en passant par Fenêtre et en cliquant sur le nom du fichier.
Le tableau a été bien souvent mal utilisé dans le passé et il l'est toujours.
La définition du tableau est :
En informatique, un tableau est une structure de données de base. C'est une association indice(s)-élément.
Malheureusement, on nous a longtemps montré à créer la structure de nos pages web par des tableaux imbriqués. C'est vraiment la pagaille et difficile à ce retrouver.
Je ne vous montrerai pas cette ancienne manière de faire les choses. Nous allons plutôt utiliser le tableau comme un tableau.
Inscrivez donc "La carotte" puis retour
Cliquez ensuite sur 
et tenez le enfoncez.
En tenant la souris enfoncé mettez en surbrillance 2 colonnes et 3 lignes comme ceci:
En relâchant, un tableau va apparaître. C'est la manière rapide et il faut faire des ajustements à notre tableau. L'autre manière est de cliquer sur Tableau \ Insérer un tableau et de compléter selon vos besoins.
Dans les deux cas vous avez le même résultat.
Voyons le code:
<table>
Un tableau débute toujours par cette balise.
<tr>
Définit les lignes du tableau
<tr align="left|right|center valign=top|middle|bottom">
Alignement
<td>
Les cellules à l'intérieur des lignes
<td align="left|right|center valign=top|middle|bottom">
Alignement
<td width="nombre"> (en pixels)
<td width="nombre%"> (en pourcentage du tableau)
Largeur
<td bgcolor="#$$$$$$">
Couleur de fond de la cellule
On regarde le code (Affichage \ HTML):
------------------
<table border="1" cellspacing="1" width="100%">
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>
------------------------
La première ligne montre le début d'un tableau ainsi que des attributs que le tableau aura.
Il y a plusieurs attributs possibles.
<table border="nombre">
Bordure du tableau
<table cellspacing="nombre">
Espace des cellules
<table cellpadding="nombre">
Espace de la bordure des cellules
<table width="nombre"> (en pixels)
<table width="nombre%"> (pourcentage de la page)
Largeur
Nous avons ensuite 3 fois le groupe <tr></tr> ce qui veux dire 3 ligne et 2 fois le groupe <td></td> entre les balises <tr> qui veux dire 2 colonnes par lignes.
On fait quelques changements dans notre code (Affichage \ HTML)
Changeons la largeur du tableau pour qu'il n'utilise que 50% de la largeur de la page:
<table border="1" cellspacing="1" width="50%">
Modifions aussi la couleur de fond du tableau:
<table border="1" cellspacing="1" width="50%" bgcolor="#008080">
Puis cliquez sur OK.
Vous devriez voir ceci :
Il y a plusieurs possibilités et si vous cliquez avec le bouton droit de la souris et choisissez Propriété du tableau, vous pourrez changer facilement les codes de couleurs d'arrière-plan, de bordure et aussi modifier la largeur des bordures. Explorer et testez ces le meilleur moyen d'apprendre.
Entrons des données dans le tableau comme ceci:
Premiere ligne: goût goût très prononcé
Deuxieme ligne: propriété contribue à améliorer la vision
Troisieme ligne: vitamine contient de la vitamine A
Sélectionner ensuite le texte et changer sa couleur pour jaune.
Ça devrait vous donnez ceci dans le code:
---------------
<table border="1" cellspacing="1" width="50%" bgcolor="#008080">
<tr>
<td width="50%"><font color="#FFFF00">goût</font></td>
<td width="50%"><font color="#FFFF00">goût très prononcé</font></td>
</tr>
<tr>
<td width="50%"><font color="#FFFF00">propriété</font></td>
<td width="50%"><font color="#FFFF00">contribue à améliorer la vision</font></td>
</tr>
<tr>
<td width="50%"><font color="#FFFF00">vitamine</font></td>
<td width="50%"><font color="#FFFF00">contient de la vitamine A</font></td>
</tr>
</table>
