LabEx
Se connecterInscription gratuite

Ligne de tableau HTML

HTMLHTMLBeginner
Pratiquer maintenant

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Les tableaux peuvent être utilisés pour présenter des données dans un format structuré. Le composant de base de tout tableau est un élément de ligne de tableau () qui définit une ligne de cellules. Les lignes de tableau doivent être incluses dans un élément de tableau (

). Dans ce laboratoire, nous allons apprendre à créer des lignes de tableau HTML.

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/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/head_elems -.-> lab-70872{{"Ligne de tableau HTML"}} html/layout -.-> lab-70872{{"Ligne de tableau HTML"}} html/tables -.-> lab-70872{{"Ligne de tableau HTML"}} html/complex_tbl -.-> lab-70872{{"Ligne de tableau HTML"}} html/tbl_access -.-> lab-70872{{"Ligne de tableau HTML"}} end

Création d'une structure de tableau HTML

Pour créer un tableau HTML, nous devons tout d'abord définir la structure du tableau. Commencez par créer un fichier HTML nommé index.html. Ajoutez le code suivant à votre fichier :

<!doctype html>
<html>
  <head>
    <title>Mon tableau</title>
  </head>

  <body>
    <table>
      <tr>
        <th>Cellule d'en-tête 1</th>
        <th>Cellule d'en-tête 2</th>
      </tr>

      <tr>
        <td>Cellule de données 1</td>
        <td>Cellule de données 2</td>
      </tr>
    </table>
  </body>
</html>

Dans ce code, nous avons créé un tableau HTML avec deux lignes et deux colonnes. La première ligne contient deux cellules d'en-tête (

au tableau. Par exemple, pour ajouter une autre ligne au tableau, ajoutez le code suivant entre les éléments existants :

<tr>
  <td>Cellule de données 3</td>
  <td>Cellule de données 4</td>
</tr>

Maintenant, le tableau a trois lignes, avec deux cellules par ligne.

Stylisation des lignes de tableau

Nous pouvons ajouter des styles aux lignes de tableau à l'aide de CSS. Ajoutez le style suivant à l'élément pour ajouter une couleur d'arrière-plan aux lignes paires :

<style>
  tr:nth-child(even) {
    background-color: lightgray;
  }
</style>

Ce code ajoutera une couleur d'arrière-plan lightgray à chaque seconde ligne du tableau.

Fusion de lignes de tableau

Nous pouvons fusionner deux lignes ou plus adjacentes en une seule ligne en utilisant l'attribut rowspan. Par exemple, disons que nous voulons fusionner les deux premières lignes en une seule ligne. Remplacez le premier élément

par le code suivant :

<tr>
  <th rowspan="2">Cellule d'en-tête 1</th>
  <th>Cellule d'en-tête 2</th>
</tr>

L'attribut rowspan="2" dans la première cellule d'en-tête fusionnera les deux premières lignes en une seule ligne.

Création d'en-têtes de cellules de tableau

Nous pouvons utiliser l'élément

) et la deuxième ligne contient deux cellules de données ().

Ajout de plus de lignes

Pour ajouter plus de lignes au tableau, nous devons ajouter plus d'éléments

pour créer des cellules d'en-tête dans le tableau. Les cellules d'en-tête sont généralement utilisées pour décrire le contenu des colonnes. Pour ajouter une cellule d'en-tête à la première colonne, remplacez le premier élément de la deuxième ligne par le code suivant :

<th scope="row">Cellule de données 1</th>

L'attribut scope="row" dans l'élément

spécifie que cette cellule est un en-tête pour la première ligne.

Sommaire

Dans ce laboratoire, nous avons appris à créer des lignes de tableau HTML et à personnaliser le tableau à l'aide de CSS. Nous avons également appris à fusionner des lignes adjacentes et à créer des cellules d'en-tête dans le tableau. Avec ces compétences, vous pouvez désormais créer des tableaux beaux et structurés pour vos pages web.

Connexe HTML Cours
HTML pour les débutants

HTML pour les débutants

HTML
Débutant
Démarrage rapide avec HTML

Démarrage rapide avec HTML

HTML
Débutant
Construire une application web Tic-Tac-Toe

Construire une application web Tic-Tac-Toe

HTMLCSSJavaScript
Débutant

We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy