How to Create Table in HTML?

Last Updated : 20 Nov, 2024

HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart.

Elements of HTML Table

Table Elements	Description
<table>	The <table> element defines the start and end of the table. It acts as a container for all the table-related elements.
<tr>	The <tr> (table row) element defines a row within the table. Each <tr> tag represents a horizontal row of cells or data entries.
<th>	The <th> (table header) element defines header cells within a table row (<tr>). Header cells are typically used to label columns or rows in the table. They are usually bold and centered by default, providing emphasis on the content they represent.
<td>	The <td> (table data) element defines regular data cells within a table row (<tr>). Data cells contain actual data or information that is displayed in the table. Unlike <th> cells, <td> cells are not bold and are aligned to the left by default.
<thead>	The <thead> element defines the header section of a table, containing header rows (<tr> with <th>).
<tbody>	The <tbody> element groups the main content of the table, containing rows (<tr>) with data cells (<td>).
<tfoot>	The <tfoot> element defines the footer section of a table, usually containing summary rows or totals.
<colgroup> and <col>	The <colgroup> element allows you to group together and style columns in a table. Inside <colgroup>, you can use <col> elements to define specific column properties such as width, alignment, and styling. This provides more control over the appearance of columns across the table.
<caption>	The <caption> element provides a title or description for the entire table. It is placed immediately after the opening <table> tag and before any <tr> elements.

Note: The <thead>, <tbody>, <tfoot> elements help to organize the table structure logically and are optional but recommended for clarity.

Table Structure

Within the <table> element, the structure is organized as rows (<tr>) and columns defined by header cells (<th>) or data cells (<td>). Rows (<tr>) contain one or more cells (<th> or <td>), depending on the structure of the table.

Basic Syntax of HTML Table

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

Example: Here is an example of an HTML table with two rows and three columns:

HTML

<table border="1">
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
    <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
    </tr>
</table>

Note: The border attribute is not supported by HTML5. CSS border property is used to set the table border in HTML5.

Output

html-table

Adding Table Heading to Rows

To add a table heading to rows in an HTML table, you can use the <th> element within the <tr> element. This is useful when you have data that represents headings for each row.

HTML

<table border="1">
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
    <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
    </tr>
</table>

Output

html-table-with-heading

HTML Table with <thead>, <tbody>, and <tfoot> Elements

The <thead> section is used for headers that describe the columns of the table. The <tbody> section contains the main data rows. The <tfoot> section provides a footer row typically used for summary information or totals.

HTML

<h2>Sales Report</h2>

<table border="1">
    <thead>
        <tr>
            <th>Month</th>
            <th>Product Category</th>
            <th>Units Sold</th>
            <th>Revenue ($)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>Furniture</td>
            <td>150</td>
            <td>$15,000</td>
        </tr>
        <tr>
            <td>February</td>
            <td>Furniture</td>
            <td>120</td>
            <td>$12,000</td>
        </tr>
        <tr>
            <td>January</td>
            <td>Electronics</td>
            <td>200</td>
            <td>$25,000</td>
        </tr>
        <tr>
            <td>February</td>
            <td>Electronics</td>
            <td>180</td>
            <td>$20,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total</td>
            <td>650</td>
            <td>$72,000</td>
        </tr>
    </tfoot>
</table>

Output

html-table-with-thead-tbody

How to group the body content in a table using HTML5 ?

manaschhabra2

Improve

Article Tags :

How to Create Table in HTML?

Elements of HTML Table

Table Structure

Basic Syntax of HTML Table

Adding Table Heading to Rows

HTML Table with <thead>, <tbody>, and <tfoot> Elements

Similar Reads

Thank You!

What kind of Experience do you want to share?