HTML Tables

In html there are set of elements that are needed to create tables. Table can be created using <table> element.
Each row of a tables are defines via <tr> element and each cell are defines via <td> element within <tr> element.

So a basic structure of a table looks like:

<table>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>

You can set the border using border attribute i.e. border=”1″. Also you can set spacing using cellspacing and cellpadding attribute as below:

<table border="1" cellspacing="5" cellpadding="5">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>

Table thead, tfoot and tbody:
A tables can be defined using table head i.e. <thead> and table foot i.e. <tfoot>. It is useful when printing a page as header and footer shows on each page automatically. Remember that <thead> use <th> element incase of <td>.

<table>
    <thead>
    <tr>
        <th>Title 1</th>
        <th>Title 2</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td>Footer cell 1</td>
        <td>Footer cell 2</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    </tbody>
</table>

You can also set horizontal and vertical alignment using “valign” and “align” attribute.