Comprendre le bitcoin, l'intelligence artificielle, faire un site web... En 3 minutes en vidéo!

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 basiqueSourire .
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ûrClin 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 solutionClin 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 commentairesClin d'oeil

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

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/

++

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