[Apprenti] Les bases des tableaux en HTML

Sujet: [Apprenti] Les bases des tableaux en HTML Mer 20 Jan 2010, 21:27

Auteur : Wart!n

study

------------------------------ study

Les bases des tableaux en HTML

Allons droit au but, les balises qui ont un rapport avec les tableaux sont au nombre de 4 :

table
caption
tr
th

La balise table à un début et une fin, celle-ci est la commande principale pour définir l'ensemble du tableau.
Vous avez donc compris : Tout le contenu du tableau sera entre la balise table et la balise /table :

Code:: <table>
< ! -- Contenu du tableau -->
</table>

La balise caption a, comme toutes les balises de tableaux, que se soit table ou les autres, un début et une fin (caption et /caption). C'est, entre guillemets, « le Titre du Tableau », son en-tête :

Code:: <table>
<caption>Mon tableau</caption>
</table>

Les balises tr sont les commandes pour définir les lignes du tableau, il y en a autant que de lignes.

Code:: <table>
<caption>Mon tableau</caption>
<tr>< ! -- contenu de la première ligne --></tr>
<tr>< ! -- contenu de la seconde ligne --></tr>
</table>

Les balises th sont les commandes pour définir les colonnes sur chaque ligne.
Non, ce n'est pas du charabia, vous pouvez, sur plusieurs lignes, ne pas avoir le même nombre de colonnes, ce qui permet de faire des tableaux les plus extravagant les uns des autres, exemple :

Mon tableau
Ce tutoriel est :
Paramètres\Choix	OUI	NON
Super ?	X
Nul ?		X

Code de l'exemple :

Code:: <table border>
<caption>Mon tableau</caption>
<tr>
<th colspan=«3»>Ce tutoriel est :</th>
</tr>
<tr>
<th>Paramètres\Choix</th><th>OUI</th><th>NON</th>
</tr>
<tr>
<th>Super ? </th><th>X</th><th></th>
</tr>
<tr>
<th>Nul ? </th><th></th><th>X</th>
</tr>
</table>

Ce que vous avez pu remarquer, c'est que j'ai rajouté : colspan=«3» que l'on pourrait traduire par « Case sur 3 colonnes » car cet attribut, ajouté à la balise th, donne une longueur à la case. On aurait put mettre la valeur à 5, à 6 ou bien à 10,... on peut mettre ce que l'on veut (à condition que ça reste un nombre entier).

MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée

Sujet: Re: [Apprenti] Les bases des tableaux en HTML Lun 10 Sep 2012, 22:35

Merci beaucoup Tchou !

Illustre illustrateur Date d'inscription : 07/02/2012 Age : 29

Merci, ton tuto m'a été très utile Smile

Merci Tchoutchou pour ton tuto.

» [Apprenti] Les bases de la photomanip
» [Apprenti] Les bases de la retouche photo : le corps
» [Apprenti] Les bases de la retouche photo : les vêtements
» [Fiche] HTML et CSS qu'est-ce que c'est ?
» [Apprenti] S3OC/S3PE - Créer ses tableaux