HTML भाग 23 सीखना: एचटीएमएल टेबल्स में कर्नल, कोलग्रुप और कैप्शन टैग का उपयोग

पिछली चर्चा में मैंने थ्रेड, tbody और tfoot तत्वों के उपयोग के बारे में एक तालिका में समूह सामग्री के बारे में बताया है।

इस गीलापन में, मैं समझाऊंगा<colgroup>, <col> और <caption> टैग का उपयोग कैसे करें। <<>> टैग लिखने से पहले <colorgroup> और <col> टैग <table> टैग जोड़ी ... </ table> के अंदर हैं।

संक्षेप में, <colgroup> टैग का उपयोग किया जाता हैकिसी तालिका में स्तंभों को समूहबद्ध करने के लिए, <col> टैग का उपयोग तालिका में स्तंभों को दिखाने के लिए किया जाता है जबकि <शीर्षक> टैग का उपयोग तालिका में शीर्षक लिखने के लिए किया जाता है। आगे की व्याख्या के लिए, आइए नीचे दिए गए स्पष्टीकरण को देखें:

कर्नल और कोलग्रुप टैग

इंगित करने के लिए <Colgroup> टैग का उपयोग किया जाता हैतालिका में स्तंभों का समूह जहां <तालिका> तत्व मूल है। इस टैग का उपयोग आम तौर पर संपूर्ण रूप में तालिका में कुछ विशिष्ट स्तंभों को स्टाइल करने के लिए किया जाता है। इसलिए, आपको किसी तालिका में प्रत्येक प्रारूप में समान प्रारूप शैली दोहराने की आवश्यकता नहीं है।

<Colgroup> टैग के भीतर, टैग भी लिखे जा सकते हैं<col> जो एक तालिका में कॉलम दिखाता है। इसके अलावा, इस <col> टैग को कॉलग्रुप के कॉलम ऑर्डर को इंगित करने वाले एक से अधिक लिखा जा सकता है। <Col> टैग <table> तत्व के अंदर <caption> तत्व के बाद और <thead> से पहले लिखा गया है, <tfoot>, <tbody> और <tr> तत्व।

आप प्रदान करने के लिए <col> टैग का उपयोग कर सकते हैंएक तालिका के प्रत्येक स्तंभ के लिए अलग-अलग शैली के गुण पूरे के रूप में, इसलिए अब आपको बार-बार तालिका में प्रत्येक कक्ष के लिए एक ही शैली को फिर से लिखने की आवश्यकता नहीं है। निम्नलिखित <colgroup> टैग और HTML में <col> टैग का उपयोग करने और लिखने के लिए एक कोड का एक उदाहरण है:

<!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 कोड चलने के बाद यह नीचे दिखाए गए अनुसार दिखाई देगा:

कैप्शन टैग

"कैप्शन" शब्द का अर्थ एक अच्छा शीर्षक हैपृष्ठ का शीर्षक, अध्याय या अन्य। सामान्य तौर पर, कैप्शन टैग का उपयोग शीर्ष लेख (शीर्षक) को एक तालिका में जोड़ने के लिए किया जाता है जो <तालिका> तत्व के उपयोग से शुरू होता है। <कैप्शन> तत्व <कैप्शन> टैग जोड़ी का उपयोग करके घोषित किया गया है ... </ कैप्शन>।

<कैप्शन> टैग <तालिका> तत्व के अंदर लिखा गया हैदूसरे तत्वों से पहले सीधे दूसरे शब्दों में <कैप्शन> टैग एक तालिका के ऊपर स्थित है और डिफ़ॉल्ट रूप से केंद्रित है, लेकिन आप पाठ संरेखण के लिए 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 कोड चलने के बाद यह नीचे दिखाए गए अनुसार दिखाई देगा:

ऊपर की तस्वीर से, पहली तालिका में कैप्शनडिफ़ॉल्ट रूप से प्रदर्शित। दूसरी तालिका में कैप्शन को टेक्स्ट-संरेखित: बाईं संपत्ति के साथ प्रदर्शित किया गया है, जबकि तीसरी तालिका में शीर्षक को कैप्शन-साइड: नीचे की संपत्ति के साथ प्रदर्शित किया गया है।

</ P>