Html tables

A table is a data structure used to organize information. Html tables are used to help web developers organize data in rows and columns. Each row represents a unique record, and each column represents a field in the record.

The first thing we need to be clear about, is that creating tables consists of three main sections, which are: header, body, footer. To create the table we will use different tags, where the main one is <table> </table>. This tag wraps around the entire table. To create the table border the tag would be <table border = "1px"> </table>and it will add a border around each cell of the table.

• The head of the table is created via the <thead> </thead> element. The <tr> tag is used to create table rows and the <th> tag is used to create table headings. If the width of the table headings needs to be specific, all we have to do is type <th width = ""> and put the width we want between the quotes. An example of code, written to create a table header is as follows:

<thead>
    <tr>
        <th width="100">Name</th>
        <th width="100">Gender</th>
        <th width="100">Age</th>
    </tr>
</thead>

• The body of the table is created through the <tbody> </tbody> element, which contains the main information of the table. The <td> tag is used to create table data cells. An example of code, written to create a table body is as follows:

<tbody>
    <tr>
        <td>Bill</td>
        <td>Male</td>
        <td>37</td>
    </tr>
    <tr>
        <td>Jessica</td>
        <td>Female</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Richard</td>
        <td>Male</td>
        <td>18</td>
    </tr>
</tbody>

• The end of the table closes with <tfoot> </tfoot>, which creates a separete footer for the table.

<tfoot>
    <tr>
        <th colspan="3">List of people</th>
    </tr>
</tfoot>

The table we created will look like this: