HTML Tables

Last Updated : 07 May, 2025

HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over 95% of all web pages today, making it an essential part of modern web development.

Basic HTML Table Structure

An HTML table is created using the <table> tag. Inside the table, we use:

<tr>: Table Row
<th>: Table Header
<td>: Table Data

Each <tr> represents a row, and within each row, <th> and <td> tags represent the cells in that row, which can contain text, images, lists, or even another table(discuss below).
TypeScript Tutorial

HTML Table Code Example

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML Table Example — Simple HTML Table

In this Example:

<table>: This tag starts the table. Everything between the opening <table> and closing </table> tags makes up the table.
<tr>: Stands for "table row". Each <tr> tag defines a row in the table.
<th>: Stands for "table header". It's used for the headers of the columns. In this case, "Firstname", "Lastname", and "Age" are headers. Text in <th> tags is usually bold and centered by default.
<td>: Stands for "table data". This tag is used for actual data cells under each column. For instance, "Priya" is the data under the "Firstname" header, "Sharma" under the "Lastname", and "24" under the "Age".
The first <tr> has three <th> elements, setting up the column titles.
The subsequent <tr> tags contain three <td> elements, representing the data for each person listed in the table.

When this HTML code is rendered in a web browser, it will display a table with four rows (one header row plus three data rows) and three columns (Firstname, Lastname, and Age), showing the names and ages of Priya, Arun, and Sam.

HTML Tables Tags

Here, is the list of all the tags that we used in table formation in html.

Tag	Description
<table>	Defines the structure for organizing data in rows and columns within a web page.
<tr>	Represents a row within an HTML table containing individual cells.
<th>	Shows a table header cell that typically holds titles or headings.
<td>	Represents a standard data cell, holding content or data.
<caption>	Provides a title or description for the entire table.
<thead>	Defines the header section of a table, often containing column labels.
<tbody>	Represents the main content area of a table, separating it from the header or footer.
<tfoot>	Specifies the footer section of a table, typically holding summaries or totals.
<col>	Defines attributes for table columns that can be applied to multiple columns simultaneously.
<colgroup>	Groups together a set of columns in a table to which you can apply formatting or properties collectively.

Another Example of an border spacing HTML Table:

Creating a simple table in HTML using a table tag.

index.html

<!--Driver Code Starts-->
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<!--Driver Code Ends-->

    <table>
        <tr>
            <th>Book Name</th>
            <th>Author Name</th>
            <th>Genre</th>
        </tr>
        <tr>
            <td>The Book Thief</td>
            <td>Markus Zusak</td>
            <td>Historical Fiction</td>
        </tr>
        <tr>
            <td>The Cruel Prince</td>
            <td>Holly Black</td>
            <td>Fantasy</td>
        </tr>
        <tr>
            <td>The Silent Patient</td>
            <td> Alex Michaelides</td>
            <td>Psychological Fiction</td>
        </tr>
    </table>

<!--Driver Code Starts-->
</body>

</html>

<!--Driver Code Ends-->

Output:

HTML Table

Styling HTML Tables - Adding CSS

we use CSS (Cascading Style Sheets) to add styles such as borders, background colors, text alignments, and much more. Here are some basic styles to make your table look neater and more professional:

1. Adding a Border to an HTML Table

A border is set using the CSS border property. If you do not specify a border for the table, it will be displayed without borders.

Syntax

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

Example: Addition of the border to the HTML Table.

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>

</html>

Output:

HTML Table with border

2. Adding Collapsed Borders in an HTML Table

For borders to collapse into one border, add the CSS border-collapse property.

Syntax

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

Example: Addition of Collapsed Borders in HTML.

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <style>
    table,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    </style>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML Tables output — HTML Table with Collapsed Borders

3. Adding Cell Padding in an HTML Table

Cell padding specifies the space between the cell content and its borders. If we do not specify a padding, the table cells will be displayed without padding.

Syntax

th, td {
        padding: 20px;
}

Example: Addition of Table cell padding in HTML.

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <style>
    table,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th,
    td {
        padding: 20px;
    }
    </style>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>

</html>

Output:

Adding Table cell padding

4. Adding Left Align Headings in an HTML Table

By default, the table headings are bold and centered. To left-align the table headings, we must use the CSS text-align property.

Syntax

th {
      text-align: left;
}

Example: Explains the text-align property where the text is aligned to the left.

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th,
        td {
            padding: 20px;
        }

        th {
            text-align: left;
        }
    </style>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>

</html>

Output:

text-align Property

5. Adding Border Spacing in an HTML Table

Border spacing specifies the space between the cells. To set the border-spacing for a table, we must use the CSS border spacing property.

Syntax

table {
      border-spacing: 5px;
}

Example: Explains the border space property to make the space between the Table cells.

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }

        table {
            border-spacing: 5px;
        }
    </style>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>

</html>

Output:

Border Spacing Property

6. Adding Cells that Span Many Columns in HTML Tables

To make a cell span more than one column, we must use the colspan attribute.

Example: Use of colspan attribute in HTML.

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th,
        td {
            padding: 5px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h2>Cell that spans two columns:</h2>
    <table style="width:100%">
        <tr>
            <th>Name</th>
            <th colspan="2">Telephone</th>
        </tr>
        <tr>
            <td>Vikas Rawat</td>
            <td>9125577854</td>
            <td>8565557785</td>
        </tr>
    </table>
</body>

</html>

Output:

colspan attribute

7. Adding Cells that span many rows in HTML Tables

To make a cell span more than one row, we must use the rowspan attribute.

Example: Use of the rowspan attribute in HTML.

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th,
        td {
            padding: 5px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h2>Cell that spans two rows:</h2>
    <table style="width:100%">
        <tr>
            <th>Name:</th>
            <td>Vikas Rawat</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone:</th>
            <td>9125577854</td>
        </tr>
        <tr>
            <td>8565557785</td>
        </tr>
    </table>
</body>

</html>

Output:

Use of rowspan attribute

8. Adding a Caption in an HTML Table

To add a caption to a table, we must use the "caption" tag.

Syntax

<table style="width:100%">
<caption>DETAILS</caption>

Example: HTML Table caption by specifying the CSS properties for setting its width.

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th,
        td {
            padding: 20px;
        }
        th {
            text-align: left;
        }
    </style>
</head>
<body>
    <table style="width:100%">
        <caption>DETAILS</caption>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>

</html>

Output:

Adding the caption using the tag

9. Adding a Background Colour to the Table

A color can be added as a background in an HTML table using the "background-color" option.

Syntax

table#t01 {
            width: 100%;
            background-color: #f2f2d1;
 }

Example: Addition of the Table background color in HTML.

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th,
        td {
            padding: 5px;
            text-align: left;
        }
        table#t01 {
            width: 100%;
            background-color: #f2f2d1;
        }
    </style>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
    <br />
    <br />
    <table id="t01">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>

</html>

Output:

Adding Table Background color using CSS properties

10. Creating Nested Tables

Nesting tables simply means making a Table inside another Table. Nesting tables can lead to complex table layouts, which are visually interesting and have the potential of introducing errors.

Example: Nesting of HTML Table.

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
    <table border=5 bordercolor=black>
        <tr>
            <td> First Column of Outer Table </td>
            <td>
                <table border=5 bordercolor=grey>
                    <tr>
                        <td> First row of Inner Table </td>
                    </tr>
                    <tr>
                        <td> Second row of Inner Table </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Output:

Nested HTML Table

Common Questions About HTML Tables

HTML Tables

S

Shubrodeep Banerjee

Improve

Article Tags :

Similar Reads

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript

HTML Introduction

HTML stands for Hyper Text Markup Language, which is the core language used to structure content on the web. It organizes text, images, links, and media using tags and elements that browsers can interpret. As of 2025, over 95% of websites rely on HTML alongside CSS and JavaScript, making it a fundam

An HTML Editor is a software application designed to help users create and modify HTML code. It often includes features like syntax highlighting, tag completion, and error detection, which facilitate the coding process. There are two main types of HTML editors: Text-Based Editors - Allow direct codi

HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over

HTML comments are used to add notes or explanations in the HTML code that are not displayed by the browser.They are useful for documenting the code, making it easier to understand and maintain.To add a comment, use the syntax . HTML<!-- This is a comment and will n

An HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings.For example, the <p> ele

HTML Attributes

HTML Attributes are special words used within the opening tag of an HTML element. They provide additional information about HTML elements. HTML attributes are used to configure and adjust the element's behavior, appearance, or functionality in a variety of ways. Each attribute has a name and a value

HTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate.Proper use of headings enhances readability by organizing content into clear sections.Search engines utilize headings to understand page

HTML Paragraphs

A paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. Itâ€™s the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph.Syntax:<p> Some Content...

HTML Text Formatting

HTML text formatting refers to the use of specific HTML tags to modify the appearance and structure of text on a webpage. It allows you to style text in different ways, such as making it bold, italic, underlined, highlighted, or struck-through. Table of ContentCategories of HTML Text FormattingLogic