Maison > Article > interface Web > Comment puis-je éviter que mon tableau HTML ne soit mal formaté ?
Comment puis-je éviter que mon tableau HTML ne soit mal formaté ?
- WBOYavant
- 2023-08-19 21:21:241104parcourir
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
| 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. SyntaxeVoici la syntaxe du tableau HTML <table>…</table> Considérez l'exemple suivant pour mieux comprendre comment éviter un "mauvais" formatage de tableau HTML. ExempleDans 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>
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. ExempleConsidé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>
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. ExempleJetons 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>
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!