HTML Table introduction

HTML Table introduction:

In this tutorial we will be expanding on our previous tutorial by creating multiple tables to store all of our future HTML tutorial data.

If you want to follow the tutorial please download tutorial template here
If you are following these tutorials continue to use your own source code from previous tutorial.

We will be using the following tags:
•Opening tag <table>
•Closing tag </table>
•Table row opening tag <tbody>
•Table row closing tag </tbody>
 •Table row opening tag <tr>
•Table row closing tag </tr>
•Table data opening tag <td>
•Table data closing tag </td>
•Table header opening tag <th>
•Table header closing tag </th>

HTML tables are made up of rows and columns.
• To create a row in a table <tr></tr> tags are used and to create columns the <td></td> tags are used.
• To create multiple rows and multiple columns the table data tags are enclosed within the table row tags      
<tr>
    <td></td>
</tr>
• Although its not recommended you can create a single row with multiple columns by using just the table data tag without the table row tags.
• To create a header at the top of each column you add the <th></th> tags and any text you input here will have a bold style and be centered in the header box.
• All of the tags above are enclosed within the table and table body tags


In this tutorial we will be creating five tables with multiple rows and columns. Each table will have a different variation in size.

For the Text Link section we are going to create a table with two rows and two columns. One column to store the header description text and the other to store the code used and the HTML element produced from the code.

The code below will create a table with a single row and column. Inside the table data tags type in HTML Code.

<h4>Text Link:</h4> This is a preview of what is produced from the text link tutorial <table ><tbody> <tr> <td>HTML Code</td> </tr> </tbody></table>

To add in the second column add in <td></td> after the table data closing tag </td> from the previous snippet of code above.

<h4>Text Link:</h4> This is a preview of what is produced from the text link tutorial <table ><tbody> <tr> <td>HTML Code</td><td></td> </tr> </tbody></table>

To add in the second row type in the following  from the snippet of code below and type in Link Produced in the left hand column of the new row.

<h4>Text Link:</h4> This is a preview of what is produced from the text link tutorial <table ><tbody> <tr> <td>HTML Code</td><td></td> </tr> <tr> <td>Link Produced</td><td></td> </tr> </tbody></table>

If you save your document now and view it on a browser you will only see the text floating on the screen and no table outline. This is because HTML tables have no outline by default. To add an outline we have to add a border thickness.

Inside the table opening tag type in border="1" and  width="620". This will set the table size to 620px and it will also give the table a border.

<h4>Text Link:</h4> This is a preview of what is produced from the text link tutorial <table border="1" width="620"><tbody> <tr> <td>HTML Code</td><td></td> </tr> <tr> <td>Link Produced</td><td></td> </tr> </tbody></table>

Repeat the last few steps for the Clickable Button, Onclick Event Button and URL Link Button sections of the tutorial template with the following alterations:

Clickable Button:               width="400"          Button produced instead of Link Produced
Onclick Event Button:        width="600"          Button produced instead of Link Produced
URL Link Button:              width="650"          Button produced instead of Link Produced


I have skipped the table for text link with target attribute section. To see if you have learned anything from this tutorial I would like you to create a table with five rows and two columns.
The table border = 2 and the width = 800. In the top left cell of the table type in HTML code and type Link Produced in the right hand cell.
Hint: The first row will store both text values unlike the other tables that we covered above which had one text value per row.

Save your HTML document and test on browser of choice. If you wish to continue following the tutorials type Yes into the table data column after HTML Table introduction in the completed tutorials table.

<tr>    <td>HTML Table introduction</td>    <td>Yes</td> </tr>

To download the finished example for this tutorial please click here

In the next tutorial I will be talking about altering HTML tables.

Previous tutorial

Next tutorial