HTML Table: Creating a table

This entry is part 1 of 16 in the series HTML Table

To construct a HTML table, we can always start from a simple table with only one header and one row.

A basic table would look like this:

<table border="1">
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
</table>

<th> is for table header.  This will bold the font in the first row in the table.

<tr> is table row and <td> is table divider.

We can start from the above and build from there.  We can for example, add one more row or one more column to the above table.

For the table that we have used, the HTML will be as below:

HTML Table
<table border="1">
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
        <th>year</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
        <td>1973</td>
    </tr>
    <tr>
        <td>2</td>
        <td>New Order</td>
        <td>Substance</td>
        <td>1987</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Nirvana</td>
        <td>Smell Like Teen Spirit</td>
        <td>1992</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Rod Stewart</td>
        <td>Out Of Order</td>
        <td>1988</td>
    </tr>
</table>

The output from running the above HTML script is:

html_table

Series Navigation
HTML Table: Table without table header >>

Leave a comment

Leave a Reply