Spex3

📊 HTML Tables Guide

📊 HTML Tables Guide
Tables are used in HTML to display data in rows and columns, similar to spreadsheets. They help structure content like schedules, prices, stats, and more.

1. Basic Table Tags

Here are the main table-related tags:

Tag - Description

- Wraps the entire table
- Defines a table row

- Defines a data cell (table content)	- Defines a header cell (bold + centered by default) ✅ Example: <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Alice</td> <td>24</td> </tr> <tr> <td>Bob</td> <td>30</td> </tr> </table> 2. Table Headers (<th>) Used instead of <td> to label columns or rows. They're bold by default. <tr> <th>Item</th> <th>Price</th> </tr> 3. colspan and rowspan Attributes These attributes allow cells to span multiple columns or rows. ✅ colspan – Stretch across multiple columns: <td colspan="2">Merged Cell</td> ✅ rowspan – Stretch down multiple rows: <td rowspan="2">Merged Row</td> 4. Table Caption (<caption>) Adds a title to your table. Must go immediately after the <table> tag. <table> <caption>Student Grades</caption> <tr><th>Name</th><th>Grade</th></tr> <tr><td>Alice</td><td>A</td></tr> </table> 5. Table Sections: <thead>, <tbody>, <tfoot> Used to group different parts of a table. Makes styling easier and improves accessibility. <table> <caption>Product List</caption> <thead> <tr> <th>Product</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>Phone</td> <td>$500</td> </tr> <tr> <td>Laptop</td> <td>$1200</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>$1700</td> </tr> </tfoot> </table> Quick Summary Tag - Purpose <table> - Wraps the table <tr> - Table row <td> - Table data cell <th> - Table header cell colspan - Merge columns rowspan - Merge rows <caption> - Table title <thead> - Table header section <tbody> - Table body section <tfoot> - Table footer section Date: 2025-04-07 00:00:00.000000 Contact Us // Privacy and Policy Email Us// Facebook // Twitter

- Defines a data cell (table content)

- Defines a header cell (bold + centered by default)

✅ Example:



<table>

<tr>

    <th>Name</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Alice</td>

    <td>24</td>

  </tr>

  <tr>

    <td>Bob</td>

    <td>30</td>

  </tr>

</table>

2. Table Headers (<th>)

Used instead of <td> to label columns or rows. They're bold by default.

<tr>
<th>Item</th>
<th>Price</th>
</tr>

3. colspan and rowspan Attributes

These attributes allow cells to span multiple columns or rows.

✅ colspan – Stretch across multiple columns:



<td colspan="2">Merged Cell</td>

✅ rowspan – Stretch down multiple rows:



<td rowspan="2">Merged Row</td>

4. Table Caption (<caption>)

Adds a title to your table. Must go immediately after the <table> tag.



<table>

  <caption>Student Grades</caption>

  <tr><th>Name</th><th>Grade</th></tr>

  <tr><td>Alice</td><td>A</td></tr>

</table>

5. Table Sections: <thead>, <tbody>, <tfoot>

Used to group different parts of a table. Makes styling easier and improves accessibility.



<table>

  <caption>Product List</caption>

  <thead>

    <tr>

      <th>Product</th>

      <th>Price</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Phone</td>

      <td>$500</td>

    </tr>

    <tr>

      <td>Laptop</td>

      <td>$1200</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td>Total</td>

      <td>$1700</td>

    </tr>

  </tfoot>

</table>

Quick Summary

Tag - Purpose
<table> - Wraps the table
<tr> - Table row
<td> - Table data cell
<th> - Table header cell
colspan - Merge columns
rowspan - Merge rows
<caption> - Table title
<thead> - Table header section
<tbody> - Table body section
<tfoot> - Table footer section

Date: 2025-04-07 00:00:00.000000