Définition et création de table HTML

Introduction

Les tableaux HTML sont couramment utilisés pour afficher des données tabulaires sur les pages web. Dans ce laboratoire, vous allez apprendre à créer des tableaux HTML de base en utilisant les balises <table>, <tr>, <td> et <th>.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 85%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Création du tableau

Commencez par créer un nouveau fichier HTML appelé index.html et en configurant la structure de base. Dans les balises <body>, créez un élément <table>. Cet élément contiendra toutes les lignes et les colonnes de votre tableau.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

Définition des lignes

Ensuite, définissez les lignes de votre tableau en utilisant la balise <tr>. Chaque ligne contiendra une ou plusieurs cellules. Pour créer une cellule unique, utilisez la balise <td>.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Ajout d'un en-tête de tableau

Dans certains cas, vous souhaiterez peut-être ajouter une ligne d'en-tête à votre tableau. Pour ce faire, utilisez la balise <th> au lieu de la balise <td>.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Ajout de bordures et de styles

Par défaut, les tableaux HTML ont un style minimal et aucune bordure. Pour ajouter une bordure à votre tableau, utilisez la propriété CSS border.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Résumé

En suivant ce tutoriel, vous avez appris à créer un tableau HTML de base et à le styliser à l'aide de CSS. Les tableaux peuvent être personnalisés davantage en ajoutant des attributs tels que colspan et rowspan aux cellules, et en utilisant des balises supplémentaires telles que <caption> et <thead>. Avec ces outils, vous pouvez créer des tableaux complexes et informatifs pour afficher des données sur vos pages web.

Définition de table HTML