Web Development Zero to Advanced — Class 13 of 120

HTML Tables — Rows, Columns, Headers & Structured Data

HTML tables are used to display tabular data in rows and columns.

For example, tables can be used for:

• Product specifications
• Price lists
• Student results
• Employee information
• Sales reports
• Comparison charts
• Inventory data
• Course schedules
• Financial records
• Business reports

In HTML, a table is primarily created using the <table> element.

Basic example:

<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>$800</td>
    </tr>
</table>

In this class, you will learn:

• <table>
• <tr>
• <th>
• <td>
• <caption>
• <thead>
• <tbody>
• <tfoot>
• colspan
• rowspan
• Table borders with CSS
• Table accessibility basics
• Practical business tables
• Common table mistakes

What Is an HTML Table?

An HTML table represents data organized into rows and columns.

For example:

Product	Price	Stock
Laptop	$800	10
Monitor	$200	15
Keyboard	$50	25

HTML provides specific elements for representing this structure.

Basic HTML Table

Example:

<table>

    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>$800</td>
        <td>10</td>
    </tr>

    <tr>
        <td>Monitor</td>
        <td>$200</td>
        <td>15</td>
    </tr>

</table>

The table contains:

<table> → Complete table

<tr> → Table row

<th> → Header cell

<td> → Data cell

The `<table>` Element

The <table> element represents tabular data.

Basic structure:

<table>

    Table content goes here.

</table>

Rows and cells are placed inside the table.

The `<tr>` Element

tr stands for:

Table Row

It creates a row inside a table.

Example:

<tr>
    <td>Laptop</td>
    <td>$800</td>
</tr>

This row contains two cells.

The `<th>` Element

th stands for:

Table Header

It represents a header cell.

Example:

<tr>
    <th>Product</th>
    <th>Price</th>
</tr>

Browsers commonly display table header text in bold and centered by default.

However, the important point is its semantic meaning: it identifies a header for table data.

The `<td>` Element

td stands for:

Table Data

It represents a data cell.

Example:

<tr>
    <td>Gaming Laptop</td>
    <td>$999</td>
</tr>

Here:

Gaming Laptop = First data cell

$999 = Second data cell

Understanding Rows and Columns

Consider:

<table>

    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
    </tr>

    <tr>
        <td>John</td>
        <td>25</td>
        <td>USA</td>
    </tr>

</table>

The first row contains three header cells.

The second row contains three data cells.

Conceptually:

Name     Age     Country
John     25      USA

Each <tr> creates a horizontal row.

The cells inside corresponding positions form columns.

Complete Basic Table Example

Create:

index.html

Write:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>HTML Tables</title>

</head>

<body>

    <h1>Product List</h1>

    <table>

        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>

        <tr>
            <td>Laptop</td>
            <td>$800</td>
            <td>10</td>
        </tr>

        <tr>
            <td>Monitor</td>
            <td>$200</td>
            <td>15</td>
        </tr>

        <tr>
            <td>Keyboard</td>
            <td>$50</td>
            <td>25</td>
        </tr>

    </table>

</body>

</html>

Expected Output

The browser will conceptually display:

Product       Price       Stock

Laptop        $800        10
Monitor       $200        15
Keyboard      $50         25

Without CSS, the table may look very simple because HTML defines the structure while CSS is normally used to control visual presentation.

Adding Table Borders

For modern HTML, table presentation should normally be controlled using CSS.

Example:

<style>

    table,
    th,
    td {
        border: 1px solid black;
    }

</style>

Complete example:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Table Border</title>

    <style>

        table,
        th,
        td {
            border: 1px solid black;
        }

    </style>

</head>

<body>

    <table>

        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>

        <tr>
            <td>Laptop</td>
            <td>$800</td>
        </tr>

    </table>

</body>

</html>

Border Collapse

You may notice double-looking borders between table cells.

CSS provides:

border-collapse: collapse;

Example:

table {
    border-collapse: collapse;
}

Complete CSS:

table {
    border-collapse: collapse;
}

th,
td {
    border: 1px solid black;
}

This collapses adjoining cell borders into a single border model.

Table Cell Padding

Content may appear too close to the cell border.

Use CSS padding:

th,
td {
    padding: 10px;
}

Example:

<style>

    table {
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid black;
        padding: 10px;
    }

</style>

The `<caption>` Element

The <caption> element provides a title or description for a table.

Example:

<table>

    <caption>Computer Product Price List</caption>

    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>$800</td>
    </tr>

</table>

The caption belongs directly to the table.

Why Is `<caption>` Useful?

A caption helps users understand what the table represents.

For example:

<caption>Monthly Sales Report — January 2026</caption>

This provides context before users inspect individual rows and columns.

Table Structure with `<thead>`

<thead> represents a group of header rows.

Example:

<table>

    <thead>

        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>

    </thead>

</table>

The `<tbody>` Element

<tbody> contains the main body rows of a table.

Example:

<tbody>

    <tr>
        <td>Laptop</td>
        <td>$800</td>
    </tr>

    <tr>
        <td>Monitor</td>
        <td>$200</td>
    </tr>

</tbody>

The `<tfoot>` Element

<tfoot> represents a group of footer rows.

It can be useful for:

• Totals
• Summaries
• Final calculations

Example:

<tfoot>

    <tr>
        <th>Total</th>
        <td>$1000</td>
    </tr>

</tfoot>

Complete Structured Table

Example:

<table>

    <caption>Monthly Sales</caption>

    <thead>

        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Sales</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>Laptop</td>
            <td>5</td>
            <td>$4000</td>
        </tr>

        <tr>
            <td>Monitor</td>
            <td>10</td>
            <td>$2000</td>
        </tr>

    </tbody>

    <tfoot>

        <tr>
            <th colspan="2">Total Sales</th>
            <td>$6000</td>
        </tr>

    </tfoot>

</table>

Table Structure

The structure can be understood as:

TABLE
│
├── CAPTION
│
├── THEAD
│   └── TR
│       ├── TH
│       ├── TH
│       └── TH
│
├── TBODY
│   ├── TR
│   │   ├── TD
│   │   ├── TD
│   │   └── TD
│   │
│   └── TR
│       ├── TD
│       ├── TD
│       └── TD
│
└── TFOOT
    └── TR
        ├── TH
        └── TD

What Is `colspan`?

colspan allows a table cell to span multiple columns.

Example:

<table>

    <tr>
        <th colspan="2">Student Information</th>
    </tr>

    <tr>
        <td>Name</td>
        <td>John</td>
    </tr>

</table>

Here:

colspan="2"

means the header cell spans two columns.

Practical `colspan` Example

<table>

    <tr>
        <th colspan="3">Computer Shop</th>
    </tr>

    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>$800</td>
        <td>10</td>
    </tr>

</table>

Computer Shop spans all three columns.

What Is `rowspan`?

rowspan allows a cell to span multiple rows.

Example:

<table>

    <tr>
        <th>Category</th>
        <th>Product</th>
    </tr>

    <tr>
        <td rowspan="2">Computer</td>
        <td>Laptop</td>
    </tr>

    <tr>
        <td>Desktop PC</td>
    </tr>

</table>

Here:

rowspan="2"

means:

The Computer cell covers two rows.

`colspan` vs `rowspan`

Remember:

colspan → Merge across columns

rowspan → Merge across rows

Example:

<td colspan="2">Two Columns</td>

Example:

<td rowspan="2">Two Rows</td>

Header Scope

For clearer table semantics, <th> can use the scope attribute.

Column header:

<th scope="col">Product</th>

Row header:

<th scope="row">Laptop</th>

Example:

<table>

    <tr>
        <th scope="col">Product</th>
        <th scope="col">Price</th>
    </tr>

    <tr>
        <th scope="row">Laptop</th>
        <td>$800</td>
    </tr>

</table>

scope helps communicate which cells a header applies to, particularly for assistive technologies.

Practical Example: Computer Shop Price List

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Computer Price List</title>

    <style>

        table {
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid black;
            padding: 10px;
        }

    </style>

</head>

<body>

    <h1>Computer Shop Price List</h1>

    <table>

        <caption>Current Product Prices</caption>

        <thead>

            <tr>
                <th scope="col">Product</th>
                <th scope="col">Specification</th>
                <th scope="col">Price</th>
                <th scope="col">Stock</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <td>Laptop</td>
                <td>16GB RAM / 512GB SSD</td>
                <td>$800</td>
                <td>10</td>
            </tr>

            <tr>
                <td>Desktop PC</td>
                <td>16GB RAM / 1TB SSD</td>
                <td>$700</td>
                <td>8</td>
            </tr>

            <tr>
                <td>Monitor</td>
                <td>24-inch Full HD</td>
                <td>$200</td>
                <td>15</td>
            </tr>

        </tbody>

    </table>

</body>

</html>

Practical Example: Student Result Table

<table>

    <caption>Student Examination Results</caption>

    <thead>

        <tr>
            <th scope="col">Student</th>
            <th scope="col">HTML</th>
            <th scope="col">CSS</th>
            <th scope="col">JavaScript</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <th scope="row">Alex</th>
            <td>85</td>
            <td>80</td>
            <td>75</td>
        </tr>

        <tr>
            <th scope="row">Sarah</th>
            <td>90</td>
            <td>88</td>
            <td>92</td>
        </tr>

    </tbody>

</table>

Practical Example: Course Schedule

<table>

    <caption>Web Development Class Schedule</caption>

    <thead>

        <tr>
            <th scope="col">Day</th>
            <th scope="col">Topic</th>
            <th scope="col">Duration</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>Monday</td>
            <td>HTML</td>
            <td>2 Hours</td>
        </tr>

        <tr>
            <td>Tuesday</td>
            <td>CSS</td>
            <td>2 Hours</td>
        </tr>

        <tr>
            <td>Wednesday</td>
            <td>JavaScript</td>
            <td>2 Hours</td>
        </tr>

    </tbody>

</table>

Practical Example: Sales Report

<table>

    <caption>Monthly Sales Report</caption>

    <thead>

        <tr>
            <th scope="col">Product</th>
            <th scope="col">Quantity</th>
            <th scope="col">Sales</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>Laptop</td>
            <td>5</td>
            <td>$4000</td>
        </tr>

        <tr>
            <td>Monitor</td>
            <td>10</td>
            <td>$2000</td>
        </tr>

        <tr>
            <td>Keyboard</td>
            <td>20</td>
            <td>$1000</td>
        </tr>

    </tbody>

    <tfoot>

        <tr>
            <th colspan="2" scope="row">Total Sales</th>
            <td>$7000</td>
        </tr>

    </tfoot>

</table>

Tables Should Be Used for Data

This is very important.

Tables should normally represent tabular data.

Good use:

• Price comparison
• Product specifications
• Reports
• Schedules
• Results
• Inventory

Do not use HTML tables simply to create the overall visual layout of a modern website.

For example, do not build your entire:

Header

Sidebar

Main Content

Footer

using a table.

Modern page layouts are normally created using CSS techniques such as:

• Flexbox
• Grid

You will learn these later in the course.

Table Accessibility

Tables can become difficult to understand when they contain complex data.

Useful practices include:

• Use <caption> when the table needs a clear title or description.

• Use <th> for actual headers.

• Use scope="col" for straightforward column headers.

• Use scope="row" for straightforward row headers.

• Keep table structure logical.

• Avoid unnecessarily complex merged cells.

Example:

<th scope="col">Price</th>

This indicates that the header applies to a column.

Responsive Table Problem

Large tables can be wider than a mobile screen.

A common basic solution is to place the table inside a container.

HTML:

<div class="table-container">

    <table>
        <!-- Table content -->
    </table>

</div>

CSS:

.table-container {
    overflow-x: auto;
}

This allows horizontal scrolling when the table is wider than its container.

Complete Responsive Table Example

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Product Table</title>

    <style>

        .table-container {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid black;
            padding: 10px;
            text-align: left;
        }

    </style>

</head>

<body>

    <h1>Product Price List</h1>

    <div class="table-container">

        <table>

            <caption>Computer Products</caption>

            <thead>

                <tr>
                    <th scope="col">Product</th>
                    <th scope="col">Specification</th>
                    <th scope="col">Price</th>
                    <th scope="col">Stock</th>
                </tr>

            </thead>

            <tbody>

                <tr>
                    <td>Gaming Laptop</td>
                    <td>16GB RAM / 1TB SSD</td>
                    <td>$999</td>
                    <td>5</td>
                </tr>

                <tr>
                    <td>Monitor</td>
                    <td>24-inch Full HD</td>
                    <td>$200</td>
                    <td>15</td>
                </tr>

            </tbody>

        </table>

    </div>

</body>

</html>

Common Beginner Mistakes

1. Writing `<td>` Outside `<tr>`

Incorrect:

<table>

    <td>Laptop</td>

</table>

Correct:

<table>

    <tr>
        <td>Laptop</td>
    </tr>

</table>

2. Using `<td>` for Every Cell

If a cell is actually a header, use <th>.

Instead of:

<tr>
    <td>Product</td>
    <td>Price</td>
</tr>

Prefer:

<tr>
    <th scope="col">Product</th>
    <th scope="col">Price</th>
</tr>

3. Different Number of Cells Without a Reason

Example:

<tr>
    <th>Name</th>
    <th>Price</th>
    <th>Stock</th>
</tr>

<tr>
    <td>Laptop</td>
    <td>$800</td>
</tr>

The second row is missing a stock cell.

Unless colspan or rowspan is intentionally being used, keep the table grid logically consistent.

4. Incorrect `colspan`

Suppose a table has three columns.

Using:

<td colspan="5">

may create an unintended table structure.

Understand the number of columns before using colspan.

5. Incorrect `rowspan`

When using rowspan, remember that the spanning cell occupies space in the following rows.

Plan the table grid carefully.

6. Using Tables for Website Layout

Avoid using tables to position:

Logo

Navigation

Sidebar

Content

Footer

Use CSS layout systems instead.

7. Forgetting Table Headers

A table containing data should have meaningful headers when appropriate.

8. Using HTML Presentation Attributes

Older tutorials may show attributes such as:

<table border="1">

For modern projects, use CSS for presentation instead:

table,
th,
td {
    border: 1px solid black;
}

New & Difficult Words

HTML = HyperText Markup Language

Table = Structured representation of tabular data

Row = Horizontal group of cells

Column = Vertical group of cells

Cell = Individual unit in a table

TR = Table Row

TH = Table Header Cell

TD = Table Data Cell

Caption = Title or description associated with a table

THEAD = Table Head

TBODY = Table Body

TFOOT = Table Footer

Colspan = Number of columns a cell spans

Rowspan = Number of rows a cell spans

Scope = Attribute describing whether a header applies to a row, column, or related group

Tabular Data = Data naturally organized into rows and columns

Responsive = Able to work appropriately across different screen sizes

Accessibility = Making content usable by people with different abilities and assistive technologies

Border = Line around an element

Padding = Space between content and its border

Border Collapse = CSS table-border model that combines adjoining borders

Important Notes

Remember:

<table> = Complete table

<tr> = Table Row

<th> = Table Header Cell

<td> = Table Data Cell

<caption> = Table Caption

<thead> = Header Row Group

<tbody> = Main Table Body

<tfoot> = Footer Row Group

colspan = Span Multiple Columns

rowspan = Span Multiple Rows

Basic structure:

<table>

    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>$800</td>
    </tr>

</table>

More structured version:

<table>

    <caption>Product Prices</caption>

    <thead>

        <tr>
            <th scope="col">Product</th>
            <th scope="col">Price</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>Laptop</td>
            <td>$800</td>
        </tr>

    </tbody>

</table>

Most importantly:

Use HTML tables for tabular data, not general page layout.

Practice Questions

What is an HTML table?
What does <table> represent?
What does <tr> mean?
What does <th> represent?
What does <td> represent?
What is the difference between <th> and <td>?
What is <caption> used for?
What does <thead> represent?
What does <tbody> represent?
What does <tfoot> represent?
What does colspan do?
What does rowspan do?
What does scope="col" mean?
What does scope="row" mean?
Why should tables not be used for general website layout?
How can CSS add borders to a table?
What does border-collapse: collapse do?
How can a wide table be made easier to use on a small screen?

Assignment

Create a folder named:

class-13

Inside it create:

index.html

Create a Computer Shop Inventory Table.

The table must contain these columns:

Product ID
Product Name
Category
Price
Quantity
Stock Status

Add at least five products.

For example:

Laptop

Desktop PC

Monitor

Keyboard

Mouse

Your table must include:

• <table>

• <caption>

• <thead>

• <tbody>

• <tfoot>

• <tr>

• <th>

• <td>

• scope

• colspan

Then create another table demonstrating rowspan.

Add basic CSS for:

• Borders

• Padding

• border-collapse

• Responsive horizontal scrolling

Finally:

Save the file.
Open it in your browser.
Check every row and column.
Resize the browser window.
Test the table on a narrow screen.
Inspect the table using Developer Tools.

Quiz

Which HTML element creates a table?

Answer: <table>.

Which element creates a table row?

Answer: <tr>.

Which element represents a header cell?

Answer: <th>.

Which element represents a normal data cell?

Answer: <td>.

Which element provides a table caption?

Answer: <caption>.

Which element groups header rows?

Answer: <thead>.

Which element groups the main table rows?

Answer: <tbody>.

Which element groups footer rows?

Answer: <tfoot>.

What does colspan="3" mean?

Answer: The cell spans three columns.

What does rowspan="2" mean?

Answer: The cell spans two rows.

What does scope="col" indicate?

Answer: The header applies to a column.

Should tables normally be used for complete website layouts?

Answer: No. Tables should primarily be used for tabular data.

Interview Questions

Q: What is an HTML table?

Answer: An HTML table represents tabular data organized into rows and columns.

Q: What is the difference between <th> and <td>?

Answer: <th> represents a table header cell, while <td> represents a normal data cell.

Q: What is the purpose of <thead>, <tbody>, and <tfoot>?

Answer: They group the header, main body, and footer rows of a table, providing a clearer semantic structure.

Q: What is colspan?

Answer: colspan specifies how many columns a table cell should span.

Q: What is rowspan?

Answer: rowspan specifies how many rows a table cell should span.

Q: What is the purpose of the scope attribute?

Answer: The scope attribute helps identify which row, column, or group of cells a table header applies to.

Q: Why should tables not be used for page layout?

Answer: Tables are intended for tabular data. Modern page layout should normally use CSS layout systems such as Flexbox and Grid.

Q: How can you make a large table more usable on mobile devices?

Answer: One basic technique is to place the table inside a container with horizontal overflow enabled.

Example:

.table-container {
    overflow-x: auto;
}

Class Summary

In Class 13, you learned how to create structured HTML tables.

You learned:

<table> → Table

<tr> → Table Row

<th> → Table Header Cell

<td> → Table Data Cell

<caption> → Table Caption

<thead> → Table Head

<tbody> → Table Body

<tfoot> → Table Footer

colspan → Span Multiple Columns

rowspan → Span Multiple Rows

scope → Header Relationship

You also learned:

• Table borders
• Cell padding
• Border collapse
• Structured tables
• Product tables
• Sales tables
• Result tables
• Responsive tables
• Table accessibility

The most important basic structure is:

<table>

    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>$800</td>
    </tr>

</table>

Remember:

Rows → <tr>

Headers → <th>

Data → <td>

HTML → Table structure and meaning

CSS → Table appearance

Tables → Tabular data, not general website layout

Next Class:

Class 14 — HTML Forms Basics

HTML Tables — Rows, Columns, Headers & Structured Data

What Is an HTML Table?

Basic HTML Table

The <table> Element

The <tr> Element

The <th> Element

The <td> Element

Understanding Rows and Columns

Complete Basic Table Example

Expected Output

Adding Table Borders

Border Collapse

Table Cell Padding

The <caption> Element

Why Is <caption> Useful?

Table Structure with <thead>

The <tbody> Element

The <tfoot> Element

Complete Structured Table

Table Structure

What Is colspan?

Practical colspan Example

What Is rowspan?

colspan vs rowspan

Header Scope

Practical Example: Computer Shop Price List

Practical Example: Student Result Table

Practical Example: Course Schedule

Practical Example: Sales Report

Tables Should Be Used for Data

Table Accessibility

Responsive Table Problem

Complete Responsive Table Example

Common Beginner Mistakes

1. Writing <td> Outside <tr>

2. Using <td> for Every Cell

3. Different Number of Cells Without a Reason

4. Incorrect colspan

5. Incorrect rowspan

6. Using Tables for Website Layout

7. Forgetting Table Headers

8. Using HTML Presentation Attributes

New & Difficult Words

Important Notes

Practice Questions

Assignment

Quiz

Interview Questions

Class Summary

Leave a Reply Cancel reply

The `<table>` Element

The `<tr>` Element

The `<th>` Element

The `<td>` Element

The `<caption>` Element

Why Is `<caption>` Useful?

Table Structure with `<thead>`

The `<tbody>` Element

The `<tfoot>` Element

What Is `colspan`?

Practical `colspan` Example

What Is `rowspan`?

`colspan` vs `rowspan`

1. Writing `<td>` Outside `<tr>`

2. Using `<td>` for Every Cell

4. Incorrect `colspan`

5. Incorrect `rowspan`