Tables in HTML

Previous Next

Welcome to the Tables in HTML tutorial of our "HTML Simplified Series". In this tutorial, we are going to see "How to create tables in HTML" and some other important properties and tags related to tables.

Table in HTML:

• Tables are used to represent data in tabular form on the webpage.

• Tables are collections of rows or columns.

• Table created using <table> tag.

Tags used in Table:

1). Table

<table> tag is used to create a table in the HTML document.

<table> </table>

2). Table Header

The <thead> tag defines the header section of a table.

<thead> </thead>

3). Table Body

<tbody> is used to group the body content in a table. It basically defines the body of the table.

<tbody> </tbody>

4). Table Footer

<tfoot> is used to create the footer for the table. This is placed at the bottom of the table.

<tfoot> </tfoot>

5). Table Head

<th> is used to define the header of table columns.

<th> </th>

6). Table Row

<tr> tag is used to create a table row.

<tr> </tr>

7). Table Column

<td> is used to create columns in the table. It basically contains the table data.

<td> </td>

Creating a Table in HTML with 3 rows and 4 columns 

<table>

    <thead>

        <th> Sr. No. </th>

        <th> Name </th>

        <th> Role </th>

        <th> Location </th>

    </thead>

    <tbody>

        <tr>

            <td> 01. </td>

            <td> Raju</td>

            <td> Frontend Developer</td>

            <td> Hisar </td>

        </tr>

        <tr>

            <td> 02. </td>

            <td> Harry </td>

            <td> Programmer </td>

            <td> Rampur </td>

        </tr>

        <tr>

            <td> 03. </td>

            <td> Rehana </td>

            <td> Frontend Developer</td>

            <td> Delhi </td>

        </tr>

    </tbody>

</table>

Output:

Table Attributes in HTML

• We have already discussed in some previous tutorials that attribute provide additional information about the element.

• Let's see the table attributes.

1). border

It is used to set the border on the table. In the given source code below this will generate a border around the table and tables cells.

<table border="1"> </table>

2). colspan

This attribute specifies the number of columns a cell should span. 

<td colspan="2"> Frontend Developer</td>

3). rowspan

This attribute specifies the number of rows a cell should span

<td rowspan="2"> Raju Web Dev </td>

Table in HTML with Attributes

<table border="1" bgcolor="cyan">

    <thead>

        <th> Name </th>

        <th> Role </th>

    </thead>

    <tbody>

        <tr>

            <td> Raju </td>

            <td rowspan="2"> Frontend Developer </td>

            </tr>

        <tr>

            <td> Rehana </td>

        </tr>

        <tr>

            <td colspan="2"> Book Mentor </td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td colspan="2"> Web Development Mentor </td>

        </tr>

    </tfoot>

</table>

Output:

Table and Table Attributes in HTML PDF Download

Download Now