Tag col

The <col> tag is used inside a table to apply styling or attributes to entire columns. It works in combination with the <colgroup> tag and does not contain content — it simply sets styles or widths for one or more columns.

---

✅ Basic Syntax

<table>
  <colgroup>
    <col span="1" style="background-color: #f2f2f2">
    <col span="1" style="background-color: #d9edf7">
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1.00</td>
  </tr>
</table>

📍 Result:

• Column 1 (Product) has a light gray background
• Column 2 (Price) has a light blue background

---

🧱 Where It Goes

• The <col> tag must be placed inside a <colgroup> tag
• <colgroup> is placed immediately after the opening <table> tag

---

🧩 Attributes

Attribute	Description
span	Number of columns the <col> element should style
style	Inline CSS to apply (e.g. background, width)
class / id	Can also use CSS classes for styling

---

🎨 Example with Width and Colors

<table>
  <colgroup>
    <col style="width: 70px; background-color: #eee;">
    <col style="width: 100px; background-color: #cff;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jane</td>
    <td>28</td>
  </tr>
</table>

This sets custom widths and colors for each column.

---

🧠 Why Use <col>?

• Makes it easier to style entire columns at once
• Cleaner than applying styles to every <td> or <th> individually
• Especially useful in large tables

---

⚠️ Limitations

• <col> cannot target individual cells — only full columns
• Doesn’t work well if the table structure is dynamic or frequently changes
• Not all CSS styles (like padding) apply through <col>

---

✅ Summary

Feature	Description
Tag	<col>
Use	Apply style/width to one or more columns
Must be inside	<colgroup>
Common attributes	span, style, class, id
Best for	Styling entire table columns efficiently

---