Comment crÃ©er un tableau simple en HTML - HTML/CSS

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

Suite a un fort volume de spam, les commentaires d'invités sont pour le moment désactivés. Vous devez vous inscrire ou vous identifier pour pouvoir commenter cet article, ou demander du support.

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/

++