Un article de WikiTuto.

Apprendre le Langage HTML HTML : le langage Qu'est ce que l'HTML Les bases du HTML Ma première page en HTML La liste des balises HTML Travailler le formatage d'un paragraphe Les caractères spéciaux Créer des tableaux Les attributs de tableaux Insérer un lien Hypertext Insérer une image Les formulaires Créer un formulaire La balise Input La balise Select La balise Textarea Pour aller plus loin Installer un serveur web sur XP Transférer un fichier en FTP avec Filezilla Apprendre le javascript modifier Tdm HTML

Sommaire 1 Niveau 2 Description 3 Explication 3.1 Créer un tableau 3.1.1 Sans Alignement 3.1.2 Avec Alignement 4 Voir aussi

Niveau

• Niveau amateur

Description

Ce tutoriel va vous permettre de créer des tableaux en HTML

Explication

Créer un tableau

Sans Alignement

Nous allons tout d'abord utiliser les 4 principales balises HTML pour créer un tableau :

1. La balise <table> qui annonce au navigateur la création d'un tableau.
   1. L'attribut border spécifie la taille de la bordure du tableau.
2. La balise <tH> qui détermine l'en-tête de colonne (pas obligatoire).
3. La balise <tr> qui détermine une ligne du tableau.
4. La balise <td> qui détermine la cellule.

A noter toutes ces balises doivent être correctement fermées

Exemple de code d'un tableau simple :

 <table border="1">
  <tr>
    <th>Première colonne</th><th>Deuxième colonne</th>
  </tr>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
  </tr>
 </table>
 

Ce qui donnera à l'affichage :

• On peut également fusionner deux cellules exemple :

 <table border="1">
  <tr>
    <th>Première colonne</th><th>Deuxième colonne</th>
  </tr>
  <tr>
    <td colspan="2">Cellule fusionnée</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
  </tr>
 </table>
 

• Résultat à l'affichage :

Colspan=2 indique que cette cellule utilise la place de 2 cellules

Avec Alignement

• Il est possible d'appliquer des attributs d'alignements aux balises <tr>,<td> et <th>
• Il exite 2 types d'attributs :

1. L'alignement horizontal align avec comme paramètre left, right et center
2. L'alignement vertical valign avec comme paramètre : top, bottom, baseline et middle

Exemple :

 <table border="1">
  <tr valign="top">
    <th align="right">Première colonne allongée</th>
     <th align="left">Deuxième colonne allongée</th>
  </tr>
  <tr align="center">
    <td ><br>Aligné horizontalement</td>
    <td valign="top">Aligné en haut verticalement</td>
  </tr>
  <tr>
    <td align="right">Aligné à droite</td>
    <td>Aligné à gauche</td>
  </tr>
 </table>
 

Voici le résultat à l'affichage :

Voir aussi

• Attributs de tableaux HTML
• Balises HTML
• HTML
• Première page en HTML