vendredi 29 mars 2019

Les tableaux en HTML

l'importance des tableaux sur l'html est d'organiser le contenu des pages WEB ou bien les formulaire en plus les tableaux des listes normal, par exemple :
  • Afficher des image alignée avec une taille précisées ;
  • Afficher les textes de saisie alignés dans un formulaire  ;
  • Afficher une liste de recherches.
La balise utilisée pour créer un tableau : <table> contenant les balise suivantes :
  • Pour créer les lignes d'un tableau : la balise <tr>
  • Pour créer les titres de chaque cellule : la balise <th>
  • Pour créer les cellules de chaque lignes : la balise <td>
Les attributs de la balise tables le plus utilisés :
Border : créer le bordure au tableau;
Bordercolor: colorier le bordure;
Colspan: Fusionner les cellules des colonnes;
Rowspan : Fusionner les cellules des lignes;
Bgcolor: Colorier l'arrière plan d'un tableau, cellule ou lignes.

La balise <caption> pour mettre un titre pour un tableau.
Comme exemple :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>les tableaux</title>
</head>
<body>
  <table  border="1px" bordercolor="red">
    <caption><strong>Listes des salariés</strong></caption>
    <tr>
      <th>Nom</th>
      <th>Prénom</th>
      <th>Age</th>
      <th>Lieu de naissance</th>
    </tr>
    <tr>
      <td>Said</td>
      <td>Wadia</td>
      <td>32 ans</td>
      <td>Rabat</td>
    </tr>
    <tr>
      <td>Safia</td>
      <td>Midoua</td>
      <td>35 ans</td>
      <td>Fes</td>
    </tr>
    <tr>
      <td colspan="2" bgcolor="yellow">Moha</td>
      <td>40 ans</td>
      <td>Meknes</td>
    </tr> 
        <tr>
      <td>khalid</td>
      <td>Midoua</td>
      <td>35 ans</td>
      <td rowspan="2" bgcolor="yellow">kenitra</td>
    </tr>
        <tr>
      <td>yahya</td>
      <td>Zakaria</td>
      <td>36 ans</td>
    </tr>
  </table><br/>
  <table>
    <caption><strong>Les images de la nature</strong></caption>
    <tr>
      <td><a href="image1.jpg" target="_blank"><img src="image1.jpg" width="200px" height="200px"/></a></td>
      <td><a href="image2.jpg" target="_blank"><img src="image2.jpg" width="200px" height="200px"/></a></td>
      <td><a href="image3.jpg" target="_blank"><img src="image3.jpg" width="200px" height="200px"/></a></td>
    </tr>
  </table>
</body>
</html>


Télécharger l'exemple

0 commentaires:

Enregistrer un commentaire