Cellule de données de tableau HTML : Maîtriser la balise TD

Introduction

Dans ce laboratoire, vous allez découvrir la balise HTML <td> qui est utilisée pour définir les données d'un tableau HTML. Vous allez également découvrir les diverses attributs qui peuvent être utilisés avec cette balise.

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 actualiser l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/basic_elems -.-> lab-70856{{"Cellule de données de tableau HTML"}} html/doc_flow -.-> lab-70856{{"Cellule de données de tableau HTML"}} html/tables -.-> lab-70856{{"Cellule de données de tableau HTML"}} html/complex_tbl -.-> lab-70856{{"Cellule de données de tableau HTML"}} html/tbl_access -.-> lab-70856{{"Cellule de données de tableau HTML"}} end

Création d'un tableau HTML

La première étape consiste à créer un tableau HTML avec des données. Ouvrez le fichier index.html et ajoutez le code suivant :

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Ici, nous avons créé un tableau HTML avec deux lignes et trois colonnes. La balise <td> est utilisée pour définir le contenu de chaque cellule du tableau.

Utilisation de l'attribut colspan

L'attribut colspan est utilisé pour spécifier combien de colonnes doit couvrir une cellule. Pour utiliser l'attribut colspan, ajoutez le code suivant :

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Ici, nous avons utilisé l'attribut colspan pour couvrir les deux premières colonnes afin d'afficher le nom de la personne dans une seule cellule.

Utilisation de l'attribut rowspan

L'attribut rowspan est utilisé pour spécifier combien de lignes doit couvrir une cellule. Pour utiliser l'attribut rowspan, ajoutez le code suivant :

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2">John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Male</td>
      </tr>
      <tr>
        <td rowspan="2">Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
      <tr>
        <td colspan="2">Female</td>
      </tr>
    </table>
  </body>
</html>

Ici, nous avons utilisé l'attribut rowspan pour couvrir la colonne du prénom afin d'afficher le nom de la personne dans une seule cellule pour deux lignes.

L'attribut header est utilisé pour spécifier qu'une cellule est liée à une ou plusieurs cellules d'en-tête. Pour utiliser l'attribut header, ajoutez le code suivant :

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <th id="name-header">Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td headers="name-header">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td headers="name-header">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Ici, nous avons utilisé l'attribut header pour spécifier que la première colonne est liée à la cellule d'en-tête avec l'ID name-header.

Sommaire

Félicitations ! Vous avez appris à utiliser la balise HTML <td> pour définir les données d'un tableau HTML. Vous avez également appris à utiliser divers attributs tels que colspan, rowspan et header avec cette balise pour créer des tableaux plus complexes.

Cellule de données de tableau HTML