An HTML table is used to show tabular data.


  • <table> Table is defined with <table> tag.
  • <tr> Table row 
  • <th> Table head 
  • <td> Table data 


Structure of html table

look html table example

<!DOCTYPE html>
<html>
    <body>
        <table style="width:100%">
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
            <tr>
                <td>Rathorji</td>
                <td>dummy@email.com</td>
                <td>77777777777777</td>
            </tr>
        </table>
    </body>
</html>



HTML table attributes

Border & caption

<!DOCTYPE html>
<html>
    <body>
        <table style="width:100%" border="1">
            <caption>Students Data</caption>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
            <tr>
                <td>Rathorji</td>
                <td>dummy@email.com</td>
                <td>77777777777777</td>
            </tr>
        </table>
    </body>
</html>


Height and width

You can specify the width or height of the table in terms of pixels or percentage.



Collapsing:

By default, adjacent cells will have their distinctive border.



Cellpadding and Cellspacing:

The cell spacing attribute defines the space between the cells in the table.



colspan and Rowspan:

we use the colspan attribute to merge two or more columns into a single column. 



Background:

bgcolor - You can set the background color for the whole table. 



Example:

<!DOCTYPE html>
<html>
    <head>
        <title>html table tutorial</title>
    </head>
    <body>
        <table border="1" bordercolor="black" bgcolor="blue">
            <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>