Lession 3: How to make page layout Using HTML table?

Hi welcome back to My Blog!

I hope in last two three lession you are gain some basic knowledge in HTML.

Ok today we will see how to make layout based webpages using HTML tables.There are some steps we can make layouts.

Ok friends lets come....

Page Layout Using HTML table

Step1: First calculate how many rows and columns(Ex: 3 row, 1 col)

step2: To create tables in 3 rows and 1 coloums


                                             <table width="200" border="1">
                                                         <tr>
                                                                   <td>Header</td>
                                                         </tr>
                                                          <tr>
                                                                   <td>Content</td>
                                                          </tr>
                                                          <tr>
                                                                     <td>Footer</td>
                                                          </tr>
                                            </table>

Output:

Step3: Thats all ! you are done 90%.

Step 4: There are some add basic attributes and elements.

Step5: To set table width and height.
Step6: To set  Ist row(header) td width and height.
Step7: To set  2st row (content)td width and height.
Step8: To set  3Ist row(footer) td width and height.


<table width="1000"  align="center">
  <tr>
    <td width="1000" height="150"  valign="top"></td>
  </tr>
  <tr>
    <td width="1000" height="350"  valign="top">
</td>
  </tr>
  <tr>
    <td width="1000" height="100"  valign="top"></td>
  </tr>
</table>

Output:

Step9: To add effect like bgcolor

<table width="1000"  align="center">
  <tr>
    <td width="1000" height="150" bgcolor="#FF0066" valign="top"></td>
  </tr>
  <tr>
    <td width="1000" height="350" bgcolor="#FF6666" valign="top">
</td>
  </tr>
  <tr>
    <td width="1000" height="100" bgcolor="#FF0066" valign="top"></td>
  </tr>
</table>

 

Output:

Step10: To add heading content and footer

<table width="1000"  align="center">

  <tr>

    <td width="1000" height="150" bgcolor="#FF0066" valign="top"><font color="#FFFFFF"><h1>My Blog</h1></font></td>

  </tr>

  <tr>

    <td width="1000" height="350" bgcolor="#FF6666" valign="top">

<h3>Welcome To My Blog</h3>

<p>this is text this is text this is text this is text this is text this is text this is text 

this is text this is text this is text this is text this is text this is text this is text 

this is text this is text this is text this is text this is text this is text 

this is text this is text this is text this is text this is text this is text this is text 

this is text this is text this is text this is text this is text this is text this is text 

this is text this is text this is text this is text this is text 

this is text this is text this is text this is text this is text this is text this is text 

this is text this is text this is text this is text this is text this is text this is text </p></td>

  </tr>

  <tr>

    <td width="1000" height="100" bgcolor="#FF0066" valign="top"><font color="#FFFFFF"><p align="center">Designed by XXXXXX</p></font></td>

  </tr>

</table>

Output:

Ok fine!......