HTML

Utilisation de <tr> pour les lignes, <th> pour les en-têtes et <td> pour les cellules

Utilisation de <tr> pour les lignes, <th> pour les en-têtes et <td> pour les cellules


Dans un tableau HTML, la balise <tr> est utilisée pour définir chaque ligne du tableau, <th> est utilisée pour définir les en-têtes de colonne et <td> est utilisée pour définir les cellules de données. Voici comment les utiliser :


1. Utilisation de <tr> pour les lignes :

  • La balise <tr> (table row) est utilisée pour définir chaque ligne du tableau.
  • Chaque balise <tr> englobe les cellules de données <td> ou les en-têtes de colonne <th>.
  • Exemple :


<table>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
    <td>Cellule 3</td>
  </tr>
  <tr>
    <td>Cellule 4</td>
    <td>Cellule 5</td>
    <td>Cellule 6</td>
  </tr>
</table>


2. Utilisation de <th> pour les en-têtes de colonne :


  • La balise <th> (table header) est utilisée pour définir les en-têtes de colonne du tableau.
  • Ces en-têtes sont généralement affichés en gras et centrés par défaut.
  • Exemple :


<table>
  <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
    <th>En-tête 3</th>
  </tr>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
    <td>Cellule 3</td>
  </tr>
</table>


3. Utilisation de <td> pour les cellules de données :


  • La balise <td> (table data) est utilisée pour définir les cellules de données du tableau.
  • Ces cellules contiennent les données réelles du tableau.
  • Exemple :


<table>
  <tr>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
    <td>Donnée 3</td>
  </tr>
  <tr>
    <td>Donnée 4</td>
    <td>Donnée 5</td>
    <td>Donnée 6</td>
  </tr>
</table>


Conseils d'utilisation :


  • Utilisez <tr> pour chaque ligne du tableau, <th> pour les en-têtes de colonne et <td> pour les cellules de données.
  • Utilisez des attributs comme colspan ou rowspan pour fusionner des cellules si nécessaire.
  • N'utilisez pas les tableaux pour la mise en page, préférez les CSS pour cela.


Conclusion :


En utilisant les balises <tr> pour les lignes, <th> pour les en-têtes et <td> pour les cellules dans votre fichier HTML, vous pouvez créer des tableaux bien structurés pour afficher des données tabulaires de manière claire et organisée. Assurez-vous d'utiliser ces balises correctement pour garantir une meilleure accessibilité et une meilleure présentation de vos données tabulaires.

979 vues
Posté le 19 février 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
2 719 vues
Nesting : Organiser le code CSS en utilisant le nesting pour des sélecteurs imbriqués
Nesting en SASS : Organiser le code CSS avec des sélecteurs imbriqués1. Utilisation du nesting :En SASS, vous pouvez organiser votre code CSS en utilisant le nesting pour des sélecteurs...
Sass
9 186 vues
Introduction
Je vous propose un cours afin de concevoir votre premier site de A à Z incluant un espace membre, un forum & un blog 😎Les objectif de ce cours :L'objectif et de ce familiariser avec les...
Créer son site
1 051 vues
Variables et types de données
Variables et Types de Données en JavaScript1. Variables :Une variable en JavaScript est un conteneur pour stocker des données. Vous pouvez utiliser des variables pour stocker différentes valeurs...
JS
845 vues
Passage de paramètres
Passage de Paramètres dans les Fonctions en JavaScriptLorsque vous appelez une fonction en JavaScript, vous pouvez lui transmettre des valeurs en utilisant des paramètres. Ces paramètres sont des...
JS
731 vues
Vue d'ensemble de frameworks populaires comme React, Angular, et Vue.js
Vue d'ensemble des Frameworks Populaires : React, Angular et Vue.jsLes frameworks JavaScript tels que React, Angular et Vue.js sont largement utilisés pour le développement d'applications web...
JS
1 872 vues
Utilisation de la propriété display pour contrôler le type d'affichage des éléments
La propriété display en CSS permet de contrôler le type d'affichage d'un élément. Elle détermine comment l'élément est rendu dans le flux de la page. Il existe plusieurs valeurs pour la...
CSS
2 213 vues
Afficher les messages dans l'ordre
Dans cette vidéo on va personnaliser (un peu) l'interface des conversations avec du CSS.Nous allons également remettre les messages dans l'ordre et lors de la réception du message par le...
Créer son site de rencontres
3 132 vues
Personnaliser sa bare de menu avec du CSS
Après avoir modifié notre barre de menu nous allons maintenant personnaliser notre barre de menu avec du CSS afin de la rendre plus agréable à regarder.Nous allons pour ça ajouter un nouveau...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...