Creating Tables in HTML

Tweet

Tables are another feature in HTML which is useful and which is also easy to create. Tables are organized into rows and columns. But when we use tables in HTML, we use the rows and then the row data which become columns and then repeat this process to create another row and its set of columns. We will see this process below.

Creating a Table

<table border="1">
            <tr>
                <td>&nbsp;</td>
                <td>Matches</td>
                <td>Innings</td>
                <td>Runs</td>
            </tr>
            <tr>
                <td>Tests</td>
                <td>190</td>
                <td>314</td>
                <td>15533</td>
            </tr>
            <tr>
                <td>ODIs</td>
                <td>463</td>
                <td>452</td>
                <td>18426</td>
            </tr>
            <tr>
                <td>T20s</td>
                <td>1</td>
                <td>1</td>
                <td>10</td>
            </tr>
</table>

The <table> tag is used to denote the browser about the table occurrence. Then it is followed by the <tr> tag, to create a row. Then the row can have datas with <td> tags, which can be shown as columns to users. You can repeat this to form a table. The border attribute in the <table> tag forms the box for each data.

Making Table Headers

Table headers can be created by replacing the <td> tag with <th> tag in the necessary places where headers need to be added.

<table border="1">
            <tr>
                <th>&nbsp;</td>
                <th>Matches</td>
                <th>Innings</td>
                <th>Runs</td>
            </tr>
            <tr>
                <th>Tests</td>
                <td>190</td>
                <td>314</td>
                <td>15533</td>
            </tr>
            <tr>
                <th>ODIs</td>
                <td>463</td>
                <td>452</td>
                <td>18426</td>
            </tr>
            <tr>
                <th>T20s</td>
                <td>1</td>
                <td>1</td>
                <td>10</td>
            </tr>
</table>

Including Captions

Captions can be included to indicate what a table is about. It should be placed directly after the opening table tag and will be displayed above the table.

<table>
            <caption>Sachin Tendulkar</caption>
            
            <tr>
                ...
            </tr>
            <tr>
                ...
            </tr>
</table>