HTML'yi Öğrenme Bölüm 23: HTML Tablolarında Col, Colgroup ve Altyazı Etiketlerinin Kullanımı
Önceki tartışmada hücre içeriğini bir tabloda gruplamak için baş, tbody ve tfoot elemanlarının kullanımını açıklamıştım.
Bu ıslanmada açıklayacağım<COLGROUP> nasıl kullanılacağı hakkında, <col> ve <caption>. Burada <colorgroup> ve <col> olan çiftleri <table> içinde ... </ table> etiketi <tr> yazmadan önce.
Kısacası, <colgroup> etiketisütunları bir tabloda gruplandırırken, <col> etiketi bir tablodaki sütunları göstermek için kullanılırken, <caption> etiketi bir tabloya başlık yazmak için kullanılır. Daha fazla açıklama için aşağıdaki açıklamaya bakalım:
Col ve colgroup etiketleri
<colgroup> etiketi,<table> öğesinin üst öğe olduğu tablodaki sütun grubu. Bu etiket genellikle tablodaki belirli sütunları bir bütün olarak biçimlendirmek için kullanılır. Bu nedenle, tablodaki her hücrede aynı biçim stilini tekrarlamanız gerekmez.
<colgroup> etiketi içinde, etiketler de yazılabilirTablodaki sütunları gösteren <col>. Ayrıca, bu <col> etiketi, colgroup'un sütun sırasını gösteren birden fazla yazılabilir. <col> etiketi <table> öğesinin içine <caption> öğesinden sonra ve <thead>, <tfoot>, <tbody> ve <tr> öğelerinden önce yazılır.
<col> etiketini kullanarakBir tablodaki her sütun için bir bütün olarak farklı stil özellikleri sayesinde, tablodaki her hücre için aynı stili tekrar tekrar yazmanıza gerek kalmaz. HTML'de <colgroup> etiketini ve <col> etiketini kullanmak ve yazmak için bir kod örneği:
<!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>Yukarıdaki HTML kodu tarayıcıda çalıştırıldıktan sonra, aşağıda gösterildiği gibi görünecektir:
Altyazı etiketi
"Altyazı" kelimesi iyi bir başlık anlamına gelirsayfa başlığı, bölüm veya diğer. Genel olarak altyazı etiketi, <table> öğesinin kullanımı ile başlayan bir tabloya başlık (başlık) eklemek için kullanılır. <caption> öğesi, <caption> etiket çifti kullanılarak bildirilir ... </ Altyazı>.
<caption> etiketi <table> öğesinin içine yazılırdiğer öğelerin hemen önünde, diğer bir deyişle <caption> etiketi tablonun üzerinde bulunur ve varsayılan olarak ortalanır ancak konumunu metin hizalaması için CSS'deki metin hizalama özelliğiyle ve yukarıdakileri ayarlamak için altyazı tarafı özelliğiyle veya tablonun alt kısmında.
<!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>Yukarıdaki HTML kodu tarayıcıda çalıştırıldıktan sonra, aşağıda gösterildiği gibi görünecektir:
Yukarıdaki resimden, ilk tablodaki resim yazısıvarsayılan olarak görüntülenir. İkinci tablodaki resim yazısı text-align: left özelliği ile, üçüncü tablodaki resim yazısı ise caption-side: bottom özelliğiyle görüntülenir.
