Tag table

📊 HTML <table> Tag — Structuring Tabular Data on the Web

The <table> tag in HTML is used to create tables, which organize data into rows and columns. Tables are fundamental for displaying structured information like schedules, pricing plans, comparison charts, and more.

---

📌 What Is the <table> Tag?

• The <table> element represents tabular data in a grid layout.
• It contains child elements such as <tr> (table rows), <th> (table headers), and <td> (table data cells).
• Helps browsers and assistive technologies understand and present data clearly.

---

✅ Basic Structure of a Table

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>$1.00</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$0.80</td>
    <td>15</td>
  </tr>
</table>

---

🧪 Example 1: Simple Product Table

<table border="1" cellpadding="5" cellspacing="0">
  <caption>Fruit Prices</caption>
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Price per Unit</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bananas</td>
      <td>$0.50</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Grapes</td>
      <td>$2.00</td>
      <td>12</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Prices updated on June 15, 2025</td>
    </tr>
  </tfoot>
</table>

---

🧩 Key Table Elements

Element	Description
<table>	Container for the whole table
<caption>	Table title or description
<thead>	Groups header rows
<tbody>	Groups body rows
<tfoot>	Groups footer rows
<tr>	Table row
<th>	Header cell (bold and centered)
<td>	Data cell

---

🎨 Styling Tables

Use CSS to improve table appearance:

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}

---

⚠️ Accessibility Tips

• Use <caption> to provide a clear description.
• Use <th> for headers and associate them properly with data cells.
• Use scope attributes (scope="col" or scope="row") on headers for screen readers.
• Avoid using tables for layout — tables should be for tabular data only.

---

🔁 Common Attributes

Attribute	Description
border	Adds border around table and cells (deprecated in favor of CSS)
cellpadding	Controls padding inside cells (deprecated, use CSS)
cellspacing	Controls spacing between cells (deprecated, use CSS)
summary	Provides a summary for the table (accessibility, now replaced by <caption>)

---

🏁 Summary

The <table> tag is essential for organizing and presenting data in rows and columns on the web. Combined with related tags and proper styling, tables become accessible, readable, and visually appealing.