Welcome to our HTML tutorial! Today, we're diving into structuring data with HTML tables, a fundamental skill for web developers. Tables allow you to present tabular data neatly and accessibly on your webpages.

Structuring Data - Tables

Tables are essential for displaying tabular data in a clear and organized manner, improving readability and user experience on your website.

Creating a Basic Table

The <table>, <tr>, <th>, and <td> elements are the building blocks for creating simple HTML tables. They define the table, its rows, header cells, and data cells, respectively.

Example 1: Simple Product Table

<table>
  <tr>
    <th>Product Name</th> <th>Price</th>        </tr>
  <tr>
    <td>Laptop</td>       <td>$1200</td>        </tr>
</table>

Explanation This code creates a basic HTML table with two columns: "Product Name" and "Price." The <tr> elements define rows, <th> for header cells, and <td> for standard data cells.

Example 2: Basic Contact List

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>alice@example.com</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>bob@example.com</td>
  </tr>
</table>

Explanation This example demonstrates a simple table for a contact list, showcasing how to add multiple data rows within a table.

Example 3: Daily Schedule Overview

<table>
  <tr>
    <th>Time</th>
    <th>Activity</th>
  </tr>
  <tr>
    <td>9:00 AM</td>
    <td>Meeting</td>
  </tr>
  <tr>
    <td>1:00 PM</td>
    <td>Lunch</td>
  </tr>
  <tr>
    <td>3:00 PM</td>
    <td>Work</td>
  </tr>
</table>

Explanation Here, a table is used to present a basic daily schedule, illustrating how tables can organize time-based information.

Example 4: Student Grades

<table>
  <tr>
    <th>Student ID</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>101</td>
    <td>A</td>
  </tr>
  <tr>
    <td>102</td>
    <td>B+</td>
  </tr>
  <tr>
    <td>103</td>
    <td>C</td>
  </tr>
</table>

Explanation This table displays student IDs and their corresponding grades, demonstrating a common use case for tabular data.

Example 5: Inventory Stock

<table>
  <tr>
    <th>Item</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Pens</td>
    <td>150</td>
  </tr>
  <tr>
    <td>Notebooks</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Staplers</td>
    <td>30</td>
  </tr>
</table>

Explanation This example creates a table to show inventory items and their quantities, highlighting how tables are useful for tracking stock.

Advanced Table Structure

The <thead>, <tbody>, and <tfoot> elements enhance table semantics for better organization and accessibility. The <caption> element provides a descriptive title for the table, improving content clarity.

Example 1: Table with Header, Body, and Footer

<table>
  <caption>Monthly Sales Report</caption> <thead>
    <tr>
      <th>Month</th>
      <th>Revenue</th>
      <th>Expenses</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$5000</td>
      <td>$2000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$6000</td>
      <td>$2500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$11000</td>
      <td>$4500</td>
    </tr>
  </tfoot>
</table>

Explanation This code demonstrates a structured table with a <caption>, <thead> for headers, <tbody> for main data, and <tfoot> for summary rows like totals. This improves table semantics and accessibility.

Example 2: Employee Performance with Caption

<table>
  <caption>Employee Performance Overview</caption>
  <thead>
    <tr>
      <th>Employee</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>85</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>92</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Average</td>
      <td>88.5</td>
    </tr>
  </tfoot>
</table>

Explanation This table uses advanced structure to present employee performance data, including an average in the footer, enhancing data presentation.

Example 3: Budget Forecast with Structured Sections

<table>
  <caption>Annual Budget Forecast</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Q1</th>
      <th>Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Income</td>
      <td>$10000</td>
      <td>$11000</td>
    </tr>
    <tr>
      <td>Operating Costs</td>
      <td>$4000</td>
      <td>$4200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Net Profit</td>
      <td>$6000</td>
      <td>$6800</td>
    </tr>
  </tfoot>
</table>

Explanation This example showcases a budget forecast table with clear distinctions between header, body, and footer sections, making financial data easier to digest.

Example 4: University Course Schedule

<table>
  <caption>Fall Semester Course Schedule</caption>
  <thead>
    <tr>
      <th>Course Code</th>
      <th>Course Name</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>CS101</td>
      <td>Intro to Programming</td>
      <td>3</td>
    </tr>
    <tr>
      <td>MA205</td>
      <td>Calculus I</td>
      <td>4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total Credits</td>
      <td colspan="2">7</td> </tr>
  </tfoot>
</table>

Explanation This table organizes a university course schedule, demonstrating how <thead>, <tbody>, and <tfoot> can structure academic information effectively.

Example 5: Project Milestones

<table>
  <caption>Project Development Milestones</caption>
  <thead>
    <tr>
      <th>Milestone</th>
      <th>Due Date</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Phase 1 Complete</td>
      <td>2025-07-15</td>
      <td>Completed</td>
    </tr>
    <tr>
      <td>Phase 2 Review</td>
      <td>2025-08-01</td>
      <td>In Progress</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Upcoming Milestones</td>
    </tr>
  </tfoot>
</table>

Explanation This example uses a structured table to track project milestones, providing a clear overview of project progress with a caption for context.

Spanning Rows and Columns

The rowspan and colspan attributes are powerful tools for merging cells across multiple rows or columns, respectively. This is useful for creating more complex table layouts and handling irregular data.

Example 1: Table with Colspan

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Contact Info</th> </tr>
  <tr>
    <td>Alice</td>
    <td>alice@example.com</td>
    <td>123-456-7890</td>
  </tr>
</table>

Explanation This code uses colspan="2" on "Contact Info" to make it span two columns, effectively merging the "Email" and "Phone" data cells under one header.

Example 2: Table with Rowspan

<table>
  <tr>
    <th>Category</th>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td rowspan="2">Electronics</td> <td>Laptop</td>
    <td>$1200</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>$25</td>
  </tr>
</table>

Explanation This example utilizes rowspan="2" on "Electronics" to group "Laptop" and "Mouse" under the same category, showing how to merge cells vertically.

Example 3: Combined Rowspan and Colspan

<table>
  <tr>
    <th rowspan="2">Group</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Charlie</td>
    <td>30</td>
  </tr>
</table>

Explanation This table combines both rowspan and colspan to create a more intricate layout, demonstrating advanced cell merging capabilities.

Example 4: Schedule with Merged Time Slots

<table>
  <tr>
    <th>Day</th>
    <th>Time</th>
    <th>Activity</th>
  </tr>
  <tr>
    <td rowspan="2">Monday</td>
    <td>9:00 AM</td>
    <td>Meeting</td>
  </tr>
  <tr>
    <td>10:00 AM</td>
    <td>Project Work</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td colspan="2">Training Session (All Day)</td>
  </tr>
</table>

Explanation This example showcases how rowspan and colspan can be used in a schedule to indicate activities spanning multiple time slots or an entire day.

Example 5: Product Features Table

<table>
  <tr>
    <th colspan="3">Product X Specifications</th>
  </tr>
  <tr>
    <td>Feature</td>
    <td>Value</td>
    <td>Notes</td>
  </tr>
  <tr>
    <td>Processor</td>
    <td>Intel i7</td>
    <td rowspan="2">High Performance</td>
  </tr>
  <tr>
    <td>RAM</td>
    <td>16GB</td>
  </tr>
</table>

Explanation Here, colspan is used for a general product specification header, and rowspan groups related notes for different features.

Grouping Columns (<colgroup> and <col>)

The <colgroup> and <col> elements are used to define groups of columns within a table, allowing for easier styling and structural definition of columns without affecting the content of the cells.

Example 1: Basic Column Grouping

<table>
  <colgroup>
    <col style="background-color: lightblue;"> <col span="2" style="background-color: lightgreen;"> </colgroup>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>alice@example.com</td>
    <td>123-456-7890</td>
  </tr>
</table>

Explanation This code uses <colgroup> and <col> to apply distinct background colors to groups of columns, demonstrating structural styling of table columns.

Example 2: Formatting Specific Columns

<table>
  <colgroup>
    <col> <col style="text-align: right;"> <col style="font-weight: bold;"> </colgroup>
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Unit Price</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>10</td>
    <td>$1.50</td>
  </tr>
</table>

Explanation This example shows how to apply specific text alignment and font styles to individual columns using <col> elements within <colgroup>.

Example 3: Hidden Column with Colgroup

<table>
  <colgroup>
    <col>
    <col style="display: none;"> <col>
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Internal ID</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Chair</td>
    <td>CHAIR001</td>
    <td>$50</td>
  </tr>
</table>

Explanation Here, a column is hidden using display: none; on the <col> element, useful for temporarily concealing data without removing it from the HTML.

Example 4: Colgroup for Data Type Indication

<table>
  <colgroup>
    <col class="text-data"> <col class="numeric-data"> </colgroup>
  <tr>
    <th>Country</th>
    <th>Population (Millions)</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>330</td>
  </tr>
  <tr>
    <td>Canada</td>
    <td>38</td>
  </tr>
</table>

Explanation This example uses classes on <col> elements to semantically group columns by data type, which can be targeted with CSS for consistent styling.

Example 5: Applying Borders to Column Groups

<table>
  <colgroup>
    <col style="border-right: 2px solid grey;"> <col span="2">
  </colgroup>
  <tr>
    <th>Category</th>
    <th>Sub-Category A</th>
    <th>Sub-Category B</th>
  </tr>
  <tr>
    <td>Electronics</td>
    <td>Laptops</td>
    <td>Smartphones</td>
  </tr>
</table>

Explanation This code applies a visual separator (border) between column groups, enhancing the visual separation of distinct data sets within the table.