Apprendre HTML Partie 23: Utilisation des balises Col, Colgroup et Caption dans les tableaux HTML
Dans la discussion précédente, j'ai expliqué l'utilisation des éléments thead, tbody et tfoot pour regrouper le contenu des cellules dans un tableau.
Dans ce mouillage, je vais vous expliquersur l'utilisation des balises <colgroup>, <col> et <caption>. Où les balises <colorgroup> et <col> sont à l'intérieur de la paire de balises <table> ... </table> avant d'écrire la balise <tr>.
En bref, la balise <colgroup> est utilisée pourregroupant des colonnes dans un tableau, la balise <col> est utilisée pour afficher les colonnes dans un tableau tandis que la balise <caption> est utilisée pour écrire le titre dans un tableau. Pour plus d'explications, regardons l'explication ci-dessous:
Balises Col et Colgroup
La balise <colgroup> est utilisée pour indiquer unle groupe de colonnes de la table où l'élément <table> est le parent. Cette balise est généralement utilisée pour styliser certaines colonnes spécifiques dans le tableau dans son ensemble. Vous n'avez donc pas besoin de répéter le même style de format dans chaque cellule d'un tableau.
Dans la balise <colgroup>, les balises peuvent également être écrites<col> qui montre les colonnes dans un tableau. De plus, cette balise <col> peut être écrite plusieurs fois indiquant l'ordre des colonnes du colgroup. La balise <col> est écrite à l'intérieur de l'élément <table> après l'élément <caption> et avant les éléments <thead>, <tfoot>, <tbody> et <tr>.
Vous pouvez utiliser la balise <col> pour fournirDifférentes propriétés de style pour chaque colonne d'un tableau dans son ensemble, vous n'avez donc plus besoin de réécrire le même style pour chaque cellule du tableau à plusieurs reprises. Voici un exemple de code pour utiliser et écrire la balise <colgroup> et la balise <col> en HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Col dan Colgroup</title>
</head>
<body>
<table border="1">
<colgroup>
<col style="background-color:pink; border:2px solid black;">
<col span="2" style="background-color:#00FFFF;">
</colgroup>
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama </th>
</tr>
<tr>
<td>1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td>2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
</table>
</body>
</html>Une fois le code HTML ci-dessus exécuté dans le navigateur, il apparaîtra comme indiqué ci-dessous:
Balise de légende
Le mot "légende" signifie un bon titretitre de page, chapitre ou autre. En général, la balise caption est utilisée pour ajouter un en-tête (titre) à une table qui commence par l'utilisation de l'élément <table>. L'élément <caption> est déclaré à l'aide de la paire de balises <caption> ... </caption>.
La balise <caption> est écrite à l'intérieur de l'élément <table>directement avant les autres éléments, en d'autres termes, la balise <caption> est située au-dessus d'un tableau et est centrée par défaut, mais vous pouvez modifier sa position avec la propriété text-align en CSS pour l'alignement du texte et la propriété caption-side pour définir ce qui précède ou bas de la table.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Caption di HTML</title>
<style type="text/css">
table,th, td{
border: 1px solid black;
border-collapse: collapse; }
table{ width: 30%; }
th, td{ text-align:center; }
.caption{ text-align: left; }
.caption1{ caption-side: bottom; }
</style>
</head>
<body>
<table>
<caption>Daftar Absensi Kelas X</caption>
<tr>
<th>Nama</th>
<th>NIM</th>
</tr>
<tr>
<td>Ridayanti</td>
<td>071401001</td>
</tr>
<tr>
<td>Ahmad Zulham</td>
<td>071401002</td>
</tr>
</table><br>
<table>
<caption class="caption">Daftar Absensi Kelas X</caption>
<tr>
<th>Nama</th>
<th>NIM</th>
</tr>
<tr>
<td>Ridayanti</td>
<td>071401001</td>
</tr>
<tr>
<td>Ahmad Zulham</td>
<td>071401002</td>
</tr>
</table><br>
<table>
<caption class="caption1">Daftar Absensi Kelas X</caption>
<tr>
<th>Nama</th>
<th>NIM</th>
</tr>
<tr>
<td>Ridayanti</td>
<td>071401001</td>
</tr>
<tr>
<td>Ahmad Zulham</td>
<td>071401002</td>
</tr>
</table>
</body>
</html>Une fois le code HTML ci-dessus exécuté dans le navigateur, il apparaîtra comme indiqué ci-dessous:
De l'image ci-dessus, légende dans le premier tableauaffiché par défaut. La légende du deuxième tableau est affichée avec la propriété text-align: left, tandis que la légende du troisième tableau est affichée avec la propriété caption-side: bottom.
