Învățarea HTML Partea 23: Utilizarea etichetelor Col, Colgroup și Subtitrare în tabele HTML
În discuția anterioară am explicat despre utilizarea elementelor thead, pop și tfoot pentru a grupa conținutul celulelor într-un tabel.
În această umectare, voi explicadespre modul de utilizare a etichetelor <colgroup>, <col> și <caption>. În cazul în care etichetele <colorgroup> și <col> se află în perechea de etichete <table> ... </table> înainte de a scrie eticheta <tr>.
Pe scurt, se folosește eticheta <colgroup>grupând coloane într-un tabel, eticheta <col> este utilizată pentru a afișa coloanele dintr-un tabel în timp ce eticheta <caption> este utilizată pentru a scrie titlul într-un tabel. Pentru explicații suplimentare, să ne uităm la explicația de mai jos:
Etichete col și grup
Eticheta <colgroup> este folosită pentru a indica agrupul de coloane din tabelul în care elementul <tabel> este părintele. Această etichetă este de obicei folosită pentru a stila anumite coloane specifice din tabel în ansamblu. Deci, nu trebuie să repetați același stil de format în fiecare celulă dintr-un tabel.
În eticheta <colgroup> se pot scrie și etichete<col> care arată coloanele dintr-un tabel. În plus, această etichetă <col> poate fi scrisă mai mult de una care indică ordinea coloanelor grupului. Eticheta <col> este scrisă în elementul <table> după elementul <caption> și înaintea elementelor <thead>, <toot>, <tbody> și <tr>.
Puteți utiliza eticheta <col> pentru a furnizaProprietăți de stil diferite pentru fiecare coloană dintr-un tabel în ansamblu, astfel încât nu mai trebuie să rescrieți în mod repetat același stil pentru fiecare celulă din tabel. Următorul este un exemplu de cod pentru utilizarea și scrierea tagului <colgroup> și a tagului <col> în 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>După ce codul HTML de mai sus este rulat în browser, acesta va apărea după cum se arată mai jos:
Etichetă pentru legendă
Cuvântul „legendă” înseamnă un titlu buntitlul paginii, capitolul sau altul. În general, eticheta de legendă este utilizată pentru a adăuga un antet (titlu) la un tabel care începe cu utilizarea elementului <table>. Elementul <caption> este declarat folosind perechea de taguri <caption> ... </ Legendă>.
Eticheta <caption> este scrisă în elementul <table>direct înainte de celelalte elemente, cu alte cuvinte, eticheta <caption> este situată deasupra unui tabel și este centrată implicit, dar puteți schimba poziția sa cu proprietatea de aliniere a textului în CSS pentru alinierea textului și a proprietății din partea legendelor pentru setarea celor de mai sus sau partea de jos a mesei.
<!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>După ce codul HTML de mai sus este rulat în browser, acesta va apărea după cum se arată mai jos:
Din imaginea de mai sus, legendă în primul tabelafișat implicit. Legenda din cel de-al doilea tabel este afișată cu proprietatea aliniere text: stânga, în timp ce subtitrarea din cel de-al treilea tabel este afișată cu proprietatea side-side: bottom.
