LabEx
EntrerRejoindre

Ligne de tableau HTML

HTMLBeginner
Pratiquer maintenant

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.

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.

Mise en forme 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.

Résumé

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 débutants

HTML pour débutants

htmlweb-development
Construire une application web Tic-Tac-Toe

Construire une application web Tic-Tac-Toe

javascriptweb-development
Création d'un jeu web de Tapez - le - taupe

Création d'un jeu web de Tapez - le - taupe

javascriptweb-development