HTML <col> टैग: कॉलम गुण परिभाषित करना

HTML <col> टैग

<col> टैग HTML टेबल में प्रत्येक कॉलम के लिए गुण (properties) निर्दिष्ट करता है। यह <colgroup> एलिमेंट के अंदर उपयोग किया जाता है और पूरे कॉलम पर स्टाइल लागू करने की अनुमति देता है बिना प्रत्येक सेल को व्यक्तिगत रूप से स्टाइल किए।

एट्रिब्यूट

• span: <col> एलिमेंट जितने कॉलम फैलाना चाहिए

उदाहरण: ICC रैंकिंग टेबल में कॉलम स्टाइलिंग

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td { border: 2px solid black; }
  </style>
</head>
<body>
  <h2>ICC रैंकिंग</h2>
  <table>
    <colgroup>
      <col span="2" style="background-color:magenta;">
      <col style="background-color:blue;">
    </colgroup>
    <tr>
      <th>खिलाड़ी</th> <th>देश</th> <th>रैंक</th>
    </tr>
    <tr><td>Jack</td><td>WI</td><td>1</td></tr>
    <tr><td>Tom</td><td>AUS</td><td>2</td></tr>
    <tr><td>Virat</td><td>IND</td><td>3</td></tr>
    <tr><td>Steve</td><td>AUS</td><td>4</td></tr>
    <tr><td>Kane</td><td>NZ</td><td>5</td></tr>
    <tr><td>David</td><td>AUS</td><td>6</td></tr>
  </table>
</body>
</html>

आउटपुट

पहले दो कॉलम (खिलाड़ी, देश) मैजेंटा बैकग्राउंड के साथ, तीसरा कॉलम (रैंक) नीले बैकग्राउंड के साथ।

कोड व्याख्या

<colgroup>
  <col span="2" style="background-color:magenta;">
  <col style="background-color:blue;">
</colgroup>

span="2" का अर्थ है पहले दो कॉलम पर लागू करें।

लाभ

• प्रदर्शन: प्रत्येक <td> पर स्टाइल दोहराने की आवश्यकता नहीं
• मेंटेनेंस: एक स्थान पर कॉलम स्टाइल बदलें
• सेमेंटिक: कॉलम-स्तरीय स्टाइलिंग स्पष्ट करती है

नोट

<col> केवल कुछ CSS प्रॉपर्टीज सपोर्ट करता है: background, border, width, visibility, column-* प्रॉपर्टीज।