การเรียนรู้ HTML ตอนที่ 23: การใช้แท็ก Col, Colgroup และคำบรรยายภาพในตาราง HTML

ในการสนทนาก่อนหน้านี้ฉันได้อธิบายเกี่ยวกับการใช้ thead, tbody และองค์ประกอบ tfoot เพื่อจัดกลุ่มเนื้อหาของเซลล์ในตาราง

ในการเปียกนี้ฉันจะอธิบายเกี่ยวกับวิธีใช้แท็ก <colgroup>, <col> และ <caption> ตำแหน่งที่แท็ก <colorgroup> และ <col> อยู่ภายในแท็ก <table> จับคู่ ... </table> ก่อนเขียนแท็ก <tr>

กล่าวโดยย่อคือแท็ก <colgroup>การจัดกลุ่มคอลัมน์ในตารางจะใช้แท็ก <col> เพื่อแสดงคอลัมน์ในตารางในขณะที่แท็ก <caption> ใช้เพื่อเขียนหัวเรื่องในตาราง สำหรับคำอธิบายเพิ่มเติมให้ดูที่คำอธิบายด้านล่าง:

แท็กคอลัมน์และ colgroup

แท็ก <colgroup> ใช้เพื่อระบุ aกลุ่มของคอลัมน์ในตารางที่องค์ประกอบ <table> เป็นผู้ปกครอง แท็กนี้มักจะใช้ในการกำหนดสไตล์คอลัมน์เฉพาะบางอย่างในตารางโดยรวม ดังนั้นคุณไม่จำเป็นต้องทำซ้ำรูปแบบลักษณะเดียวกันในทุกเซลล์ในตาราง

ภายในแท็ก <colgroup> สามารถเขียนแท็กได้<col> ซึ่งแสดงคอลัมน์ในตาราง นอกจากนี้แท็ก <col> นี้สามารถเขียนได้มากกว่าหนึ่งรายการเพื่อระบุลำดับคอลัมน์ของ colgroup แท็ก <col> ถูกเขียนภายในองค์ประกอบ <table> หลังองค์ประกอบ <caption> และก่อนองค์ประกอบ <thead>, <tfoot>, <tbody> และ <tr>

คุณสามารถใช้แท็ก <col> เพื่อจัดทำคุณสมบัติสไตล์ที่แตกต่างกันสำหรับแต่ละคอลัมน์ในตารางโดยรวมดังนั้นคุณไม่จำเป็นต้องเขียนสไตล์เดียวกันสำหรับแต่ละเซลล์ในตารางซ้ำ ๆ ต่อไปนี้เป็นตัวอย่างของรหัสสำหรับการใช้และการเขียนแท็ก <colgroup> และแท็ก <col> ใน 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>

หลังจากเรียกใช้โค้ด HTML ข้างต้นในเบราว์เซอร์จะปรากฏดังแสดงด้านล่าง:

แท็กคำบรรยายภาพ

คำว่า "คำบรรยายภาพ" หมายถึงชื่อที่ดีชื่อหน้า, บทหรืออื่น ๆ โดยทั่วไปแท็กคำอธิบายภาพจะใช้ในการเพิ่มส่วนหัว (ชื่อ) ลงในตารางที่เริ่มต้นด้วยการใช้องค์ประกอบ <table> องค์ประกอบ <caption> ถูกประกาศโดยใช้แท็ก <caption> คู่ ... </ คำบรรยายภาพ>

แท็ก <caption> ถูกเขียนภายในองค์ประกอบ <table>ตรงหน้าองค์ประกอบอื่น ๆ ในคำอื่น ๆ แท็ก <caption> ตั้งอยู่เหนือตารางและเป็นศูนย์กลางโดยค่าเริ่มต้น แต่คุณสามารถเปลี่ยนตำแหน่งของมันด้วยคุณสมบัติการจัดตำแหน่งข้อความใน CSS สำหรับการจัดตำแหน่งข้อความและคุณสมบัติด้านคำบรรยายสำหรับการตั้งค่าด้านบนหรือ ด้านล่างของตาราง

<!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>

หลังจากเรียกใช้โค้ด HTML ข้างต้นในเบราว์เซอร์จะปรากฏดังแสดงด้านล่าง:

จากภาพด้านบนคำบรรยายในตารางแรกแสดงโดยค่าเริ่มต้น คำบรรยายภาพในตารางที่สองแสดงด้วยคุณสมบัติการจัดแนวข้อความ: left ในขณะที่คำอธิบายภาพในตารางที่สามแสดงด้วยคุณสมบัติด้านคำบรรยาย: ด้านล่าง

</ p>

อ่านเพิ่มเติม: