Comment configurer un tableau HTML

Les tableaux HTML sont l'un des éléments couramment utilisés dans le développement Web. Grâce aux tableaux, les données peuvent être présentées aux utilisateurs sous une forme claire et organisée, ce qui facilite l'obtention d'informations par les utilisateurs.

Dans cet article, nous expliquerons comment créer un tableau en HTML et comment définir les propriétés du tableau, notamment les bordures du tableau, l'alignement des cellules, les en-têtes du tableau, etc. Commençons à apprendre !

1. Créer un tableau

En HTML, utilisez la balise f5d188ed2c074f8b944552db028f98a1 Voici un exemple simple montrant comment créer un tableau avec seulement 3 lignes et 2 colonnes :

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>

Dans le bloc de code ci-dessus, la balise f5d188ed2c074f8b944552db028f98a1 représente la création d'un tableau et l'étiquette a34de1251f0d9fe1e645927f19a896e8 crée le tableau, La balise b6c5a531a458a2e790c1fd6421739d1c indique la création d'une cellule. Dans un tableau, chaque cellule doit être placée dans une balise a34de1251f0d9fe1e645927f19a896e8 et identifiée par une balise b6c5a531a458a2e790c1fd6421739d1c

2. Définissez la bordure du tableau

Si vous souhaitez ajouter une bordure autour du tableau, vous devez utiliser des styles CSS pour définir les propriétés de bordure du tableau. Voici un exemple de définition d'une bordure bleue :

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>

Dans l'exemple ci-dessus, la balise c9ccee2e6ea535a969eb3f532ad9fe89 est utilisée pour définir le style CSS. L'attribut de bordure du tableau est défini sur 1 pixel de large et bleu, tandis que l'attribut de bordure de la cellule est également bleu et 1 pixel de large. Cela vous permettra d'ajouter des bordures au tableau.

3. Définissez l'alignement des cellules

Si vous souhaitez que le contenu de la cellule soit aligné, vous pouvez utiliser l'attribut text-align du style CSS. Voici un exemple montrant comment centrer le contenu d'une cellule :

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>

Dans l'exemple ci-dessus, la propriété text-align du style CSS est appliquée à toutes les cellules. Cela signifie que tout le contenu des cellules du tableau sera centré.

4. Définissez l'en-tête

Dans le tableau, vous pouvez utiliser la balise b4d429308760b6c2d20d6300079ed38e pour envelopper le contenu de la première rangée de cellules et la marquer comme en-tête. À ce stade, la cellule sera en gras pour indiquer qu’il s’agit d’un en-tête. Voici un exemple montrant comment ajouter un en-tête :

<style>
  th {
    background-color: gray;
    color: white;
    font-weight: bold;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

Dans l'exemple ci-dessus, la balise b4d429308760b6c2d20d6300079ed38e Les styles CSS sont utilisés pour modifier la couleur, l'arrière-plan, la taille de la police et d'autres propriétés de l'en-tête du tableau afin de le distinguer visuellement du contenu de la cellule.

Résumé

Grâce à l'introduction ci-dessus, je pense que les lecteurs ont compris l'utilisation de base des tableaux HTML et comment modifier les tableaux via les styles CSS. Enfin, je voudrais rappeler à tous que dans le développement réel, les tables utilisent souvent JavaScript ou d'autres technologies pour interagir avec le serveur, ce qui fait de la table un outil plus utile.

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!