HTML TABLES

HTML table allows you to arrange data into rows and columns. They are commonly used to display tabular data like product listings, customer’s details, financial reports, and so on.

You can create a table using the <table> element. Inside the <table> element, you can use the <tr> elements to create rows, and to create columns inside a row you can use the <td> elements. You can also define a cell as a header for a group of table cells using the <th> element.

The following example demonstrates the most basic structure of a table.

<table>
    <tr>
        <th>NO.</th>
        <th>NAME</th>
        <th>AGE</th>
    </tr>
    <tr>
        <td>1</td>
        <td>PETER PARKER</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>CLARK KENT</td>
        <td>34</td>
    </tr>
</table>
Result

Tables do not have any borders by default. You can use the CSS border property to add borders to the tables. Also, table cells are sized just large enough to fit the contents by default. To add more space around the content in the table cells you can use the CSS padding property. The following style rules add a 1-pixel border to the table and 10-pixels of padding to its cells.

table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
Result

By default, borders around the table and their cells are separated from each other. But you can collapse them into one by using the border-collapse property on the <table> element.

Also, text inside the <th> elements are displayed in bold font, aligned horizontally center in the cell by default. To change the default alignment you can use the CSS text-align property.

The following style rules collapse the table borders and align the table header text to left.

table {
    border-collapse: collapse;
}
th {
    text-align: left;
}
Result

Please check out the tutorial on CSS tables to learn about styling HTML tables in details.


Spanning Multiple Rows and Columns

Spanning allow you to extend table rows and columns across multiple other rows and columns.

Normally, a table cell cannot pass over into the space below or above another table cell. But, you can use the rowspan or colspan attributes to span multiple rows or columns in a table.

Let’s try out the following example to understand how colspan basically works:

<table>
    <tr>
        <th>NAME</th>
        <th colspan="2">PHONE</th>
    </tr>
    <tr>
        <td>JOHN CARTER</td>
        <td>5550192</td>
        <td>5550152</td>
    </tr>
</table>
Result

Similarly, you can use the rowspan attribute to create a cell that spans more than one row. Let’s try out an example to understand how row spanning basically works:

<table>
    <tr>
        <th>NAME:</th>
        <td>JOHN CARTER</td>
    </tr>
    <tr>
        <th rowspan="2">PHONE:</th>
        <td>55577854</td>
    </tr>
    <tr>
        <td>55577855</td>
    </tr>
</table>
Result

Adding Captions to Tables

You can specify a caption (or title) for your tables using the <caption> element.

The <caption> element must be placed directly after the opening <table> tag. By default, caption appears at the top of the table, but you can change its position using the CSS caption-side property.

The following example shows how to use this element in a table.

<table>
    <caption>USERS INFO</caption>
    <tr>
        <th>NO.</th>
        <th>NAME</th>
        <th>AGE</th>
    </tr>
    <tr>
        <td>1</td>
        <td>PETER PARKER</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>CLARK KENT</td>
        <td>34</td>
    </tr>
</table>
Result

Defining a Table Header, Body, and Footer

HTML provides a series of tags <thead><tbody>, and <tfoot> that helps you to create more structured table, by defining header, body and footer regions, respectively.

The following example demonstrates the use of these elements.

<table>
    <thead>
        <tr>
            <th>ITEMS</th>
            <th>EXPENDITURE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>STATIONARY</td>
            <td>2,000</td>
        </tr>
        <tr>
            <td>FURNITURE</td>
            <td>10,000</td>
        </tr>        
    </tbody>
    <tfoot>
        <tr>
            <th>TOTAL</th>
            <td>12,000</td>
        </tr>
    </tfoot>
</table>

Result