tableau des paramètres HTML

Le tableau en HTML est un langage de balisage utilisé pour présenter des données. Dans la conception de la mise en page d'une page Web, le tableau est un élément important et peut être amené à présenter un plus bel effet grâce à certains paramètres. Cet article présentera quelques techniques de création de tableaux en HTML pour aider les lecteurs à mieux maîtriser l'utilisation des tableaux.

1. Définir la bordure du tableau

En définissant la bordure du tableau, vous pouvez rendre le tableau plus clair et plus facile à distinguer pour les lecteurs. Une méthode de paramétrage courante consiste à utiliser l'attribut border. La propriété border peut définir la largeur et la couleur de la bordure du tableau. L'exemple de code est le suivant :

<table border="1">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

where border="1" signifie que la largeur de la bordure est de 1 pixel. Bien entendu, vous pouvez également définir une valeur plus grande pour augmenter la largeur de la bordure. Si vous souhaitez contrôler la couleur et le style de la bordure, vous pouvez également utiliser les propriétés CSS pour les définir.

2. Définir la largeur du tableau

Lorsqu'il y a trop de contenu dans le tableau, le tableau deviendra automatiquement plus large, mais si le conteneur où la table se trouve a une largeur limitée, cela fera déborder le contenu de la table du conteneur. Pour éviter cette situation, vous pouvez contrôler la taille du tableau en définissant la largeur du tableau. Il existe de nombreuses façons de définir la largeur du tableau. Cet article présente deux méthodes courantes.

(1) Utilisez l'attribut width. L'attribut width peut définir la largeur du tableau, qui peut être un pourcentage ou une valeur en pixels. L'exemple de code est le suivant :

<table width="50%">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

(2) Utilisez le style CSS. Vous pouvez avoir un meilleur contrôle sur la taille et le style du tableau grâce aux styles CSS. L'exemple de code est le suivant :

<style>
  table {
    width: 50%;
    border-collapse: collapse;
  }
  th,td {
    border: 1px solid black;
    padding: 5px;
  }
</style>

<table>
  <tr>
    <th>第一列</th>
    <th>第二列</th>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

Dans l'exemple de code ci-dessus, nous utilisons des styles CSS pour définir la largeur, l'espacement des bordures et le remplissage des cellules du tableau.

3. Définir l'en-tête et le corps du tableau

Dans le tableau, certaines données sont importantes et peuvent nécessiter d'être identifiées à l'aide d'en-têtes. Si l'en-tête n'est pas défini, il peut être difficile pour les lecteurs de trouver rapidement les informations dont ils ont besoin dans le tableau. Ainsi, lors de la configuration du tableau, nous devons marquer l’en-tête et le corps du tableau. L'exemple de code est le suivant :

<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>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

Dans l'exemple de code ci-dessus, nous utilisons les balises thead et tbody pour diviser le tableau en deux parties : l'en-tête du tableau et le corps du tableau.

4. Fusionner les lignes et les colonnes

Dans le tableau, si le contenu de certaines cellules est le même, vous pouvez fusionner les lignes et les colonnes pour réduire taille de la table et contenu en double. L'exemple de code est le suivant :

<table border="1">
  <tr>
    <td rowspan="2">第一列</td>
    <td>第二列</td>
    <td colspan="2">第三列</td>
  </tr>
  <tr>
    <td>第四列</td>
    <td>第五列</td>
  </tr>
</table>

Dans l'exemple de code ci-dessus, nous utilisons l'attribut rowspan pour fusionner les cellules de la première colonne en deux lignes, et l'attribut colspan pour fusionner les cellules de la troisième colonne en deux colonnes. .

5. Définissez la couleur d'arrière-plan des cellules et la couleur de la police

Si vous devez mettre en surbrillance certaines informations dans le tableau, vous pouvez définir la couleur d'arrière-plan des cellules et la couleur de la police pour atteindre l'objectif. Les paramètres couramment utilisés consistent à utiliser les styles CSS et les propriétés bgcolor. L'exemple de code est le suivant :

<style>
  td.red { background-color: red; color: white; }
  td.green { background-color: green; color: white; }
</style>

<table>
  <tr>
    <td class="red">第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td class="green">第三列</td>
    <td>第四列</td>
  </tr>
</table>

或者

<table>
  <tr>
    <td bgcolor="red" color="white">第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td bgcolor="green" color="white">第三列</td>
    <td>第四列</td>
  </tr>
</table>

Dans l'exemple de code ci-dessus, nous utilisons les styles CSS et les propriétés bgcolor/color pour définir la couleur d'arrière-plan et la couleur de la police de la cellule.

Résumé

Le tableau en HTML est un langage de balisage couramment utilisé, qui peut aider les lecteurs à mieux comprendre les données du tableau grâce à des paramètres raisonnables. Cet article présente certaines techniques de configuration des tableaux en HTML, notamment la définition des bordures et de la largeur des tableaux, des en-têtes et des corps des tableaux, la fusion des lignes et des colonnes et la définition des couleurs d'arrière-plan et de police des cellules. En maîtrisant ces compétences, nous pouvons mieux utiliser la balise table et créer une plus belle mise en page de page Web.

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!