Lesson 9: Creating Tables

Master the art of structuring data with HTML tables for clear, organized information presentation

Start Learning
Previous Lesson Next Lesson

HTML Table Fundamentals

HTML tables are essential for displaying structured data in rows and columns. They provide a clear way to present information like schedules, statistics, pricing, and more.

Key Insight: Tables should be used for tabular data, not for page layout. For layouts, CSS Grid or Flexbox are more appropriate.

Core Table Elements

Creating a basic table involves these essential elements:

Element Description Purpose
<table> Table container Defines the entire table structure
<tr> Table row Contains a row of table cells
<td> Table data cell Contains regular table data
<th> Table header cell Defines a header cell (bold and centered by default)
<caption> Table caption Provides a title for the table

Basic Table Structure

Here's the fundamental structure of an HTML table:

<!DOCTYPE html>
<html>
<head>
    <title>Basic Table</title>
</head>
<body>
    <table>
        <caption>Monthly Sales Report</caption>
        <tr>
            <th>Month</th>
            <th>Revenue</th>
            <th>Expenses</th>
            <th>Profit</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$15,000</td>
            <td>$8,000</td>
            <td>$7,000</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$16,500</td>
            <td>$8,200</td>
            <td>$8,300</td>
        </tr>
        <tr>
            <td>March</td>
            <td>$18,200</td>
            <td>$8,500</td>
            <td>$9,700</td>
        </tr>
    </table>
</body>
</html>

Result:

Monthly Sales Report
Month Revenue Expenses Profit
January $15,000 $8,000 $7,000
February $16,500 $8,200 $8,300
March $18,200 $8,500 $9,700

Advanced Table Features

HTML tables support more complex structures for better organization and accessibility.

Table Grouping Elements

Use these elements to group rows and columns for better structure:

<table>
    <caption>Employee Directory</caption>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Department</th>
            <th>Position</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>E001</td>
            <td>Sarah Johnson</td>
            <td>Marketing</td>
            <td>Manager</td>
        </tr>
        <tr>
            <td>E002</td>
            <td>Michael Chen</td>
            <td>Development</td>
            <td>Senior Engineer</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total Employees</td>
            <td>2</td>
        </tr>
    </tfoot>
</table>

Result:

Employee Directory
ID Name Department Position
E001 Sarah Johnson Marketing Manager
E002 Michael Chen Development Senior Engineer
Total Employees 2

Spanning Rows and Columns

Use rowspan and colspan to make cells span multiple rows or columns.

<table>
    <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">Contact Info</th>
    </tr>
    <tr>
        <th>Email</th>
        <th>Phone</th>
    </tr>
    <tr>
        <td>Alex Morgan</td>
        <td>[email protected]</td>
        <td>(555) 123-4567</td>
    </tr>
</table>

Result:

Name Contact Info
Email Phone
Alex Morgan [email protected] (555) 123-4567

Responsive Tables

Tables can be challenging on small screens. Here are techniques to make tables responsive.

Important: Always wrap tables in a container with overflow-x: auto for horizontal scrolling on mobile.

Horizontal Scrolling Technique

The simplest method to make tables responsive:

<div class="responsive-table">
    <table>
        <!-- table content -->
    </table>
</div>

Result:

Product Comparison
Product Price Features Rating Warranty Availability
UltraBook Pro $1,299 16GB RAM, 512GB SSD 4.8/5 2 years In stock
PowerLaptop Max $999 8GB RAM, 256GB SSD 4.5/5 1 year Backordered

Stacked Tables on Mobile

For complex tables, consider stacking rows on mobile devices.

/* CSS for stacked table */
@media (max-width: 600px) {
  .stacked-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }
  
  .stacked-table td {
    display: block;
    text-align: right;
  }
  
  .stacked-table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

Result:

Resize your browser to see the responsive effect

Employee Schedule
Employee Monday Tuesday Wednesday Thursday Friday
John Smith 9am-5pm 9am-5pm Off 10am-6pm 9am-3pm
Emma Davis Off 12pm-8pm 12pm-8pm Off 9am-5pm

Practical Exercise: Product Catalog

Create a responsive product catalog table with the following specifications:

Your Task:

  1. Create a table with columns: Product, Category, Price, Rating, and Stock
  2. Include at least 5 products with different categories
  3. Add a table caption: "Product Inventory"
  4. Use thead, tbody, and tfoot elements
  5. In the footer, show total products and average price
  6. Make the table responsive with horizontal scrolling on mobile
  7. Add zebra striping for rows

Tips:

  • Use semantic table structure with appropriate elements
  • Apply CSS for better readability (alternating row colors)
  • Ensure the table is accessible with proper headers
  • Test responsiveness by resizing your browser
Previous Lesson Next Lesson