Creating a table in HTML

Tables are represented by the <table> tag. By default, tables will have a border width set to 0, so that you may not see borders for the table.

A table is created using <table> tag.
Table heading is created using <th> tag.
A table row is created using <tr> tag.
Table data (column) is created using <td> tag.

<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>Gender</td>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Christina</td>
        <td>25</td>
        <td>Female</td>
    </tr>
</table>

Output

Name	Age	Gender
John	30	Male
Christina	25	Female

Table caption

The table caption can be specified using <caption> tag immediately after <table> tag.

Table summary

Using summary attribute, you can provide a brief description of the table. This may be visible only on screen readers.

<table summary="This is a small description about my table.">

Table border

Using border attribute, you can specify border for the table. This attribute is provided in <table> tag.

Eg: <table border="1">

Using border attribute is deprecated. CSS should be used to style table.

Table header, body and footer

Table header, body and footer is specified using <th>, <tead>, <tbody> and <tfoot> tags.

Anything written in <th> tag will appear bold and center aligned.

It is not a must to specify <th> tag within <thead> tag as shown in the example.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>35</td>
        </tr>
        <tr>
            <td>Donald</td>
            <td>27</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </tfoot>
</table>

Output

Name	Age
John	35
Donald	27
Name	Age

Rowspan and colspan

rowspan is used to specify the number rows which a row should span.

colspan is used to specify the number columns which a colums should span.

<td rowspan="2">
<td rowspan="3">

Example

<table border="1">
    <tr>
        <th rowspan="3">This is an example for rowspan</th>
    </tr>
    <tr>
        <td colspan="2">Cell 1 and 2</td>
        <td>Cell 3</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
</table>

Output

This is an example for rowspan
	Cell 1 and 2		Cell 3
	Cell 1	Cell 2	Cell 3

Styling a table

<html>
<head>
    <style>
        table,tr,td
        {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th rowspan="3">This is an example for rowspan</th>
        </tr>
        <tr>
            <td colspan="2">Cell 1</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
    </table>
</body>
</html>

Output

This is an example for rowspan
	Cell 1		Cell 3
	Cell 1	Cell 2	Cell 3

Creating a table in HTML

Output

Table caption

Table summary

Table border

Table header, body and footer

Output

Rowspan and colspan

Example

Output

Styling a table

Output

Subscribe

You might also like