Introduction to HTML The image tag, anchor tag and the button tag The division tag Ordered and Unordered Lists in HTML Tables in HTML HTML Forms

Tables in HTML

Tables are used to display information in the form of rows and columns. In HTML, we use the <table> tag to create a table.

Jump to specific sections

The <tr>, <th> and <td> tags

The <tr> tag is used to define a row in a table. The <th> tag specifies the headings of the table in a bold text and the <td> tag denotes the entries of the tables in every row. A table can be created as follows.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <table>
            <caption>Class 12th Result</caption>
            <tr>
                <th>Name</th>
                <th>Roll No.</th>
                <th>Section</th>
                <th>Percentage</th>
            </tr>
            <tr>
                <td>Nitin</td>
                <td>193200</td>
                <td>A</td>
                <td>90.8%</td>
            </tr>
            <tr>
                <td>Gaurav</td>
                <td>193455</td>
                <td>C</td>
                <td>88.5%</td>
            </tr>
        </table>
    </body>
    </html>

<caption> tag is used just after the table tag to denote the title of the table.It appears just before the table.

The rowspan and the colspan attributes

The colspan attribute defines the number of columns occupied by a <th> or a <td> tag. Similarily, the rowspan attribute defines the number of rows occupied by a <th> or a <td> tag. They can be used as follows.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!--Style tag is used to write css, we will learn about this in css course-->
        <style>
            table, th, td {
      border: 1px solid black;
    }
        </style>
    </head>
    <body>
    <table>
        <caption>Class 12th timetable</caption>
        <tr>
            <th>Days</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <th>Monday</th>
            <td>English</td>
            <td>Maths</td>
            <td>Science</td>
            <td rowspan="2">Social Science</td>
        </tr>
        <tr>
            <th rowspan="2">Tuesday</th>
            <td>Hindi</td>
            <td colspan="2">IT Lab</td>
        </tr>
        <tr>
            <td>English</td>
            <td>Maths</td>
            <td>Science</td>
            <td>Hindi</td>
        </tr>
    </table>
    </body>
    </html>

Here, we have applied some border to show the effect of rowspan and colspan. Your table is ready!