Comment configurer un tableau HTML-Questions et réponses frontales-php.cn

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

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>

Copier après la connexion

Dans le bloc de code ci-dessus, la balise

représente la création d'un tableau et l'étiquette crée le tableau, La balise et identifiée par une balise

indique la création d'une cellule. Dans un tableau, chaque cellule doit être placée dans une balise
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> Copier après la connexion Dans l'exemple ci-dessus, la balise <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> Copier après la connexion 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	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> Copier après la connexion Dans l'exemple ci-dessus, la balise	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! source：php.cn Article précédent：Conversion du format HTML Article suivant：les balises html sont échappées Déclaration de ce site Web Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn Derniers articles par auteur Qu'est-ce qu'une NullPointerException et comment y remédier ? 2024-10-22 09:46:29 De novice à codeur : votre voyage commence par les principes fondamentaux du C 2024-10-13 13:53:41 Débloquer le développement Web avec PHP : guide du débutant 2024-10-12 12:15:51 Démystifier C : un chemin clair et simple pour les nouveaux programmeurs 2024-10-11 22:47:31 Libérez votre potentiel de codage : programmation C pour les débutants absolus 2024-10-11 19:36:51 Libérez votre programmeur intérieur : C pour les débutants absolus 2024-10-11 15:50:41 Automatisez votre vie avec C : scripts et outils pour les débutants 2024-10-11 15:07:41 PHP Made Easy : vos premiers pas dans le développement Web 2024-10-11 14:21:21 Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité 2024-10-11 12:59:11 La clé du codage : libérer la puissance de Python pour les débutants 2024-10-11 12:17:31 Derniers numéros function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ... Depuis 2024-04-29 11:01:01 0 3 2250 Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ? Depuis 2024-04-23 00:22:19 0 11 2388 La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée... Depuis 2024-04-19 15:37:47 0 1 2001 Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt... Depuis 2024-04-18 23:52:34 0 1 1885 Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel Depuis 2024-04-16 10:10:18 0 0 1955 Rubriques connexes Plus> Antivirus pour téléphone portable Apple Tutoriel sur l'achat et la vente de Bitcoin sur Huobi.com Que signifie formater un téléphone mobile ? Que sont les bibliothèques d'intelligence artificielle Python ? solution d'exception mysql Quel est le format m4a ? Résumé des connaissances de base de Java Solution de rapport d'erreur de fichier SQL d'importation Mysql Recommandations populaires Qu'est-ce qu'une adresse URL Que signifie le côté Web ? Quels sont les langages de programmation ? Qu'est-ce que l'industrie informatique Que signifie l'erreur ? Tutoriels populaires Plus> Tutoriels associés Recommandations populaires Derniers cours Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1423502 Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine 4269037 Tutoriel vidéo JAVA pour débutants 2538764 Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 507648 Tutoriel d'introduction PHP base zéro 862903 Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1423502 temps d'étude Tutoriel vidéo JAVA pour débutants 2538764 temps d'étude Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 507648 temps d'étude Introduction rapide au développement web front-end 215884 temps d'étude Maîtrisez les didacticiels vidéo PS à partir de zéro 890615 temps d'étude [Web front-end] Démarrage rapide de Node.js 7482 temps d'étude Collection complète de cours full-stack de développement Web étranger 5986 temps d'étude Aller au langage pratique GraphQL 4944 temps d'étude Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape 699 temps d'étude Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures 24841 temps d'étude Derniers téléchargements Plus> effets Web Code source du site Web Matériel du site Web Modèle frontal [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3 [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5 [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3 [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG) [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG) [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS) [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG) [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG) [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS) [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG) [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！ À propos de nous Clause de non-responsabilité Sitemap © php.cn All rights reserved

indique la création d'une cellule. Dans un tableau, chaque cellule doit être placée dans une balise

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>

Copier après la connexion

Dans l'exemple ci-dessus, la balise <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>

Copier après la connexion

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

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>

Copier après la connexion

Dans l'exemple ci-dessus, la balise

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!

source：php.cn

Article précédent：Conversion du format HTML Article suivant：les balises html sont échappées

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur