HTML Programming Tutorial: Basic HTML programming 2

"HTML is a very common programming used at Twitter, Facebook, friendster, forum, blogspot etc. Have you ever seen somebody put their favourite link in facabook account, friendster account, forum etc. Just a single click on that link, you will be alternate to that website. Nothing is hard when you are willing to discover it today. " (Source: Previous tutorial)

In order to make your web page become tidier, table plays an important role. You can use a table to create your web page layout, categorize your stuff etc. The first step to create a table in your web page by using html code is to declare a table by create a open and close code, which is <table> and </table>.

Next, of course, the minimum table dimension is 1 X 1, which consists of one column and one row. In this case, column is represented by <td> </td> and row is represented by <tr> </tr>. As a result, your 1X1 table has a code like:

<table>
<tr>
<td>
Your Data
</td>
</tr>
<table>

with an output as:

Your Data

Don't be surprise that you do not like the boundary of the table. It is because you haven't declared it. Therefore, you can adjust the border of the table by adding border = "BORDEN VALUE" as shown below:

<table border ="1">
<tr>
<td>
Your Data
</td>
</tr>
<table>

with an output as:
< td> Your Data

The greater the border value, the width the border is.

Next, how about a 3X3 table? Please bear in mind that the number of column and row are equal to the number of <td> and <tr>, respectively. Therefore,

<table border ="1">
<tr>
    <td>
Your Data 11
    </td>
</tr>
<tr>
    <td>
Your Data 21
    </td>
</tr>

<tr>
    <td>
Your Data 31
    </td>
    <td>
Your Data 32
    </td>
    <td>
Your Data 33
    </td>
</tr>
<table>

Output of the above code is:

Your Data 11
Your Data 21
Your Data 31	Your Data 32	Your Data 33

Besides that, you can also fix the dimension of the column and row in a table:

<table border ="1">
<tr>
    <td height = "100px">
Your Data 11
    </td>
</tr>
<tr>
    <td width= "300px">
Your Data 21
    </td>
</tr>

<tr>
    <td>
Your Data 31
    </td>
    <td>
Your Data 32
    </td>
    <td>
Your Data 33
    </td>
</tr>
<table>

with an output as:

Your Data 11
Your Data 21
Your Data 31	Your Data 32	Your Data 33

Finally, you can also colour both background and border of table.

<table border ="3" bordercolor = blue>
<tr>
<td>
Your Data
</td>
</tr>
<table>

with its output:

< td> Your Data

and

<table border ="3" bordercolor = blue>
<tr>
    <td>
Your Data
    </td>
    <td bgcolor = "red">
Your Data2
    </td>
</tr>
<table>

Your Data

Your Data2

Written by: Xaivier Chia