Lesson 4: Learn more HTML Layouts using Tables ?

Hi friends welcome back to My Blog....

Last lesson we learn make HTML Layouts. In this lesson we learn how to make different style of layouts.

Ok lets come!

First of all we know basic things of Layout. how to divide layout portions. simply we divide following parts

• Header
• Menu
• Content
• Left menu
• Left content
• Right content
• Footer

And you think how to order above parts in your webpage.

Am here share some layouts model using HTML models in step by step....

Step 1: First you think how many rows and columns and you want inner table also add in your table

Step 2: For example am here make 3 rows and 1 columns. and 1 inner table 1 row 1 column.

Step 3: 

                                 <table width="1000" border="1">

                                          <tr>

                                                 <td>Header</td>

                                           </tr>

                                            <tr>

                                                 <td>Insert inner table will soon</td>

                                            </tr>

                                            <tr>

                                                 <td>Footer</td>

                                            </tr>

                                  </table>

Output is:

Step 4:

 

                                 <table width="1000" border="1">

                                          <tr>

                                                 <td>Header</td>

                                           </tr>

                                            <tr>

                                                 <td>

                                                           <table width="200" border="1">

                                                        <tr>

                                                                         <td>Left menu</td>

                                                             <td>Content</td>

                                                         </tr>

                                                    </table>

                                               <</td>

                                            </tr>

                                            <tr>

                                                 <td>Footer</td>

                                            </tr>

                                  </table>

Output is:

Step 5: Layout is done ! And make adjust width and height and align and valign

                 <table width="1000" border="1">

                                   <tr>

                                             <td height="108" valign="top">Header</td>

                                   </tr>

                                     <tr>

                                            <td height="349" valign="top">

                                                <table width="987" height="326" border="1">

                                        <tr>

                                                     <td width="206" height="320" valign="top">left menu </td>

                                        <td width="707" valign="top">content</td>

                                        </tr>

                                                  </table>

                                    </td>

                                     </tr>

                                     <tr>

                                           <td valign="top">footer</td>

                                     </tr>

                    </table>

Output is:

Step 6: Ok fine! we add effect bgcolor or background image on header section.

Step 7: Next add menu in left menu section using HTML List.

Step 8: Next make web description on content section using Paragraph and image elements.

Step 9: Next add footer section

             <table width="1000"  cellpadding="0" cellspacing="0">

                  <tr>

                     <td height="108" valign="top" bgcolor="#0099FF"><h1>Training Blog</h1></td>

                </tr>

                 <tr>

                      <td height="349" valign="top">

                             <table width="996" height="349"  cellpadding="0" cellspacing="0">

                      <tr>

                                    <td width="221" height="343" valign="top" bgcolor="#66CCFF">

                              <ul>

                                  <li>Home</li>

                                  <li>About Us</li>

                                   <li>Vision</li>

                                   <li>Mission</li>

                                  <li>Services</li>

                                  <li>Training</li>

                                  <li>Contact Us</li>

                              </ul>

                    </td>

                    <td width="769" valign="top" bgcolor="#66CCFF">

                         <h4>Welcome to our website</h4>

                                <p><img src="images/flowers.jpg" width="100" height="100" />                                                              is html page  This is html page  This is html page

 This is html page  This is html page  This is html page  This is html page  This is html page

   This is html page  This is html page  This is html page  This is html page  This is html page

 This is html page  This is html page  This is html page  This is html page  This is html page

   This is html page  This is html page  This is html page  This is html page  This is html page

 This is html page  This is html page  This is html page  This is html page  This is html page  

   This is html page  This is html page  This is html page  This is html page  This is html page

 This is html page  This is html page  This is html page</p>

</td>

  </tr>

</table>

</td>

  </tr>

  <tr>

    <td valign="top" bgcolor="#0099FF"><p align="center">WEBSITE DESIGNED BY MARIS</p></td>

  </tr>

</table>

Output is:

Step 10: Thank you !