HTML Table

Creating a table in HTML

To insert a table into your HTML document, use the <table> element. The <tr> tag divides a table into rows which are further divided into data cells using the <td> tag. <tr> is an abbreviation for table row while td stands for table data. Below is an example of html code that displays a table with headers and a few records.

<table border="1">
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </tbody>
</table>

Formatting HTML tables

There are two attributes that you can use to adjust the whitespace in a table for an enhanced appearance. These are namely, cellspacing and cellpadding. Use the cellpadding attribute to adjust the whitespace between the boarder of a cell and its content. Cellspacing adjusts whitespaces between table cells. Below is an example that demonstrates the cellspacing and cellpadding attributes.

Spanning is a feature that is similar to cell merge in excel. It allows you to extend a column or a row over other datacells. Use the colspan and the rowspan attributes to span rows and columns as shown in the example below.