HTML Tables

Learn how to create HTML tables to display structured data in rows and columns. Understand table elements, rows, columns, colspan, rowspan, and best practices.

Introduction

In the previous lesson, you learned about HTML Lists and how they organize related information.

However, not all information can be presented effectively using lists.

Consider student information written as Rahul - 85, Priya - 92, and Amit - 78. Although the information is understandable, comparing the students and their marks requires extra effort.

A table presents the same information in clearly defined rows and columns, making relationships and comparisons much easier to understand.

Unstructured Data

Rahul - 85
Priya - 92
Amit - 78

Structured Table Data

Name      Marks
────────────────
Rahul       85
Priya       92
Amit        78

Collect Related Data

↓

Identify Data Categories

↓

Create Columns

↓

Add Records as Rows

↓

Display Structured Information

Tables Organize Structured Data

HTML provides the <table> element to display related information in rows and columns.

What is an HTML Table?

An HTML table is a structure used to organize related data into rows and columns.

Each row usually represents one record, while each column represents one category or property of that record.

Tables make structured information easier to read, compare, analyze, and understand.

Student Results

Display student names, subjects, marks, grades, and results.

Employee Records

Organize employee names, departments, positions, and salaries.

Product Prices

Compare products, features, prices, and availability.

Timetables

Display days, times, subjects, meetings, or scheduled activities.

Transactions

Organize dates, descriptions, amounts, and account balances.

Reports

Present structured business, financial, and analytical information.

Unstructured Information

Data appears continuously.
Relationships are harder to identify.
Comparisons require more effort.
Large datasets become confusing.

Tabular Information

Data is divided into rows and columns.
Relationships are clearly visible.
Values can be compared quickly.
Large datasets become easier to scan.

Simple Definition

An HTML table is used to display structured data in a grid of rows and columns.

Why Do We Need Tables?

Many types of information contain repeated records with the same categories.

For example, every student record may contain a name, subject, marks, and grade. A table aligns these values under common column headings.

This structured arrangement allows users to compare related values quickly without reading long paragraphs or separate lists.

Without Tables

Data becomes difficult to compare.
Reports become confusing.
Records are poorly organized.
Relationships between values are unclear.
Large datasets become harder to understand.

With Tables

Structured data is organized logically.
Reports become easier to understand.
Records follow a consistent structure.
Related values align clearly.
Information can be compared quickly.

Organization

Arrange repeated records into a consistent structure.

Comparison

Compare values across multiple records quickly.

Readability

Present structured information in a familiar grid.

Reporting

Display professional reports and summaries.

Analysis

Help users identify patterns and differences.

Records

Organize large collections of related information.

Identify Repeated Records

↓

Find Common Data Categories

↓

Create Columns for Categories

↓

Create Rows for Records

↓

Compare Information Easily

Use Tables for Tabular Data

When information naturally has repeated records and common categories, a table is often the clearest structure.

Real-World Analogy

Imagine a school attendance register.

The register may contain columns for Roll Number, Name, Attendance, and Marks.

Each student occupies a separate horizontal row, while each type of information occupies a vertical column.

School Register Analogy

Roll No    Name      Attendance    Marks
──────────────────────────────────────────
101        Rahul         92%          85
102        Priya         96%          92
103        Amit          88%          78

School Register

Each student has one row.
Each property has one column.
Column headings describe the data.
Values can be compared quickly.

HTML Table

Each record can have one row.
Each category can have one column.
<th> elements describe the data.
Cells align related values clearly.

Real World and HTML

School Register             HTML Table
────────────────            ──────────

Complete Register            <table>
      │                          │
      ▼                          ▼
Student Record               <tr>
      │                          │
      ▼                          ▼
Name / Marks                <td> / <th>

Tables Create a Data Grid

Just as a school register aligns student records into rows and categories into columns, an HTML table organizes webpage data into a structured grid.

Main Table Elements

HTML tables are created using several elements that work together.

The <table> element creates the complete table, <tr> creates rows, <th> creates header cells, and <td> creates standard data cells.

Element	Full Meaning	Purpose
<table>	Table	Creates the complete table container
<tr>	Table Row	Creates a horizontal row
<th>	Table Header	Creates a header cell
<td>	Table Data	Creates a standard data cell

Basic Table Structure

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>

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

Element Relationship

<table>
 │
 ├── <tr>
 │      │
 │      ├── <th>Heading 1</th>
 │      └── <th>Heading 2</th>
 │
 └── <tr>
        │
        ├── <td>Data 1</td>
        └── <td>Data 2</td>
 │
</table>

<table>

Contains the complete table structure.

<tr>

Creates one horizontal table row.

<th>

Represents a heading for a row or column.

<td>

Contains a standard piece of table data.

Cells Belong Inside Rows

Table header and data cells must be placed inside table rows.

Example 1: Simple Table

The following example creates a simple table containing names and ages.

Simple Table

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>Rahul</td>
        <td>22</td>
    </tr>

    <tr>
        <td>Priya</td>
        <td>21</td>
    </tr>
</table>

Simple Table Example

The first row contains two <th> elements that identify the Name and Age columns.

The remaining rows contain <td> elements with the actual student data.

How the Table is Built

Table
 │
 ├── Row 1 → Name     | Age
 │
 ├── Row 2 → Rahul    | 22
 │
 └── Row 3 → Priya    | 21

Row	First Cell	Second Cell	Purpose
Row 1	Name	Age	Column headings
Row 2	Rahul	22	First data record
Row 3	Priya	21	Second data record

One Row Contains Related Cells

Each table row groups cells that belong to the same horizontal record.

Understanding Rows and Columns

Tables use a grid made from horizontal rows and vertical columns.

HTML directly creates rows using <tr> elements. Columns emerge from the positions of <th> and <td> cells across those rows.

Rows (<tr>)

Horizontal groups of related cells. Each <tr> element creates a new table row.

Columns

Vertical groups formed by cells occupying the same position across multiple rows.

Rows and Columns

                 Columns
              ↓       ↓       ↓

Row 1  →    Name    Subject   Marks
Row 2  →    Rahul    Math      95
Row 3  →    Priya   Science    91

              ↑       ↑       ↑
            Column  Column  Column

Row

Runs horizontally.
Created with <tr>.
Contains related cells.
Often represents one record.

Column

Runs vertically.
Formed by aligned cell positions.
Contains one category of data.
Often represents one property.

Create a Table

↓

Add a Table Row

↓

Add Cells Inside the Row

↓

Repeat Rows with Matching Cell Positions

↓

Columns Form Vertically

HTML Creates Rows Directly

There is no basic <column> element used to insert ordinary table data. Columns are formed by the position of cells across rows.

Example 2: Student Marks Table

The following table contains three columns: Name, Subject, and Marks.

Student Marks Table

<table>
    <tr>
        <th>Name</th>
        <th>Subject</th>
        <th>Marks</th>
    </tr>

    <tr>
        <td>Rahul</td>
        <td>Math</td>
        <td>95</td>
    </tr>

    <tr>
        <td>Priya</td>
        <td>Science</td>
        <td>91</td>
    </tr>
</table>

Student Marks Table

Student Table Structure

                Name      Subject      Marks
                  │           │           │
                  ▼           ▼           ▼

Header Row      Name       Subject       Marks

Data Row 1      Rahul       Math          95

Data Row 2      Priya      Science        91

Record	Name	Subject	Marks
Student 1	Rahul	Math	95
Student 2	Priya	Science	91

Keep Related Columns Consistent

Each data row should place values in the same logical column positions as the header row.

Adding Borders

HTML tables do not automatically display visible borders around every cell.

For simple learning examples, you may encounter the border attribute added directly to the <table> element.

Table with Border Attribute

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>Rahul</td>
        <td>22</td>
    </tr>
</table>

HTML border Attribute

Controls appearance inside HTML.
Considered obsolete in modern HTML.
Provides limited styling control.
Should not be used in professional modern code.

CSS Borders

Separates structure from presentation.
Used in modern web development.
Provides complete styling control.
Can control borders, spacing, and colors.

Modern CSS Approach

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

table {
    border-collapse: collapse;
}

The border Attribute is Obsolete

Use CSS for table borders and visual styling in modern web development.

Column Span (colspan)

Sometimes, one table cell needs to occupy the space of multiple columns.

The colspan attribute allows a cell to extend horizontally across a specified number of columns.

Column Span Example

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

    <tr>
        <td>Name</td>
        <td>Rahul</td>
    </tr>
</table>

Column Span Example

How colspan Works

Normal Row:

┌──────────────┬──────────────┐
│   Column 1   │   Column 2   │
└──────────────┴──────────────┘


colspan="2":

┌─────────────────────────────┐
│     Student Information     │
└─────────────────────────────┘

Attribute	Direction	Purpose
colspan="2"	Horizontal	Cell occupies two columns
colspan="3"	Horizontal	Cell occupies three columns

colspan Extends Horizontally

The colspan value specifies how many column positions a single cell should occupy.

Row Span (rowspan)

Sometimes, one table cell needs to occupy the space of multiple rows.

The rowspan attribute allows a cell to extend vertically across a specified number of rows.

Row Span Example

<table>
    <tr>
        <td rowspan="2">HTML</td>
        <td>Beginner</td>
    </tr>

    <tr>
        <td>Advanced</td>
    </tr>
</table>

Row Span Example

How rowspan Works

Normal Cells:

┌──────────┬──────────────┐
│   HTML   │   Beginner   │
├──────────┼──────────────┤
│   HTML   │   Advanced   │
└──────────┴──────────────┘


rowspan="2":

┌──────────┬──────────────┐
│          │   Beginner   │
│   HTML   ├──────────────┤
│          │   Advanced   │
└──────────┴──────────────┘

colspan

Merges cell space horizontally.
Spans multiple columns.
Changes horizontal grid structure.
Common for grouped headings.

rowspan

Merges cell space vertically.
Spans multiple rows.
Changes vertical grid structure.
Common for shared row values.

rowspan Extends Vertically

The rowspan value specifies how many row positions a single cell should occupy.

Table Hierarchy

HTML tables follow a parent-child structure.

The table contains rows, and each row contains header or data cells.

Table Document Tree

<table>
 │
 ├── <tr>  Row 1
 │      │
 │      ├── <th>  Header 1
 │      └── <th>  Header 2
 │
 └── <tr>  Row 2
        │
        ├── <td>  Data 1
        └── <td>  Data 2
 │
</table>

<table> Creates the Table

↓

<tr> Creates a Row

↓

<th> or <td> Creates a Cell

↓

Cell Content is Added

↓

Browser Builds the Grid

Parent	Common Child	Relationship
<table>	<tr>	A table contains rows
<tr>	<th>	A row can contain header cells
<tr>	<td>	A row can contain data cells

Follow the Table Structure

Do not place ordinary <th> or <td> cells directly inside <table> without an appropriate table row structure.

Browser Rendering Flow

When a browser reads table markup, it identifies the table structure, creates rows, places cells into the grid, and calculates the final layout.

Read HTML Source

↓

Find the <table> Element

↓

Identify Table Rows

↓

Read Header and Data Cells

↓

Calculate Column Positions

↓

Apply colspan and rowspan

↓

Display the Structured Table

Simplified Table Rendering

HTML Source
    │
    ▼
Find <table>
    │
    ▼
Read <tr> Rows
    │
    ▼
Read <th> and <td> Cells
    │
    ▼
Calculate Grid Structure
    │
    ├── Normal Cells
    ├── colspan
    └── rowspan
    │
    ▼
Display Structured Table

HTML Structure

<table> defines the data table.
<tr> defines rows.
<th> defines header cells.
<td> defines data cells.

Browser Result

Rows appear horizontally.
Cells align into columns.
Spanning cells occupy extra grid space.
Data appears in a structured layout.

The Browser Builds a Grid

The browser uses the number and position of cells to calculate the table rows and columns.

Real-World Applications

Tables are used whenever websites and applications need to display structured records or comparable information.

School Management

Display student results, attendance records, schedules, and timetables.

Banking Websites

Display transaction history, account statements, dates, and balances.

E-Commerce

Display product comparisons, order details, invoices, and price lists.

Company Portals

Display employee records, reports, payroll, and performance data.

Travel Websites

Display schedules, fares, routes, and booking information.

Healthcare Systems

Display appointments, test results, and structured patient records.

Financial Reports

Display revenue, expenses, profits, and period comparisons.

Sports Websites

Display scores, standings, player statistics, and match records.

Product Comparison Example

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

    <tr>
        <td>Phone A</td>
        <td>128 GB</td>
        <td>₹40,000</td>
    </tr>

    <tr>
        <td>Phone B</td>
        <td>256 GB</td>
        <td>₹55,000</td>
    </tr>
</table>

Advantages of HTML Tables

Organization

Arrange structured data into logical rows and columns.

Comparison

Make related values easy to compare.

Readability

Present large collections of structured information clearly.

Reporting

Display professional reports and summaries.

Clear Categories

Use headers to identify the meaning of each data category.

Cell Spanning

Support complex data relationships using colspan and rowspan.

Accessibility

Proper headers help assistive technologies understand data relationships.

Styling

Can be customized extensively using CSS.

Organize structured data logically.
Display information in rows and columns.
Make related values easier to compare.
Improve the readability of reports.
Present repeated records consistently.
Support meaningful table headings.
Display large datasets clearly.
Represent schedules and timetables.
Present transaction histories.
Display product comparison information.
Support horizontal cell spanning with colspan.
Support vertical cell spanning with rowspan.
Improve understanding of data relationships.
Support accessible data structures when used correctly.
Allow extensive visual customization with CSS.

Common Beginner Mistakes

Forgetting the <tr> Element

Table header and data cells should be placed inside a table row.

Using <td> for Column Headings

Use <th> when a cell identifies or describes related table data.

Creating Inconsistent Rows

Rows should normally follow a consistent cell structure unless spanning is intentional.

Using Tables for Page Layout

Tables should represent tabular data, not control the general layout of a webpage.

Using the Obsolete border Attribute

Use CSS instead of presentational HTML attributes for modern table styling.

Miscalculating colspan

A spanning cell changes the number of available column positions in that row.

Miscalculating rowspan

A row-spanning cell continues to occupy a column position in following rows.

Creating Overly Complex Tables

Excessive spanning can make tables difficult to understand and maintain.

Place Cells Inside Rows

<!-- ❌ Incorrect -->

<table>
    <td>HTML</td>
</table>


<!-- ✅ Correct -->

<table>
    <tr>
        <td>HTML</td>
    </tr>
</table>

Use Header Cells Correctly

<!-- ❌ Poor Structure -->

<tr>
    <td>Name</td>
    <td>Marks</td>
</tr>


<!-- ✅ Better Structure -->

<tr>
    <th>Name</th>
    <th>Marks</th>
</tr>

Do Not Use Tables for Page Layout

<!-- ❌ Avoid -->

<table>
    <tr>
        <td>Sidebar</td>
        <td>Main Content</td>
    </tr>
</table>


<!-- ✅ Use CSS Layout -->

<div class="page-layout">
    <aside>Sidebar</aside>
    <main>Main Content</main>
</div>

Poor Table Structure

Cells placed outside rows.
Data cells used for headings.
Inconsistent grid structure.
Tables used for page layout.
Unnecessary complex spanning.

Better Table Structure

Cells placed inside rows.
Header cells used meaningfully.
Consistent logical structure.
Tables used only for tabular data.
Spanning used only when necessary.

Tables Are for Data

Do not use HTML tables to create webpage layouts. Modern layouts should be created using CSS techniques such as Flexbox and Grid.

Best Practices

Use tables only for genuinely tabular data.
Do not use tables for general webpage layouts.
Use <th> for cells that identify related data.
Use <td> for ordinary table values.
Place table cells inside appropriate rows.
Keep the logical number of columns consistent.
Use colspan only when one cell genuinely applies to multiple columns.
Use rowspan only when one cell genuinely applies to multiple rows.
Avoid unnecessarily complex spanning structures.
Use CSS instead of the obsolete border attribute.
Use border-collapse when a connected grid appearance is required.
Add sufficient padding to improve readability.
Keep column headings clear and concise.
Keep data formats consistent within the same column.
Align similar types of values consistently.
Use meaningful table headings.
Keep related records inside the same table.
Split unrelated datasets into separate tables.
Avoid extremely wide tables when possible.
Test tables on smaller screens.
Provide responsive behavior for large tables.
Keep table source code properly indented.
Use consistent cell structure across related rows.
Avoid empty cells when a clearer structure is possible.
Prefer simple tables over unnecessarily complicated grids.
Use semantic structure before visual styling.
Make sure headings accurately describe their related data.
Consider accessibility when designing complex tables.
Use CSS for borders, spacing, backgrounds, and typography.
Check the final table for correct row and column alignment.

Professional Table Structure

<table>
    <tr>
        <th>Name</th>
        <th>Department</th>
        <th>Position</th>
    </tr>

    <tr>
        <td>Rahul</td>
        <td>Development</td>
        <td>Software Engineer</td>
    </tr>

    <tr>
        <td>Priya</td>
        <td>Design</td>
        <td>UI Designer</td>
    </tr>
</table>

Keep Tables Simple and Meaningful

A well-structured table should make data relationships easier to understand, not more complicated.

Frequently Asked Questions

What is an HTML table?

An HTML table is a structure used to display related data in rows and columns.

Which element creates a table?

The <table> element creates the table container.

Which element creates a table row?

The <tr> element creates a table row.

What does tr mean?

tr means Table Row.

Which element creates a table header cell?

The <th> element creates a table header cell.

What does th mean?

th means Table Header.

Which element creates a standard table data cell?

The <td> element creates a standard table data cell.

What does td mean?

td means Table Data.

What is a table row?

A table row is a horizontal group of related table cells created with the <tr> element.

How are columns created in a basic HTML table?

Columns are formed by cells occupying matching positions across multiple rows.

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

<th> represents a header cell, while <td> represents an ordinary data cell.

Should I use <td> for column headings?

No. Use <th> for meaningful table headings.

What does colspan do?

The colspan attribute allows one cell to occupy multiple columns horizontally.

What does rowspan do?

The rowspan attribute allows one cell to occupy multiple rows vertically.

What is the difference between colspan and rowspan?

colspan extends a cell horizontally across columns, while rowspan extends a cell vertically across rows.

Can a header cell use colspan?

Yes. Header cells commonly use colspan for headings that apply to multiple columns.

Can a data cell use rowspan?

Yes. A data cell can use rowspan when one value applies to multiple rows.

Can colspan and rowspan be used together?

Yes, but complex combinations should be used carefully because they can make the table difficult to understand.

Why does my table have no visible borders?

Browsers do not necessarily display visible borders around table cells by default. Use CSS to add borders.

Should I use the border attribute?

No. The border attribute is obsolete in modern HTML. Use CSS for table borders.

Can tables be used for webpage layout?

No. Tables should be used for tabular data. Use CSS Flexbox or Grid for webpage layouts.

Can tables contain links and images?

Yes. Table cells can contain many types of HTML content, including links and images, when appropriate for the data.

Are HTML tables accessible?

Tables can be accessible when they use meaningful headers and a clear, logical structure.

What should I learn after HTML Tables?

The next lesson is HTML Forms, where you will learn how to collect information from users.

Key Takeaways

HTML tables display structured data.
Tables organize information into rows and columns.
The <table> element creates the complete table.
The <tr> element creates a table row.
The <th> element creates a table header cell.
The <td> element creates a standard data cell.
Rows run horizontally.
Columns run vertically.
Columns are formed by matching cell positions across rows.
Header cells describe related table data.
Tables make values easier to compare.
Tables are useful for reports and records.
Tables are useful for schedules and timetables.
Tables are useful for transaction histories.
Tables are useful for product comparisons.
The colspan attribute extends a cell across columns.
The rowspan attribute extends a cell across rows.
colspan works horizontally.
rowspan works vertically.
Spanning attributes should be used carefully.
The border attribute is obsolete.
CSS should be used for table styling.
Tables should not be used for webpage layouts.
Table cells should be placed inside rows.
Rows should follow a logical and consistent structure.
Tables should represent genuinely tabular data.
Meaningful headers improve understanding.
Simple table structures are easier to maintain.
Responsive behavior should be considered for wide tables.
Well-structured tables improve readability and comparison.

Summary

HTML tables provide an effective way to display structured information in rows and columns.

The <table> element creates the complete table structure, while <tr> elements create horizontal rows.

The <th> element represents header cells that identify related data, while <td> elements contain ordinary table values.

Rows group related cells horizontally, while columns are formed by cells occupying matching positions across multiple rows.

The colspan attribute allows a cell to extend horizontally across multiple columns, while the rowspan attribute allows a cell to extend vertically across multiple rows.

Although the border attribute may appear in beginner examples, modern HTML uses CSS for table borders and all other visual styling.

Tables should be used only for tabular data such as reports, schedules, records, transactions, statistics, and comparisons.

Tables should not be used to control webpage layout because modern page layouts are created using CSS techniques such as Flexbox and Grid.

By using meaningful headers, consistent rows, appropriate cell spanning, and clear data relationships, developers can create tables that are readable, accessible, and easy to maintain.

In the next lesson, you will learn about HTML Forms and how webpages collect information from users.

Next Lesson →