HTML apgūšana 23. daļa: Col, Colgroup un Parakstu tagu izmantošana HTML tabulās
Iepriekšējā diskusijā esmu izskaidrojis par thead, tbody un tfoot elementu izmantošanu šūnu satura grupēšanai tabulā.
Šajā mitrināšanā es paskaidrošupar to, kā izmantot tagus <colgroup>, <col> un <caption>. Kur <colorgroup> un <col> tagi atrodas <table> tagu pāra iekšpusē ... </table>, pirms rakstīt <tr> tagu.
Īsāk sakot, tiek izmantots tags <colgroup>grupējot tabulas tabulas, tagu <col> izmanto, lai parādītu tabulas kolonnas, bet tagu <caption> izmanto, lai tabulā ierakstītu virsrakstu. Lai iegūtu sīkāku skaidrojumu, apskatīsim tālāk sniegto skaidrojumu:
Col un colgroup tagi
Tagu <colgroup> izmanto, lai norādītu akolonnu grupa tabulā, kurā elements <table> ir vecāks. Šo tagu parasti izmanto, lai veidotu noteiktas konkrētas kolonnas tabulā kopumā. Tātad, jums nav jāatkārto tas pats formāta stils katrā tabulā.
Tagā <colgroup> var arī rakstīt tagus<col>, kas parāda tabulas kolonnas. Turklāt šo <col> tagu var uzrakstīt vairāk nekā vienu, kas norāda kolgrupas kolonnu secību. Tagu <col> raksta <table> elementa iekšpusē aiz elementa <caption> un pirms <thead>, <tofot>, <tbody> un <tr> elementiem.
Lai nodrošinātu, varat izmantot tagu <col>Atšķirīgas stila īpašības katrai tabulas kolonnai kopumā, tāpēc jums vairs nevajadzēs atkārtoti rakstīt to pašu stilu katrai tabulas šūnai. Šis ir piemērs koda <colgro>> un <col> taga lietošanai un rakstīšanai HTML HTML kodā:
<!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>Pēc HTML koda palaišanas pārlūkā tas parādīsies, kā parādīts zemāk:
Parakstu tags
Vārds "uzraksts" nozīmē labu nosaukumulapas nosaukums, nodaļa vai cits. Parasti parakstu tagu izmanto, lai galvenei (virsrakstam) pievienotu tabulu, kas sākas ar elementa <table> izmantošanu. Elements <caption> tiek deklarēts, izmantojot <caption> tagu pāri ... </caption>.
Tags <caption> ir rakstīts elementa <table> iekšpusētieši pirms pārējiem elementiem, citiem vārdiem sakot, tags <caption> atrodas virs tabulas un ir noklusējuma centrā, taču jūs varat mainīt tā pozīciju ar teksta līdzināšanas īpašību CSS teksta izlīdzināšanai un parakstu puses rekvizītu, lai iestatītu iepriekš minēto vai tabulas apakšdaļa.
<!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>Pēc HTML koda palaišanas pārlūkā tas parādīsies, kā parādīts zemāk:
Iepriekš redzamajā attēlā ir uzraksts pirmajā tabulātiek parādīts pēc noklusējuma. Paraksti otrajā tabulā tiek parādīti ar rekvizītu izlīdzināt: pa kreisi, savukārt trešajā tabulā paraksts tiek parādīts ar parakstu puses: apakšējo rekvizītu.
