Javascript AJAX jQuery HTML PHP Example MORE

HTML Table With Example

❮ Previous Next ❯

HTML <table> tag is used to show tabular data.

<table> Table is defined with <table> tag.

<tr> Table row is defined with <tr> tag.

<th> Table head is defined with <th> tag.

<td> Table data is defined with <td> tag.

Structure of a Normal table

<!DOCTYPE html>
<html>
<body>
    <table style="width:100%">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
        <tr>
            <td>Divyasundar</td>
            <td>divya@gmail.com</td>
            <td>988812345</td>
        </tr>
    </table>
</body>
</html>

Run it yourself

Table attributes:

Border:

Adding it to the table will result in a border around the outside of the table.

Example

<!DOCTYPE html>
<html>
<body>
    <head>
        <style>
            table,
            th,
            td {
                border: 1px solid black;
            }
        </style>
    </head>
    <table style="width:100%">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
        <tr>
            <td>Divyasundar</td>
            <td>divya@gmail.com</td>
            <td>988812345</td>
        </tr>
    </table>
</body>
</html>

Run it yourself

Caption:

The caption tag will serve as a title or explanation for the table.

Example

<!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>
    <table style="width:100%">
        <caption>Students Data</caption>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Divya</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Sangram</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>

Run it yourself

Height and Width

can specify table width or height in terms of pixels or in terms of percentage of available screen area.

Collapsing:

By default, adjacent cells will have their own distinct border.

Cellpadding and Cellspacing:

The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell.

Colspan and Rowspan:

we use colspan attribute to merge two or more columns into a single column. And rowspan to merge two or more rows.

Background:

bgcolor − You can set background color for whole table or just for one cell.background − You can set background image for whole table or just for one cell.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Background</title>
</head>
<body>
    <table border="1" bordercolor="green" bgcolor="yellow">
        <caption>This is the caption</caption>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr>
            <td rowspan="2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
        </tr>
        <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
        </tr>
        <tr>
            <td colspan="3">Row 3 Cell 1</td>
        </tr>
    </table>
</body>
</html>

Run it yourself

❮ Previous Next ❯