Comment faire un tableau en HTML ?

Les balises :

En HTML, il est assez simple de créer un tableau !
Il vous faudra retenir essentiellement 4 balises.
Ces balises sont :
<table> : Créer le tableau.
<tr> : Insérer une ligne.
<th> : Insérer un titre.
<td> : Insérer une colone

Pratique :

<table border="1"> <!-- Je créai un tableau -->
 
 <tr> <!-- J'insère une ligne -->
  <th> <!-- J'insère un titre -->
   Nom
  </th> <!-- Je ferme le titre -->
  <th>
   Prenom
  </th>
 </tr> <!-- J'ai fini ma première ligne -->
 
 <tr>
  <td> <!-- J'insère une colone -->
   Dupon
  </td>
  <td>
   Jean
  </td>
 </tr>
 
 <tr>
  <td>
   Chirac
  </td>
  <td>
   Patrick
  </td>
 </tr>
 
</table> <!-- J'ai fini mon tableau -->

» Exemple

Voici un tableau banal ..
En y reflechissant, vous pouvez ( si votre tableau est long ) mettre un titre <th> en bas de ce dernier !
Mais bon, comme vous avez pu le constater, les bordures décollées avec une marge intérieure, c'est pas super !
Pour remédier à ce problème, CSS intervient !
Ajoutez simplement à l'ouverture du tableau (L: 1.) la fonction suivante :
style="border-collapse:collapse";
Ce qui donne ceci :
<table style="border-collapse:collapse;"> :

» Exemple

Fusionner des cellules

Comment fusionner deux cellules ?
Et bien je vais vous dire : simplement ^^
Il faut juste retenir deux codes !

<table border="1" style="border-collapse:collapse;">
 
 <tr>
  <th>
   Film
  </th>
  <th>
   Sale
  </th>
  <th>
   Heure
  </th>
 </tr>
 
 <tr>
  <td>
   Garfield
  </td>
  <td>
   Salle 1
  </td>
  <td rowspan="2">
   20h30
  </td>
 </tr>
 
 <tr>
  <td>
   Bienvenue chez les ch'ti
  </td>
  <td rowspan="2">
   Salle 2
  </td>
<!-- Pas besoin d'indiquer que le film commence à 20h30 puisqu'on a fusionné la colone avec celle de dessus -->
 </tr>
 
 <tr>
  <td>
   Hitman
  </td>
<!-- Idem pour la fusion des salles ! -->
  <td>
   22h30
  </td>
 </tr>
 
</table>

» Exemple

Maintenant, pour fusionner deux cellules verticales, nous allons utiliser la fontcion rowspan !
Bon mauvaise nouvelle pour ceux qui veullent voir Bienvenut chez les ch'ti, mais il n'y a plus de place ..
Changeons donc notre tableau !

Fusionner des cellules

Comment fusionner deux cellules ?
Et bien je vais vous dire : simplement ^^
Il faut juste retenir deux codes !

<table border="1" style="border-collapse:collapse;">
 
 <tr>
  <th>
   Film
  </th>
  <th>
   Sale
  </th>
  <th>
   Heure
  </th>
 </tr>
 
 <tr>
  <td>
   Garfield
  </td>
  <td>
   Salle 1
  </td>
  <td>
   20h30
  </td>
 </tr>
 
 <tr>
  <td>
   Bienvenue chez les ch'ti
  </td>
  <td colspan="2">
   Complet <!-- Ici, pas besoin de créer une deuxième colone car elle est déjà créée et fusionnée avec celle-ci -->
  </td>
 </tr>
 
 <tr>
  <td>
   Hitman
  </td>
  <td>
   Salle 2
  </td 
  <td>
   22h30
  </td>
 </tr>
 
</table>

» Exemple

Pour améliorer votre niveau sur les tableaux, je vous invite à en créer vous même après ce tuto pour vous faire la main !!
Sur ce, la partie 1 est fini !
Dans la partie 2, vous découvrirez comment personnalises un tableau !

« Tuto