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

HTML Table: Table without table header

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

As a continuation of the previous post, to build a simpler table without a table header, we can replace the <th> with <td>.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

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

</body>
</html>

HTML Table: Row with a different cell number

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

In the previous example, the table have the same number of cells in the rows.

If we have a row with a cell less than the others, we would have a table illustrated by the example below.

In the tr tag in line 15, it has one <td> tag less than the <tr> in line 10.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1'>
    <tr>
        <td>ID</td>
        <td>artiste</td>
        <td>album</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
    </tr>
</table>

</body>
</html>
Codecrawl.com-HTML Table

HTML Table: Specifying the size of a table

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

By default, a table sizes itself to accommodate all of its cells, and each cell’s height and width changes to accomodate the largest entry in that row or column.

We can set the size of the table to 100%.  This forces the table to expand to fill up the browser window.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='100%'>
    <tr>
        <td>ID</td>
        <td>artiste</td>
        <td>album</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
</table>

</body>
</html>


Codecrawl.com-HTML Table

HTML Table: Setting the size of the table in pixel

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

If you have like to set the size of the table in pixel and will occupy the whole of your browser window, you can first check your desktop display settings.

displaysize

If you look at my laptop settings as shown on the above screen shot, you could see that it is set at 1366 x 768 pixels.  The first 1366 pixels is always the width.

<table border='1' width='1200px'>

Judging from my laptop settings, if you would like to set the width to full browser, you could probably set the width at about 1200 px as shown in the example below.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='1200px'>
    <tr>
        <td>ID</td>
        <td>artiste</td>
        <td>album</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
</table>

</body>
</html>