Skip to content
Related Articles

Related Articles

HTML Tables

Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 18 May, 2022

In this article, we will know the HTML Table, various ways to implement it, & will also understand its usage through the examples. HTML Table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. Tables are useful for various tasks such as presenting text information and numerical data. It can be used to compare two or more items in the tabular form layout. Tables are used to create databases.

Defining Tables in HTML: An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A table header is defined with the “th” tag. By default, table headings are bold and centered. A table data/cell is defined with the “td” tag.

Example 1: In this example, we are creating a simple table in HTML using a table tag. 

HTML




<!DOCTYPE html>
<html>
 
<body>
    <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>
</body>
 
</html>


Output:

HTML Table

Example 2: This example explains the use of the HTML Table.

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:

Simple HTML Table

Accepted Attributes:

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.

Example 3: This example explains the addition of the border to the HTML Table.

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

Adding Collapsed Borders in an HTML Table: For borders to collapse into one border, add the CSS border-collapse property.

Example 4: This example describes the addition of Collapsed Borders in HTML.

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 Table with Collapsed Borders

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.

Example 5: This example describes the addition of Table cell padding in HTML.

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

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.

Example 6: This example explains the text-align property where the text is aligned to the left.

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

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.

Example 7: This example explains the border space property to make the space between the Table cells.

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

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 8: This example describes the use of the colspan attribute in HTML.

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

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 9: This example describes the use of the rowspan attribute in HTML.

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

Adding a Caption in an HTML Table: To add a caption to a table, we must use the “caption” tag.

Example 10: This example describes the HTML Table caption by specifying the CSS properties for setting its width.

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 <caption> tag

Adding a Background Colour to the Table: A color can be added as a background in an HTML table using the “background-color” option.

Example 11: This example describes the addition of the Table background color in HTML.

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

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

Example 12: This example describes the Nested of HTML Table.

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

Supported Browsers:

  • Google Chrome
  • Firefox
  • Microsoft Edge
  • Internet Explorer
  • Safari
  • Opera

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!