Comment puis-je éviter que mon tableau HTML ne soit mal formaté ?-tutoriel HTML-php.cn

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

WBOY

Libérer： 2023-08-19 21:21:24

avant

1141 Les gens l'ont consulté

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!