Apprendre le HTML : comment construire des tableaux en HTML

Les tableaux en HTML sont très simples à produire. Il vous suffit de savoir le nombre de colonnes et de rangées, et le tour est joué !

Nom	Prenom	Age
Neruda	Pablo	31
Boss	Hugo	48
Hugo	Victor	56

Pour créer un tableau en HTML, il existe 3 niveaux de déclaration :

Tout ce qui se trouve dans le tableau est encadré par la balise <table> qu'on referme avec </table>.
Entre ces deux balises, une rangée est déclarée avec la balise <tr> fermée par </tr>.
Dans la rangée, la cellule est initialisée avec la balise <td> refermée par </td>

Ce qui donne pour notre exemple (code résumé) :

<table>
<tr>
<td>Nom</td><td>Prenom</td><td>Age</td>
</tr>
<tr>
<td>Neruda</td><td>Pablo</td><td>31</td>
</tr>
<tr>
<td>Boss</td><td>Hugo</td><td>48</td>
</tr>
<tr>
<td>Hugo</td><td>Victor</td><td>56</td>
</tr>
</table>

Rien ne vous empêche de mettre un peu de gaieté là-dedans !

Nom	Prenom	Age
Neruda	Pablo	31
Boss	Hugo	48
Hugo	Victor	56

En effet, presque tout est paramétrable :

la propriété bgcolor permet comme pour le body, de changer la couleur de fond du tableau, d'une rangée ou d'une cellule.
border attribue et spécifie une taille de bordure border="1" ou rien border="0"
bordercolor donne la couleur de votre choix aux bordures
la taille même du tableau ou d'une cellule peut varier avec width="" ou height=""
Et enfin vous pouvez modifier à loisir le formatage du texte avec <font face="" size="" color=""> ou encore <center> etc.

Il s'agit là d'un tableau avec un nombre égal de rangées et de cellules. Dans la réalité, vous pouvez n'avoir besoin que d'une seule rangée et de plusieurs colonnes ou le contraire, une colonne pour plusieurs rangées...

Illustration avec <td colspan="5"> :

Coordonnées
Nom	Prenom	Age	Adresse	Ville

Illustration avec <td rowspan="10"> :

Les balises HTML
	Généralités
	Texte
	Image
	Liens
	Formatage

Le tableau peut aussi recevoir une dernière propriété qui a une incidence directe sur le comportement des cellules :

Voici un tableau "brut" :

Nom	Prenom	Age
Neruda	Pablo	31
Boss	Hugo	48
Hugo	Victor	56

Voici un tableau avec <table cellspacing="10">
Notez l'espacement des cellules.

Nom	Prenom	Age
Neruda	Pablo	31
Boss	Hugo	48
Hugo	Victor	56

Voici un tableau avec <table cellpadding="10">
Notez l'espacement dans les cellules.

Nom	Prenom	Age
Neruda	Pablo	31
Boss	Hugo	48
Hugo	Victor	56

creation sites web location immobilier images 3D occasion moto Soutien scolaire
Magasin d'usine | Gites et chambres d'hotes en france | Jouer au sudoku
Tous droits réservés. Respectez la propriété intellectuelle svp.