Comment créer un tableau simple en HTML

Tutoriaux > HTML/CSS > Comment créer un tableau simple en HTML

Si vous souhaitez apprendre à créer un tableau basique en HTML, vous êtes au bon endroit ! Clin d'oeil Ce tutoriel vous donne les bases de la logique à adopter pour construire des tableaux

Salut à tous !
Vous allez apprendre ici à créer un tableau basique Sourire .
On s'y retrouve très vite, ne vous inquiétez pas !

Allez, go ! :þ

Code

<table>
<tr>
<th>Machin 1</th>
<th>Machin 2</th>
<th>Machin 3</th>
</tr>
</table>

Explications :
On ouvre d'abord la balise <table> , car on commence un tableau . Ensuite vient la balise <tr> , qui permet de créer une "ligne" du tableau .. Autrement dit, a chaque fois que vous souhaitez créer une nouvelle entrée, vous ouvrez une nouvelle balise <tr> (en oubliant pas de refermer la précédente, biensûr Clin d'oeil ) .

<th></th>, quant à lui, sert à définir les "titres" des colonnes du tableau . (Voir capture ci-dessous .)

Maintenant, on va s'attaquer aux entrées du tableau . On va donc fermer la précédente balise <tr>, et en ouvrir une nouvelle, pour aller à la ligne, vous vous souvenez ?

Attention, à présent, on ne va plus utiliser <th></th>, mais bien <td></td> !

Code

<table>
<tr>
<th>Machin 1</th>
<th>Machin 2</th>
<th>Machin 3</th>
</tr>

<tr>
<td>Truc 1</td>
<td>Truc 2</td>
<td>Truc 3</td>
</tr>

</table>

Ce qui nous donne :

On a presque finit !
Ou va quand même créer une deuxième entrée . Vous devriez normalement en être capable si vous avez bien suivi/compris, mais je donne quand même la solution Clin d'oeil .

Code

<table>
<tr>
<th>Machin 1</th>
<th>Machin 2</th>
<th>Machin 3</th>
</tr>

<tr>
<td>Truc 1</td>
<td>Truc 2</td>
<td>Truc 3</td>
</tr>

<tr>
<td>Brol 1</td>
<td>Brol 2</td>
<td>Brol 3</td>
</tr>

</table>

Voilà, c'est terminé ! Alors, pas bien compliqué, n'est-ce-pas ?
Comme toujours, pour un quelqonque problème, vous pouvez me contacter par MP ou dans les commentaires Clin d'oeil

Ah et encore un truc :
Le résultat du tableau ci-dessus a été obtenu après quelques modifications apportées au CSS Sourire .

C'est fini, bye !

Par slowkool , Le 17 Décembre 2006 à 21h20
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à HTML/CSS

Ajouter un commentaire

Lectures recommandées

Commentaires sur cet article

Webdeb73 - Le 18 Décembre 2006 à 18h14

Oui c'est très simple, peut-être même trop ^^

slowkool - Le 18 Décembre 2006 à 14h49

Merci pour le lien ^^
Mais il est bien spécifié dans le titre que c'est un tableau très simple ^^

Webdeb73 - Le 18 Décembre 2006 à 00h46

Mwé le tuto...

Un vrai tableau bien propre, valide et surtout accessible ça se construit de la façon suivante :

http://openweb.eu.org/articles/tableaux_css/

++

Tutoriaux > HTML/CSS > Comment créer un tableau simple en HTML