Comment créer une page d'affichage de données à l'aide d'une disposition de tableau HTML

Comment utiliser la mise en page de tableau HTML pour créer une page d'affichage de données

Le tableau HTML est un outil de mise en page courant qui peut être utilisé pour créer des pages d'affichage de données. En utilisant rationnellement la structure et les attributs des tableaux, vous pouvez créer des pages d'affichage de données claires, faciles à lire et esthétiques.

1. Structure de base des tableaux

En HTML, les tableaux sont composés de balises table, tr et td. La balise table est utilisée pour définir un tableau, la balise tr est utilisée pour définir les lignes du tableau et la balise td est utilisée pour définir les cellules du tableau. Voici un exemple de structure de table de base :

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

Dans l'exemple ci-dessus, la barre de titre est définie à l'aide de la balise th et les lignes de données sont définies à l'aide de la balise td. La balise th est généralement utilisée dans la première ligne d'un tableau pour afficher les titres ou les noms de colonnes, tandis que la balise td est utilisée pour afficher les données d'un tableau ordinaire.

2. Définir le style du tableau

Le style du tableau peut être défini via CSS. Différents styles peuvent être définis pour les balises table, tr et td afin d'atteindre l'objectif de personnalisation du style du tableau. Voici un exemple simple :

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  
  th {
    background-color: #f0f0f0;
    font-weight: bold;
  }
</style>

Dans l'exemple ci-dessus, nous définissons la largeur de l'étiquette du tableau à 100 %, afin qu'elle remplisse la largeur du conteneur parent en utilisant l'attribut border-collapse:effondrement, la bordure du ; le tableau peut être fusionné dans A ; les balises th et td définissent le style de bordure et le remplissage ; la balise th définit également la couleur d'arrière-plan et l'audace de la police.

3. Fusionner des cellules

Dans certains cas, nous pouvons avoir besoin de fusionner des cellules pour afficher des données plus complexes. HTML fournit les attributs colspan et rowspan pour fusionner les cellules. Voici un exemple de fusion de cellules de tableau à l'aide de l'attribut colspan :

<table>
  <tr>
    <th colspan="2">合并单元格</th>
    <th>普通单元格</th>
  </tr>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
</table>

Dans l'exemple ci-dessus, nous utilisons colspan="2" pour fusionner les cellules de la barre de titre de la première ligne sur deux colonnes, et utilisons rowspan="2" faire Les cellules de la première colonne sont fusionnées sur les deux lignes.

4. Utilisez les en-têtes et les corps de tableau pour regrouper les données

Pour les grands ensembles de données, nous pouvons placer les en-têtes et les corps de tableau respectivement dans les balises Cela rend le tableau plus structuré et optimise mieux les performances lors du rendu. Voici un exemple :

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

Dans l'exemple ci-dessus, nous utilisons la balise pour définir l'en-tête du tableau, et la balise

En utilisant correctement les techniques ci-dessus, nous pouvons créer des pages d'affichage de données belles et faciles à lire à l'aide d'une disposition de tableau HTML. Bien sûr, en fonction des besoins réels, nous pouvons ajouter des styles CSS pour embellir le tableau, comme définir la couleur d'arrière-plan, le style de bordure, etc.

J'espère que le contenu ci-dessus vous sera utile pour créer une page d'affichage de données !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!