HTML Tables

Table of Contents +

In previous lessons, we have learned how to display images.

Now we will learn about the HTML <table> element, which is used to create tables for displaying data in rows and columns.

What is Table in general?

Tables are perfect for displaying data in rows and columns to make data easy to read and understand. We use tables in our daily lives like:

In books for table of contents
Trains/flight schedules
Sport scores
Students grades and scores etc

How we create tables in HTML?

In HTML, we can create tables using the <table> element. Inside the <table>, we use <tr> to display table rows, <th> for table headers, and <td> for table data cells.

Basic syntax of HTML table:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

The above code creates a simple table with two headers and one row of data as follows:

Header 1	Header 2
Data 1	Data 2

🏛️ Table Terminology

Table: The entire table structure.
Row: A horizontal line of cells in the table, created with <tr>.
Column: A vertical line of cells in the table, defined by the number of <th> or <td> elements in each row.
Cell: cell is content inside a row, its created with <td> for data cells and <th> for header cells.

📚 What Are HTML Tables For?

HTML tables are used to present data in a structured format, making it easier for users to read and understand. They are commonly used for:01

📋 What Are HTML Tables For?

❌ Don’t Use Tables For:

Page layout (use CSS Grid or Flexbox instead)
Positioning elements on the page
Creating columns of text
Making things line up visually

💡 Remember

Tables are for data, not design! In the early days of the web, people used tables for layout, but that’s now considered bad practice.

🏗️ Basic Table Structure

Every HTML table is built with these essential elements:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

🔤 Table Elements Explained:

<table> = Container for the entire table
<tr> = Table Row
<th> = Table Header cell (bold and centered by default)
<td> = Table Data cell (regular content)

🌟 Your First Table

Let’s create a simple table showing favorite movies:

<table>
    <tr>
        <th>Movie Title</th>
        <th>Year</th>
        <th>Rating</th>
    </tr>
    <tr>
        <td>The Shawshank Redemption</td>
        <td>1994</td>
        <td>9.3/10</td>
    </tr>
    <tr>
        <td>The Godfather</td>
        <td>1972</td>
        <td>9.2/10</td>
    </tr>
    <tr>
        <td>The Dark Knight</td>
        <td>2008</td>
        <td>9.0/10</td>
    </tr>
</table>

This creates:

Movie Title	Year	Rating
The Shawshank Redemption	1994	9.3/10
The Godfather	1972	9.2/10
The Dark Knight	2008	9.0/10

HTML vs HTML 5 Tables

In HTML5, tables are more semantic and accessible. The basic structure remains the same, but we can use additional elements for better organization:

<table>
    <caption>Top Movies of All Time</caption>
    <thead>
        <tr>
            <th>Movie Title</th>
            <th>Director</th>
            <th>Year</th>
            <th>Rating</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The Shawshank Redemption</td>
            <td>Frank Darabont</td>
            <td>1994</td>
            <td>9.3/10</td>
        </tr>
        <tr>
            <td>The Godfather</td>
            <td>Francis Ford Coppola</td>
            <td>1972</td>
            <td>9.2/10</td>
        </tr>
        <tr>
            <td>Pulp Fiction</td>
            <td>Quentin Tarantino</td>
            <td>1994</td>
            <td>8.9/10</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">Source: IMDb Top 250 Movies</td>
        </tr>
    </tfoot>
</table>

The output of above code will be as follows:

Top Movies of All Time
Movie Title	Director	Year	Rating
The Shawshank Redemption	Frank Darabont	1994	9.3/10
The Godfather	Francis Ford Coppola	1972	9.2/10
Pulp Fiction	Quentin Tarantino	1994	8.9/10
Source: IMDb Top 250 Movies

As you can see, the table now has a title (<caption>), a header section (<thead>), a body section (<tbody>), and a footer section (<tfoot>).

💡 Semantic Tables

We should always use semantic elements like <caption>, <thead>, <tbody>, and <tfoot> to improve accessibility and organization of our tables.

🎯 Semantic Table Elements:

Element	Purpose	Example Use
`<caption>`	Table title/description	Monthly Sales Report
`<thead>`	Groups header rows	Column headings
`<tbody>`	Groups body content rows	Main data rows
`<tfoot>`	Groups footer rows	Totals, notes, sources

Recommended but Not Required

Its recommended to use <caption>, <thead>, <tbody>, and <tfoot> but its not always necessary. We can use them as per our needs.

🔗 Spanning Cells Across Rows and Columns

Span meaning to display a single cell across multiple rows or columns. This is useful when creating complex tables with grouped data.

📐 Column Spanning (colspan)

When we want a cell to span multiple columns, we use the colspan attribute in <td> or <th> elements.

<table>
    <tr>
        <th colspan="6">Personal Information Form</th>
    </tr>
    <tr>
        <th colspan="2">Name</th>
        <th colspan="4">Address Details</th>
    </tr>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Street Address</th>
        <th>City</th>
        <th>State</th>
        <th>ZIP Code</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Smith</td>
        <td>123 Main Street</td>
        <td>Springfield</td>
        <td>IL</td>
        <td>62701</td>
    </tr>
    <tr>
        <td>Sarah</td>
        <td>Johnson</td>
        <td>456 Oak Avenue</td>
        <td>Chicago</td>
        <td>IL</td>
        <td>60601</td>
    </tr>
    <tr>
        <td>Michael</td>
        <td>Brown</td>
        <td>789 Pine Road</td>
        <td>Rockford</td>
        <td>IL</td>
        <td>61101</td>
    </tr>
</table>

This creates a table with a header that spans three columns:

Personal Information Form
Name		Address Details
First Name	Last Name	Street Address	City	State	ZIP Code
John	Smith	123 Main Street	Springfield	IL	62701
Sarah	Johnson	456 Oak Avenue	Chicago	IL	60601
Michael	Brown	789 Pine Road	Rockford	IL	61101

As you can see the first row has two headers and inside those headers, we have another row with two headers and four columns. This way we can create complex tables with grouped data.

📏 Row Spanning (rowspan)

Similar to colspan, we can use the rowspan attribute to make a cell span multiple rows.

<table>
    <tr>
        <th>Day</th>
        <th>Meal</th>
        <th>Time</th>
    </tr>
    <tr>
        <td rowspan="3">Monday</td>
        <td>Breakfast</td>
        <td>8:00 AM</td>
    </tr>
    <tr>
        <td>Lunch</td>
        <td>12:30 PM</td>
    </tr>
    <tr>
        <td>Dinner</td>
        <td>7:00 PM</td>
    </tr>
    <tr>
        <td rowspan="3">Tuesday</td>
        <td>Breakfast</td>
        <td>8:00 AM</td>
    </tr>
    <tr>
        <td>Lunch</td>
        <td>1:00 PM</td>
    </tr>
    <tr>
        <td>Dinner</td>
        <td>7:30 PM</td>
    </tr>
</table>

This will display a table like this:

Day	Meal	Time
Monday	Breakfast	8:00 AM
	Lunch	12:30 PM
	Dinner	7:00 PM
Tuesday	Breakfast	8:00 AM
	Lunch	1:00 PM
	Dinner	7:30 PM

This will display a table with days of the week in the first column and meals with their respective times in the second and third columns. The first column has two rows for Monday and Tuesday, and each of those rows has three rows each for breakfast, lunch, and dinner.

🎨 Table Attributes

Tables have several useful attributes for better functionality:

Attribute	Element	Purpose	Example
`colspan`	`<td>`, `<th>`	Span multiple columns	`<td colspan="2">`
`rowspan`	`<td>`, `<th>`	Span multiple rows	`<td rowspan="3">`
`scope`	`<th>`	Define header scope	`<th scope="col">`
`headers`	`<td>`	Link to specific headers	`<td headers="q1 sales">`

🎯 Accessibility Tip

Use scope="col" for column headers and scope="row" for row headers. This helps screen readers understand the relationship between headers and data!

📱 Making Tables Responsive

In Desktop view, tables look great but on mobile devices they will be too wide to fit the screen. For that we need to make them responsive. We can make the tables responsive using below approaches:

🎯 Scrollable Tables

We can give tables a fixed width and allow horizontal scrolling on smaller screens. This way, users can scroll to see all the content without breaking the layout.

<div style="overflow-x: auto;">
    <table>
        <!-- Your table content -->
    </table>
</div>

📋 Table with Caption for Context

Then add a caption to provide context for the table content.

<table>
    <caption>
        Product Comparison - Scroll right to see all features
    </caption>
    <!-- Table content -->
</table>

💡 Responsive Tables

Tables are inherently wide. For mobile-friendly tables, consider using CSS techniques like horizontal scrolling, or transforming the layout for small screens.

🎯 Table Best Practices

✅ Do This:

Use tables for tabular data only
Always include a caption to describe the table
Use proper header elements (<th>) with scope attributes
Keep tables simple - avoid unnecessary complexity
Test on mobile devices to ensure usability

❌ Avoid This:

Using tables for page layout
Missing table headers
Overly complex nested tables
Tables without captions or context
Tables that don’t work on mobile

🎯 Keep It Simple

The best tables are easy to scan and understand. If your table is getting too complex, consider breaking it into multiple simpler tables!

📊 Real-World Table Examples

Below are some practical examples of tables you might create in real-world applications:

💰 Product Pricing Table

<table>
    <caption>Hosting Plans Comparison</caption>
    <thead>
        <tr>
            <th scope="col">Feature</th>
            <th scope="col">Basic</th>
            <th scope="col">Pro</th>
            <th scope="col">Enterprise</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Storage</th>
            <td>10 GB</td>
            <td>100 GB</td>
            <td>Unlimited</td>
        </tr>
        <tr>
            <th scope="row">Bandwidth</th>
            <td>100 GB/month</td>
            <td>1 TB/month</td>
            <td>Unlimited</td>
        </tr>
        <tr>
            <th scope="row">Email Accounts</th>
            <td>5</td>
            <td>50</td>
            <td>Unlimited</td>
        </tr>
        <tr>
            <th scope="row">Support</th>
            <td>Email</td>
            <td>Email + Chat</td>
            <td>24/7 Phone + Chat</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Price/Month</th>
            <td><strong>$5</strong></td>
            <td><strong>$15</strong></td>
            <td><strong>$50</strong></td>
        </tr>
    </tfoot>
</table>

📅 Event Schedule Table

<table>
    <caption>Conference Schedule - Day 1</caption>
    <thead>
        <tr>
            <th scope="col">Time</th>
            <th scope="col">Room A</th>
            <th scope="col">Room B</th>
            <th scope="col">Room C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">9:00 AM</th>
            <td>Registration</td>
            <td colspan="2">Breakfast & Networking</td>
        </tr>
        <tr>
            <th scope="row">10:00 AM</th>
            <td>Opening Keynote</td>
            <td colspan="2">Main Auditorium</td>
        </tr>
        <tr>
            <th scope="row">11:00 AM</th>
            <td>Web Design Trends</td>
            <td>JavaScript Frameworks</td>
            <td>UX Best Practices</td>
        </tr>
        <tr>
            <th scope="row">12:00 PM</th>
            <td colspan="3">Lunch Break</td>
        </tr>
        <tr>
            <th scope="row">1:00 PM</th>
            <td>CSS Grid Workshop</td>
            <td>React Deep Dive</td>
            <td>Design Systems</td>
        </tr>
    </tbody>
</table>

📈 Financial Report Table

<table>
    <caption>Quarterly Revenue Report (in thousands USD)</caption>
    <thead>
        <tr>
            <th scope="col">Quarter</th>
            <th scope="col">Product Sales</th>
            <th scope="col">Service Revenue</th>
            <th scope="col">Total Revenue</th>
            <th scope="col">Growth</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Q1 2024</th>
            <td>$250</td>
            <td>$150</td>
            <td>$400</td>
            <td>-</td>
        </tr>
        <tr>
            <th scope="row">Q2 2024</th>
            <td>$280</td>
            <td>$170</td>
            <td>$450</td>
            <td>+12.5%</td>
        </tr>
        <tr>
            <th scope="row">Q3 2024</th>
            <td>$320</td>
            <td>$200</td>
            <td>$520</td>
            <td>+15.6%</td>
        </tr>
        <tr>
            <th scope="row">Q4 2024</th>
            <td>$350</td>
            <td>$225</td>
            <td>$575</td>
            <td>+10.6%</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Total 2024</th>
            <td>$1,200</td>
            <td>$745</td>
            <td><strong>$1,945</strong></td>
            <td>+38.7%</td>
        </tr>
    </tfoot>
</table>

🎮 Try It Yourself!

Now we have learned how to create tables in HTML. Let exercise of our knowledge by creating some tables.

Create a folder named tables in your project directory.
Inside the tables folder, create separate files for each of the following tables:
- product-pricing.html
- event-schedule.html
- financial-report.html
Use the examples provided above and use the code snippets.
Run the HTML files in your browser to see how the tables look and function.

🎊 What You’ve Learned

Excellent work! You now know how to:

✅ Create basic tables with rows and columns
✅ Use semantic table elements (thead, tbody, tfoot)
✅ Span cells across multiple rows or columns
✅ Structure complex data in readable formats
✅ Consider responsive design for mobile users

Tables are very important for displaying structured data clearly and professionally!

🚀 What’s Next?

In our next lesson, we’ll explore HTML Forms - learn how to collect user input, create contact forms, surveys, and interactive elements that make your websites truly interactive! 📝

Previous HTML Images Next HTML Forms

Share & Connect

Share on LinkedIn