Table des matières
Tableau HTML
Syntaxe
Exemple
Maison interface Web tutoriel HTML Comment puis-je éviter que mon tableau HTML ne soit mal formaté ?

Comment puis-je éviter que mon tableau HTML ne soit mal formaté ?

Aug 19, 2023 pm 09:21 PM
编程 html表格 Erreur de format

Comment puis-je éviter que mon tableau HTML ne soit mal formaté ?

Il existe une propriété CSS bien prise en charge mais peu connue et extrêmement utile pour les tableaux. Il modifie la façon dont les tableaux sont affichés afin que vous puissiez avoir une présentation plus fiable et cohérente. Un formatage approprié des tableaux est bénéfique car il rend la page Web plus conviviale et aide les utilisateurs à comprendre plus clairement les informations contenues dans le tableau.

Cet article vous apprendra comment éviter les « erreurs » de formatage des tableaux en HTML. Avant de plonger dans cet article, jetons un coup d’œil rapide aux tableaux en HTML.

Tableau HTML

Les tableaux HTML sont créés à l'aide de la balise

, où la balise est utilisée pour créer des lignes de tableau et la balise
Les éléments sous sont par défaut du texte normal et sont alignés à gauche.

Les tableaux HTML permettent aux auteurs de pages Web d'organiser le texte, les images, les liens, d'autres tableaux et d'autres données dans des cellules en lignes et en colonnes.

Syntaxe

Voici la syntaxe du tableau HTML

<table>…</table>
Copier après la connexion

Considérez l'exemple suivant pour mieux comprendre comment éviter un "mauvais" formatage de tableau HTML.

Exemple

Dans l'exemple ci-dessous, nous utilisons CSS en conjonction avec la hauteur de tableau mentionnée précédemment pour éviter un « mauvais » formatage du tableau.

<!DOCTYPE html>
<html>
   <body>
      <style>
      table, td {
         width: 100%;
         border: 2px solid #82E0AA ;
         border-collapse: collapse;
      }
      td {
         height: 52px;
         width: 52%;
      }
      td[rowspan="2"] {
         height: 110px;
      }
      </style>
      <table>
         <tbody>
            <tr>
               <td colspan="2">1.MSD</td>
            </tr>
            <tr>
               <td rowspan="2">2.VIRAT</td>
               <td>3.YUVI</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>
Copier après la connexion

Lorsque le script est exécuté, il générera une sortie contenant un tableau rempli de données au format correct pour être affiché sur la page Web.

Exemple

Considérons l'exemple suivant, nous voulons avoir une image comme image de fond d'un tableau, nous allons l'ajouter en utilisant CSS pour éviter les "bugs" avec le format du tableau.

<!DOCTYPE html>
<html>
   <body>
      <table border = "2" bordercolor = "#BB8FCE" background = "https://www.tutorialspoint.com/images/asp.net_mvc_icon.svg">
         <tr>
            <th>Stream</th>
            <th>Course</th>
            <th>Amount</th>
         </tr>
         <tr>
            <td rowspan = "2">Technical</td>
            <td>HTML</td><td>6000</td>
         </tr>
         <tr>
            <td>JAVA</td>
         </tr>
      </table>
   </body>
</html>
Copier après la connexion

Après avoir exécuté le code ci-dessus, la fenêtre de sortie apparaîtra montrant l'image contenant les données et ajoutée comme arrière-plan au tableau affiché sur la page Web.

Exemple

Jetons un coup d'œil à ce qui suit, nous utiliserons la hauteur et la largeur du tableau pour créer le tableau dans le format souhaité afin d'éviter un "mauvais" formatage du tableau.

<!DOCTYPE html>
<html>
   <body>
      <table border = "2" bordercolor="#CCCCFF" width = "300" height = "100">
         <tr>
            <td>1</td>
            <td>2</td>
         </tr>
         <tr>
            <td>3</td>
            <td>4</td>
         </tr>
      </table>
   </body>
</html>
Copier après la connexion

Lorsque le script est exécuté, il génère une sortie contenant un tableau dessiné sur la page Web avec CSS appliqué dans le format souhaité.

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Supprimez les valeurs en double du tableau PHP à l'aide d'expressions régulières Supprimez les valeurs en double du tableau PHP à l'aide d'expressions régulières Apr 26, 2024 pm 04:33 PM

Comment supprimer les valeurs en double du tableau PHP à l'aide d'expressions régulières : utilisez l'expression régulière /(.*)(.+)/i pour faire correspondre et remplacer les doublons. Parcourez les éléments du tableau et vérifiez les correspondances à l'aide de preg_match. S'il y a une correspondance, ignorez la valeur ; sinon, ajoutez-la à un nouveau tableau sans valeurs en double.

A quoi sert la programmation et à quoi sert de l'apprendre ? A quoi sert la programmation et à quoi sert de l'apprendre ? Apr 28, 2024 pm 01:34 PM

1. La programmation peut être utilisée pour développer divers logiciels et applications, notamment des sites Web, des applications mobiles, des jeux et des outils d'analyse de données. Ses domaines d'application sont très larges, couvrant presque tous les secteurs, notamment la recherche scientifique, la santé, la finance, l'éducation, le divertissement, etc. 2. L'apprentissage de la programmation peut nous aider à améliorer nos compétences en résolution de problèmes et nos capacités de réflexion logique. Lors de la programmation, nous devons analyser et comprendre les problèmes, trouver des solutions et les traduire en code. Cette façon de penser peut cultiver nos capacités analytiques et abstraites et améliorer notre capacité à résoudre des problèmes pratiques.

Créez des applications basées sur un navigateur avec Golang Créez des applications basées sur un navigateur avec Golang Apr 08, 2024 am 09:24 AM

Créez des applications basées sur un navigateur avec Golang Golang se combine avec JavaScript pour créer des expériences frontales dynamiques. Installez Golang : visitez https://golang.org/doc/install. Configurez un projet Golang : créez un fichier appelé main.go. Utilisation de GorillaWebToolkit : ajoutez le code GorillaWebToolkit pour gérer les requêtes HTTP. Créer un modèle HTML : créez index.html dans le sous-répertoire des modèles, qui est le modèle principal.

Collection d'énigmes de programmation C++ : stimule la réflexion et améliore les compétences en programmation Collection d'énigmes de programmation C++ : stimule la réflexion et améliore les compétences en programmation Jun 01, 2024 pm 10:26 PM

Les énigmes de programmation C++ couvrent les concepts d'algorithme et de structure de données tels que la séquence de Fibonacci, la factorielle, la distance de Hamming, les valeurs maximales et minimales des tableaux, etc. En résolvant ces énigmes, vous pouvez consolider vos connaissances en C++ et améliorer la compréhension des algorithmes et vos compétences en programmation.

La clé du codage : libérer la puissance de Python pour les débutants La clé du codage : libérer la puissance de Python pour les débutants Oct 11, 2024 pm 12:17 PM

Python est un langage d'introduction à la programmation idéal pour les débutants grâce à sa facilité d'apprentissage et ses fonctionnalités puissantes. Ses bases incluent : Variables : utilisées pour stocker des données (nombres, chaînes, listes, etc.). Type de données : Définit le type de données dans la variable (entier, virgule flottante, etc.). Opérateurs : utilisés pour les opérations mathématiques et les comparaisons. Flux de contrôle : contrôlez le flux d'exécution du code (instructions conditionnelles, boucles).

Résolution de problèmes avec Python : débloquez des solutions puissantes en tant que codeur débutant Résolution de problèmes avec Python : débloquez des solutions puissantes en tant que codeur débutant Oct 11, 2024 pm 08:58 PM

Python permet aux débutants de résoudre des problèmes. Sa syntaxe conviviale, sa bibliothèque complète et ses fonctionnalités telles que les variables, les instructions conditionnelles et les boucles permettent un développement de code efficace. De la gestion des données au contrôle du flux du programme et à l'exécution de tâches répétitives, Python fournit

Obtenez des modules Go rapidement et facilement avec Go Get Obtenez des modules Go rapidement et facilement avec Go Get Apr 07, 2024 pm 09:48 PM

Grâce à GoGet, vous pouvez obtenir rapidement et facilement des modules Go. Les étapes sont les suivantes : Exécutez dans le terminal : goget[module-path], où module-path est le chemin du module. GoGet télécharge automatiquement le module et ses dépendances. L'emplacement de l'installation est spécifié par la variable d'environnement GOPATH.

Démystifier C : un chemin clair et simple pour les nouveaux programmeurs Démystifier C : un chemin clair et simple pour les nouveaux programmeurs Oct 11, 2024 pm 10:47 PM

C est un choix idéal pour les débutants qui souhaitent apprendre la programmation système. Il contient les composants suivants : fichiers d'en-tête, fonctions et fonctions principales. Un simple programme C capable d'imprimer "HelloWorld" a besoin d'un fichier d'en-tête contenant la déclaration de fonction d'entrée/sortie standard et utilise la fonction printf dans la fonction principale pour imprimer. Les programmes C peuvent être compilés et exécutés à l'aide du compilateur GCC. Après avoir maîtrisé les bases, vous pouvez passer à des sujets tels que les types de données, les fonctions, les tableaux et la gestion des fichiers pour devenir un programmeur C compétent.

See all articles