HTML lernen Teil 23: Verwendung von Col-, Colgroup- und Caption-Tags in HTML-Tabellen
In der vorherigen Diskussion habe ich die Verwendung von Thead-, Tbody- und Tfoot-Elementen zum Gruppieren von Zellinhalten in einer Tabelle erläutert.
In dieser Benetzung werde ich erklärenInformationen zur Verwendung der Tags <colgroup>, <col> und <caption>. Wo sich die Tags <colorgroup> und <col> innerhalb des <table> -Tag-Paares befinden ... </ table>, bevor das <tr> -Tag geschrieben wird.
Kurz gesagt, das Tag <colgroup> wird für verwendetBeim Gruppieren von Spalten in einer Tabelle werden mit dem <col> -Tag die Spalten in einer Tabelle angezeigt, während mit dem <caption> -Tag der Titel in eine Tabelle geschrieben wird. Schauen wir uns zur weiteren Erklärung die folgende Erklärung an:
Col- und Colgroup-Tags
Das <colgroup> -Tag wird verwendet, um a anzugebenDie Gruppe von Spalten in der Tabelle, in der das <table> -Element das übergeordnete Element ist. Dieses Tag wird normalerweise verwendet, um bestimmte Spalten in der gesamten Tabelle zu formatieren. Sie müssen also nicht in jeder Zelle einer Tabelle denselben Formatstil wiederholen.
Innerhalb des <colgroup> -Tags können auch Tags geschrieben werden<col> zeigt die Spalten in einer Tabelle an. Darüber hinaus kann dieses <col> -Tag mehr als eins geschrieben werden, um die Spaltenreihenfolge der Spaltengruppe anzugeben. Das <col> -Tag wird innerhalb des <table> -Elements nach dem <caption> -Element und vor den <thead> -, <tfoot> -, <tbody> - und <tr> -Elementen geschrieben.
Sie können das <col> -Tag verwenden, um bereitzustellenUnterschiedliche Stileigenschaften für jede Spalte in einer Tabelle als Ganzes, sodass Sie nicht mehr für jede Zelle in der Tabelle wiederholt denselben Stil neu schreiben müssen. Das folgende Beispiel zeigt einen Code zum Verwenden und Schreiben des <colgroup> -Tags und des <col> -Tags in 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>Nachdem der obige HTML-Code im Browser ausgeführt wurde, wird er wie folgt angezeigt:
Beschriftungs-Tag
Das Wort "Bildunterschrift" bedeutet einen guten TitelSeitentitel, Kapitel oder anderes. Im Allgemeinen wird das Untertitel-Tag verwendet, um einer Tabelle einen Header (Titel) hinzuzufügen, der mit der Verwendung des Elements <table> beginnt. Das <caption> -Element wird mit dem <caption> -Tagpaar deklariert ... </ caption>.
Das <caption> -Tag wird in das <table> -Element geschriebenMit anderen Worten, direkt vor den anderen Elementen befindet sich das <caption> -Tag über einer Tabelle und ist standardmäßig zentriert. Sie können jedoch seine Position mit der Eigenschaft text-align in CSS für die Textausrichtung und der Eigenschaft caption-side zum Festlegen des obigen oder ändern Ende der Tabelle.
<!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>Nachdem der obige HTML-Code im Browser ausgeführt wurde, wird er wie folgt angezeigt:
Aus dem Bild oben die Beschriftung in der ersten Tabellewird standardmäßig angezeigt. Die Beschriftung in der zweiten Tabelle wird mit der Eigenschaft text-align: left angezeigt, während die Beschriftung in der dritten Tabelle mit der Eigenschaft caption-side: bottom angezeigt wird.
