Table element in HTML

Tables are used to represent tabular information. In HTML, table element is used to represent tabular information.

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table>
            <tr>
                <td>Row 1 Cell 1</td>
                <td>Row 1 Cell 2</td>
            </tr>
            <tr>
                <td>Row 2 Cell 1</td>
                <td>Row 2 Cell 2</td>
            </tr>
        </table>
    </body>
</html>
                        

The HTML table is made up of 3 attributes which are must:

  • <table>

    this tag represents the whole table.

  • <tr>

    this tag represents a row in a table.

  • <td>

    this tag represents a cell in a row. there can be many cells in a row.

In the above example, the table doesn't have any border. Without a border, it doesn't look like a table. To add border, you can use css or html attribute. We will see both the example.

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table>
            <tr>
                <td>Row 1 Cell 1</td>
                <td>Row 1 Cell 2</td>
            </tr>
            <tr>
                <td>Row 2 Cell 1</td>
                <td>Row 2 Cell 2</td>
            </tr>
        </table>
    </body>
</html>
                        

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

In the above example, border is given by CSS. If you see, we have added border for table and td.

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table border="1">
            <tr>
                <td>Row 1 Cell 1</td>
                <td>Row 1 Cell 2</td>
            </tr>
            <tr>
                <td>Row 2 Cell 1</td>
                <td>Row 2 Cell 2</td>
            </tr>
        </table>
    </body>
</html>
                        

In above example, attribute border="1" is used to add border. "1" is the width of the border.

border attribute is deprecated. You should use CSS properties like border, border-width and border-color. We will see list of all the deprecated tags.

Optional Tags

There are many optional tags that you can use to make a table more useful and appropriate for the data representation. Let us have look at them one by one. Remember, these all are optional.

Most of the times, data have column name which represents a header. In HTML table, we can add header with <th>.
<thead> is used as a parent element of the <tr> which serves as a head row. While <tbody> element serves as a parent element of all the other rows which contains the data.

Sr. No Department
1 JavaScript
2 HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Sr. No</th>
                    <th>Department</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>JavaScript</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>HTML</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
                        

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

In above code, we have used border-collapse:collapse CSS to merge the border. So it will look like only one border. We will use it in every further example.
In the above example, the table has a header which has a column name. So it makes a proper readable form.
<thead> and <tbody> are optional even if you are using <th>. But you should alwasy use them because it will help you to differentiate when you need to style them differently.

When you need to add a footer in table, <tfoot> is used.

Sr. No Department
1 JavaScript
2 HTML
Footer column 1 Footer column 2

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Sr. No</th>
                    <th>Department</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>JavaScript</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>HTML</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>Footer column 1</td>
                    <td>Footer column 2</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
                        

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

<tfoot> will look like another row in the table but it is a structural change which will help you to change its style easily.

Column Group

It is easy to have a different style for a row. But when you need to stylize a column or columns in the table, you can provide CSS to particular cells of that column. But wouldn't it will be very confusing?
In this kind of cases, you can use <colgroup> and <col> elements.
<colgroup> element is used as a parent of one or more <col> elements which will target columns in HTML table.

Sr. No Department No. of Students
1 JavaScript 250
2 HTML 300
3 CSS 300

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table>
            <colgroup>
                <col span="2"></col>
                <col style="background: #ababab"></col>
            </colgroup>
            <thead>
                <tr>
                    <th>Sr. No</th>
                    <th>Department</th>
                    <th>No. of Students</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>JavaScript</td>
                    <td>250</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>HTML</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>CSS</td>
                    <td>300</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
                        

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

If you see the above example, there are 3 columns and we want to highlight 3rd column. So in column group, you add 2 col elements in which first element will have span="2" attribute, which means it will cover first 2 columns and second col element will cover 3rd column. So you can assign any css to 2nd col element to apply any style which will be applied to 3rd column.
It will be very useful. Now try to color middle middle column with colgroup. ( You have to add 3 col and apply style to middle col ) element.

colspan

When a cell is common in more than one columns, colspan attribute is used. Let us have a look at an example.

Sr. No Department No. of Students
1 JavaScript 250
2 HTML 300
3 CSS 300
Total Students 850

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Sr. No</th>
                    <th>Department</th>
                    <th>No. of Students</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>JavaScript</td>
                    <td>250</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>HTML</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>CSS</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td colspan="2">Total Students</td>
                    <td>850</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
                        

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

In above example, last row has two cells instead of 3. First cell has colspan="2" which means, it will cover 2 columns.

rowspan

When a cell is common for more than one rows, rowspan is used. Take a look at the example.

Sr. No Course Department No. of Students
1 Web Technology JavaScript 250
2 HTML 300
3 CSS 300
Total Students 850

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Sr. No</th>
                    <th>Course</th>
                    <th>Department</th>
                    <th>No. of Students</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td rowspan="3">Web Technology</td>
                    <td>JavaScript</td>
                    <td>250</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>HTML</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>CSS</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td colspan="3">Total Students</td>
                    <td>850</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
                        

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

In above code, second cell in first row ( after header ) is common in 3 rows. So its rowspan is 3.

Deprecated attributes

Here is the list of deprecated attributes. Instead of you should use given CSS rules.

Attribute Description CSS
bgcolor To set the background color ackground-color
align To align the table relative to the document margin-left, margin-right or margin ( assign value auto )
border To provide a border to the table border, border-color, border-width and border-style
cellpadding defines the space between the content of a cell and its border, displayed or not padding
cellspacing defines the size of the space between two cells in a percentage value or pixels apply the border-spacing property to the <table> element. border-spacing does not have any effect if border-collapse is set to collapse

Conclusion

In this section, we have learned about the table and its attributes and other elements which will be needed while working with tables. You need to practice it with different kind of scenarios.
In next section, we will learn about lists in HTML.