Introduction: Why HTML Tables Still Matter

Despite the rise of CSS grids and flexbox, HTML tables remain an essential element for displaying structured data — financial reports, pricing comparisons, schedules, analytics dashboards, and product catalogs. Tables give clarity and logic to data-heavy content, helping users understand information at a glance.

In this course, you’ll explore both the fundamentals and the finer details of table layout design — combining structure, semantics, and aesthetics to build professional, readable tables for real-world use.

Lesson 1: Understanding Basic HTML Tables

Learn how to create a well-structured table using <table>, <thead>, <tbody>, <th>, and <td> tags. These form the backbone of any HTML table.

Example:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Laptop</td><td>$999</td><td>25</td></tr>
    <tr><td>Tablet</td><td>$499</td><td>48</td></tr>
  </tbody>
</table>

This simple structure separates header rows from data rows, making your table accessible and search-engine friendly.

Lesson 2: Adding Footers to Tables

Use the <tfoot> tag to summarize your data or display totals. Footers are especially valuable for financial summaries or analytics dashboards.

<table>
  <thead>
    <tr><th>Month</th><th>Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>January</td><td>$10,000</td></tr>
    <tr><td>February</td><td>$12,500</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$22,500</td></tr>
  </tfoot>
</table>

Tip: You can use colspan to merge multiple footer cells into one for better visual alignment.

Lesson 3: Merging Cells Using Colspan

The colspan attribute merges multiple columns into a single cell, ideal for headings or summary data that span across the table width.

<table>
  <tr><th colspan="3">Quarterly Sales Report</th></tr>
  <tr><th>Month</th><th>Revenue</th><th>Profit</th></tr>
  <tr><td>March</td><td>$15,000</td><td>$3,000</td></tr>
</table>

Real-life use case: In a project report or sales summary, colspan helps you label entire data groups without repetition, improving readability and visual flow.

Lesson 4: Merging Rows Using Rowspan

The rowspan attribute merges cells vertically, commonly used when several rows share the same category or label.

<table>
  <tr><th>Department</th><th>Employee</th><th>Sales</th></tr>
  <tr><td rowspan="2">Marketing</td><td>Alice</td><td>$5,000</td></tr>
  <tr><td>Bob</td><td>$4,200</td></tr>
</table>

Tip: Use rowspan when grouping related data in dashboards, attendance sheets, or project tracking systems to make them cleaner and easier to scan.

Lesson 5: Using Column Groups for Styling and Layout

Column groups (<colgroup> and <col>) help you apply consistent styling and set column widths across large tables without repeating inline styles.

<table>
  <colgroup>
    <col style="background:#f4f4f4; width:30%;" />
    <col style="background:#fff; width:40%;" />
    <col style="background:#f9f9f9; width:30%;" />
  </colgroup>
  <tr><th>Service</th><th>Details</th><th>Cost</th></tr>
  <tr><td>Hosting</td><td>Cloud VPS 4GB RAM</td><td>$25/mo</td></tr>
  <tr><td>Domain</td><td>.com Registration</td><td>$10/yr</td></tr>
</table>

This technique is ideal for large dashboards, invoices, or e-commerce product lists where uniform column structure improves legibility and design consistency.

Practical Business Applications

• Financial Reporting: Use tables to summarize income, expenses, and balance sheets clearly.
• Product Catalogs: Display features, pricing, and availability in a comparison table for online shoppers.
• Employee Data: Organize staff details by department, role, and performance metrics.
• Analytics Dashboards: Present KPIs, engagement rates, or performance summaries in clear, sortable tables.

Best Practices for Beautiful and Accessible Tables

• Always include <thead>, <tbody>, and <tfoot> for structured markup.
• Use CSS for styling, not inline HTML attributes.
• Provide alternate row colors (zebra striping) for better readability.
• Ensure tables are responsive using CSS media queries or wrapping containers.
• Add descriptive caption and scope attributes for accessibility.