HTML Tables – Create Professional Tables in HTML (Complete Beginner's Guide)

By IncomeVA Editorial Team 06 Aug 2026

Learn HTML tables from scratch with practical examples. Understand table rows, columns, headers, borders, colspan, rowspan, and build professional HTML tables.

HTML Tables – Create Professional Tables in HTML

Displaying information in a clear and organized format is an important part of web development. Whether you're showing student records, product prices, schedules, invoices, or reports, tables help present data in an easy-to-read structure.

HTML provides built-in elements for creating tables using rows and columns. A table consists of several parts, including the table itself, rows, header cells, and data cells.

In this tutorial, you'll learn how HTML tables work, understand the purpose of each table element, and create your first professional table with practical examples.

What is an HTML Table?

An HTML Table is used to organize information into rows and columns. Each row contains one or more cells, allowing related data to be displayed in a structured format.

For example, schools use tables to display student information, businesses use them for employee records, online stores use tables for product comparisons, and websites often display pricing plans using tables.

HTML tables should only be used for displaying tabular data. They should not be used to create the layout of an entire webpage.

Basic HTML Table Structure

An HTML table is built using four main tags.

Tag	Description
<table>	Creates the table container.
<tr>	Creates a table row.
<th>	Creates a heading cell.
<td>	Creates a data cell.

Every HTML table is created using these four elements.

Create Your First HTML Table

The example below creates a simple table with three columns and two rows of data.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Tables</title>
</head>

<body>

<table>

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

    <tr>
        <td>John</td>
        <td>22</td>
        <td>USA</td>
    </tr>

    <tr>
        <td>Sarah</td>
        <td>20</td>
        <td>Canada</td>
    </tr>

</table>

</body>

</html>

Output

Name	Age	Country
John	22	USA
Sarah	20	Canada

Understanding Each HTML Table Tag

<table>

The <table> tag creates the entire table. Every row, heading, and data cell must be placed inside this tag.

<table>

</table>

<tr> — Table Row

The <tr> tag creates a new table row.

<tr>

</tr>

Every row in a table starts with the <tr> tag.

<th> — Table Heading

The <th> tag creates a heading cell. Browsers display heading cells in bold and center-align them by default.

<th>Name</th>

<td> — Table Data

The <td> tag creates a normal data cell inside a row.

<td>John</td>

Every piece of information inside a table is placed inside a <td> element.

Real-World Example

The following example displays student information using an HTML table.

<table>

<tr>
    <th>ID</th>
    <th>Name</th>
    <th>Course</th>
    <th>Country</th>
</tr>

<tr>
    <td>101</td>
    <td>John</td>
    <td>HTML</td>
    <td>USA</td>
</tr>

<tr>
    <td>102</td>
    <td>Sarah</td>
    <td>CSS</td>
    <td>Canada</td>
</tr>

<tr>
    <td>103</td>
    <td>Alex</td>
    <td>JavaScript</td>
    <td>Australia</td>
</tr>

</table>

Output

ID	Name	Course	Country
101	John	HTML	USA
102	Sarah	CSS	Canada
103	Alex	JavaScript	Australia

Where Are HTML Tables Used?

Student information systems
Employee records
Product comparison tables
Pricing tables
Invoices and bills
Exam results
Sports scoreboards
Financial reports
Schedules and timetables
Inventory management

Common Beginner Mistakes

Forgetting to close HTML table tags.
Using <td> instead of <th> for table headings.
Missing the <tr> tag when creating rows.
Using HTML tables for page layouts instead of CSS.

Key Points

<table> creates the table.
<tr> creates a row.
<th> creates a table heading.
<td> creates a data cell.
Tables are designed for displaying structured data.

Practice Exercise

Create an HTML table with the following columns:

Product
Price
Stock

Add at least four products and display them inside your table.

Try writing the code yourself before looking at the solution.

Adding Borders to HTML Tables

By default, HTML tables do not display borders. Without borders, it becomes difficult to distinguish rows and columns. CSS allows you to add borders and improve the appearance of your tables.

The following example adds a simple black border to the table, table headers, and table cells.

<!DOCTYPE html>
<html>

<head>

<style>

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

</style>

</head>

<body>

<table>

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

<tr>
    <td>John</td>
    <td>22</td>
    <td>USA</td>
</tr>

<tr>
    <td>Sarah</td>
    <td>20</td>
    <td>Canada</td>
</tr>

</table>

</body>

</html>

Border Collapse

When borders are added, every table cell has its own border. This creates a double-border effect.

To merge all borders into a single clean border, use the border-collapse property.

table{
    border-collapse:collapse;
}

This makes the table look much cleaner and more professional.

Adding Cell Padding

Padding creates space between the text and the border of each cell. Without padding, table content appears crowded.

th, td{
    padding:12px;
}

Most professional websites use padding between 10px and 15px.

Setting Table Width

You can control the width of your table using CSS.

table{
    width:100%;
}

Other common values include:

width:80%;
width:600px;
width:900px;

Using width:100% allows the table to fill the available space.

Setting Row Height

You can increase the height of each row for better readability.

tr{
    height:60px;
}

Aligning Table Text

Center Alignment

th, td{
    text-align:center;
}

Left Alignment

th, td{
    text-align:left;
}

Right Alignment

th, td{
    text-align:right;
}

Choose the alignment that best suits your data.

Adding Background Colors

You can make your table headings stand out by giving them a background color.

th{
    background:#0d6efd;
    color:white;
}

This creates a modern and professional table header.

Zebra Stripe Tables

Long tables are easier to read when alternating rows have different background colors. This style is known as a Zebra Table.

tr:nth-child(even){
    background:#f2f2f2;
}

Alternating row colors improve readability, especially for large datasets.

Hover Effect

You can highlight a row when the user moves the mouse over it.

tr:hover{
    background:#dbeafe;
}

Hover effects provide a better user experience and make tables more interactive.

Adding a Table Caption

The <caption> element provides a title for your table.

<table>

<caption>Student Information</caption>

...

</table>

The caption appears above the table and describes its purpose.

Complete Professional Table Example

<!DOCTYPE html>
<html>

<head>

<style>

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

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

th{
    background:#0d6efd;
    color:white;
    padding:12px;
}

td{
    padding:12px;
}

tr:nth-child(even){
    background:#f8f9fa;
}

tr:hover{
    background:#e8f2ff;
}

</style>

</head>

<body>

<table>

<caption>Employee Information</caption>

<tr>
    <th>ID</th>
    <th>Name</th>
    <th>Department</th>
    <th>Salary</th>
</tr>

<tr>
    <td>101</td>
    <td>John</td>
    <td>IT</td>
    <td>$2500</td>
</tr>

<tr>
    <td>102</td>
    <td>Sarah</td>
    <td>HR</td>
    <td>$2200</td>
</tr>

<tr>
    <td>103</td>
    <td>Alex</td>
    <td>Marketing</td>
    <td>$2800</td>
</tr>

</table>

</body>

</html>

Common Beginner Mistakes

Not using border-collapse.
Adding very little padding, making tables difficult to read.
Forgetting to style table headings.
Using fixed widths that break on mobile devices.
Using bright background colors that reduce readability.

Practice Exercise

Create a product table with the following columns:

Product Name
Category
Price
Stock

Your table should include:

A blue header with white text.
1px borders.
12px padding.
border-collapse property.
Alternating row colors.
A hover effect.
100% table width.
A table caption.

Try building the table yourself before checking the next tutorial.

HTML Colspan

Sometimes a table cell needs to cover more than one column. Instead of creating multiple separate cells, HTML provides the colspan attribute.

The colspan attribute allows a single cell to span across two or more columns. This is useful when creating table headings, reports, invoices, schedules, and many other professional tables.

Syntax

<td colspan="2">Content</td>

The value "2" means the cell will occupy the space of two columns.

Example: Using Colspan

<!DOCTYPE html>
<html>

<body>

<table border="1">

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

<tr>
    <td>John</td>
    <td>john@email.com</td>
    <td>+1 123456789</td>
</tr>

</table>

</body>

</html>

In this example, the heading Contact Information spans two columns.

HTML Rowspan

The rowspan attribute allows a cell to span multiple rows.

This is useful when the same information belongs to several rows.

Syntax

<td rowspan="2">Content</td>

Example: Using Rowspan

<!DOCTYPE html>
<html>

<body>

<table border="1">

<tr>
    <th>Student</th>
    <th>Subject</th>
</tr>

<tr>
    <td rowspan="2">John</td>
    <td>HTML</td>
</tr>

<tr>
    <td>CSS</td>
</tr>

</table>

</body>

</html>

The name John occupies two rows while the subjects are displayed separately.

Using Colspan and Rowspan Together

You can combine both attributes to create more advanced table layouts.

<table border="1">

<tr>
    <th rowspan="2">Employee</th>
    <th colspan="2">Salary</th>
</tr>

<tr>
    <th>Monthly</th>
    <th>Yearly</th>
</tr>

<tr>
    <td>John</td>
    <td>$2500</td>
    <td>$30000</td>
</tr>

<tr>
    <td>Sarah</td>
    <td>$2800</td>
    <td>$33600</td>
</tr>

</table>

This layout is commonly used in reports, financial statements, and comparison tables.

Responsive HTML Tables

Large tables may not fit on mobile devices. A simple solution is to place the table inside a responsive container.

<div class="table-responsive">

    <table>

        ...

    </table>

</div>

CSS

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

This allows users to scroll horizontally on smaller screens instead of breaking the layout.

HTML Table Best Practices

Use tables only for displaying data.
Always use <th> for heading cells.
Add a meaningful <caption> whenever possible.
Use CSS instead of old HTML styling attributes.
Keep table layouts clean and simple.
Use enough padding for better readability.
Make large tables responsive.
Test tables on both desktop and mobile devices.

Common Mistakes

Using Tables for Website Layout

Modern websites should use CSS Flexbox or CSS Grid for layouts. HTML tables are only intended for tabular data.

Missing Table Headers

Always use the <th> element for headings instead of regular data cells.

Too Many Merged Cells

Overusing colspan and rowspan can make tables confusing. Merge cells only when necessary.

Not Testing on Mobile

Wide tables may overflow on small screens if they are not responsive.

Real-World Project

Create the following Employee Information table.

Employee ID	Name	Department	Position	Salary
101	John	IT	Developer	$2500
102	Sarah	HR	Manager	$2800
103	Alex	Marketing	SEO Specialist	$2300
104	Emma	Finance	Accountant	$2700

Style this table using everything you learned in this tutorial.

Add borders.
Use border-collapse.
Add padding.
Create a blue table header.
Add zebra striping.
Add a hover effect.
Make the table responsive.

Practice Exercises

Exercise 1

Create a table showing five students with the following columns:

ID
Name
Course
Country

Exercise 2

Create a school timetable using the colspan attribute.

Exercise 3

Create a company employee table using the rowspan attribute.

Exercise 4

Create a pricing table with three plans:

Basic
Professional
Premium

Quick Quiz

1. Which tag creates an HTML table?

A. <table>
B. <tab>
C. <tbody>
D. <thead>

Answer: A

2. Which tag creates a table row?

A. <td>
B. <tr>
C. <th>
D. <row>

Answer: B

3. Which tag creates a heading cell?

A. <thead>
B. <th>
C. <head>
D. <caption>

Answer: B

4. Which attribute merges multiple columns?

A. rowspan
B. colspan
C. merge
D. columnspan

Answer: B

5. Which attribute merges multiple rows?

A. colspan
B. rowspan
C. rows
D. merge

Answer: B

Summary

Congratulations! You have successfully learned how to create HTML tables from scratch.

In this tutorial, you learned how to create tables using <table>, <tr>, <th>, and <td>. You also learned how to style tables with CSS, add borders, padding, colors, captions, hover effects, and zebra stripes. Finally, you explored advanced features such as colspan, rowspan, responsive tables, and professional best practices.

HTML tables are an essential skill for every web developer because they are widely used in dashboards, reports, pricing pages, school management systems, inventory software, and many other real-world applications

#HTML Tables#HTML Table Tutorial#Learn HTML Tables#HTML Table for Beginners#Create HTML Table#HTML Table Example#HTML Table Tags#HTML Table Row#HTML Table Column#HTML tr td th#HTML Table Border#HTML Table CSS#HTML Table Styling#HTML Table Width#HTML Table Height#HTML Table Caption#HTML Table Colspan#HTML Table Rowspan#Responsive HTML Tables#HTML Table Practice#HTML Table Exercises#HTML Tutorial#Learn HTML#Web Design Tutorial#HTML Course#Frontend Development#HTML Beginner

HTML Tables – Create Professional Tables in HTML (Complete Beginner's Guide)

HTML Tables – Create Professional Tables in HTML

What is an HTML Table?

Basic HTML Table Structure

Create Your First HTML Table

Output

Understanding Each HTML Table Tag

<table>

<tr> — Table Row

<th> — Table Heading

<td> — Table Data

Real-World Example

Output

Where Are HTML Tables Used?

Common Beginner Mistakes

Key Points

Practice Exercise

Adding Borders to HTML Tables

Border Collapse

Adding Cell Padding

Setting Table Width

Setting Row Height

Aligning Table Text

Center Alignment

Left Alignment

Right Alignment

Adding Background Colors

Zebra Stripe Tables

Hover Effect

Adding a Table Caption

Complete Professional Table Example

Common Beginner Mistakes

Practice Exercise

HTML Colspan

Syntax

Example: Using Colspan

HTML Rowspan

Syntax

Example: Using Rowspan

Using Colspan and Rowspan Together

Responsive HTML Tables

HTML Table Best Practices

Common Mistakes

Using Tables for Website Layout

Missing Table Headers

Too Many Merged Cells

Not Testing on Mobile

Real-World Project

Practice Exercises

Exercise 1

Exercise 2

Exercise 3

Exercise 4

Quick Quiz

Summary

Latest Blogs