We now have a youtube channel. Subscribe!
Home
Html

Html Layout


Hello dear readers! welcome back to another section of my tutorial on Html, in this tutorial am going to be discussing about the Html Layouts.

A web page layout is important in giving a better look to your site. It takes a considerable amount of time to design a website's layout that has a great look and feel.

Now-a-days, all modern websites makes use of Css and Javascript based framework to come up with responsive and dynamic websites but you can create a good layout by making use of simple HTML tables or even using Html division tags in combination with other formatting tags. This section of my tutorial on Html gives you a few examples on how to create a simple but working layout for your webpage by using pure Html and its attributes.

HTML Layout Using Tables

The most simplest way of creating layouts is by making use of Html <table> tag. These tables are been arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

Example

Below the following Html layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute:


<!DOCTYPE html>
<html>
     
     <head>
            <title>HTML Layout using Tables</title>
     </head>

      <body>
            <table width="100%"   border="1">               

                   <tr>
                       <td colspan="2"  bgcolor="#b5dcb3">                
                            <h1>Main title</h1>           
                       </td>     
                  </tr>     
                  <tr  valign="top">           
                       <td bgcolor="#aaa"  width="50">                
                            <b>Main Menu</b> <br />                
                            HTML<br />                
                            PHP<br />                
                            MySQL...           
                       </td>           

                        <td  bgcolor="#eee"  width="100"  height="250">                   
                            Web design tutorial on HTML Layout           
                       </td>     
                  </tr>     
                  <tr>           
                       <td  colspan="2"  bgcolor="#b5dcb3">                 
                            <center>                     
                                Copyright ©  2018  Webdesigntutorialz.blogspot.com                   
                            </center           
                       </td>     
                  </tr> 
            </table> 
     </body> 
</html> 

Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box. I will attend to them as soon as possible.

RECOMMENDED: Html Blocks

Multiple Columns Layout Using Tables

You can design your webpage in a way that you can put your content in multiple pages. Your contents can be kept in the middle column and you can use left column to use menu and the right column can be used to put advertisement or any other stuff.

Example

Here is a simple example on how to create a three column layout using a Html table:

<!DOCTYPE  html>
<html>
     
     <head>
            <title>Three Column HTML Layout</title>
     </head>

      <body>
            <table  width="100%"  border="1">     
           
                  <tr  valign="top">            
                       <td  bgcolor="#aaa"  width="20">                
                            <b>Main Menu</b><br  />               
                            HTML<br  />               
                            PHP<br  />               
                            MYSQL...            
                       </td>           

                        <td  bgcolor="#b5dcb3"  height="250"  width="60%">                  
                            Web design tutorialz           
                       </td>           

                        <td  bgcolor="#aaa"  width="20">               
                            <b> Right Menu</b><br  />               
                            HTML<br  />               
                            PHP<br  />               
                            MYSQL...           
                       </td>     
                  </tr>
            </table>
     </body>
</html>

Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box below if you have any.

HTML Layout Using DIV, SPAN Tags

The <div> element is a block level element that is used in grouping Html elements. While the <div> element is a block-level element, the <span> tag on the other hand, is used for grouping elements at an inline level.

Although some nice layouts can be achieved using Html tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.

Note: The example below uses Css, so before you can understand this example you need to have a better understanding of Css.

RECOMMENDED: Html Images

Example

Here we are going to try achieving the same result using <div> tag along side with Css, whatever you have achieved in the last examples that we used table.

<!DOCTYPE  html>
<html>

      <head>
            <title>HTML Layouts using DIV, SPAN</title>
     </head>

      <body>
           <div  style="width: 100%">      

                   <div  style="background-color: #b5dcb3;  width: 100%">            
                       <h1>Page Main title</h1>      
                  </div>      

                   <div  style="background-color: #aaa;  height: 250px;   width: 100px;  float: left;">          
                       <div><b>Main Menu</b></div>           
                            HTML<br  />           
                            PHP<br  />           
                            MYSQL...      
                  </div>      

                   <div  style="background-color: #eee;  height: 250px;   width: 350px;  float: left;">            
                       <p>Web design tutorilz</p>       
                  </div>      

                   <div  style="background-color: #aaa;  height: 250px;   width: 100px;  float: right;">           
                       <div><b>Right Menu</b></div>           
                            HTML<br  />           
                            PHP<br  />           
                            MYSQL...      
                  </div>      

                   <div  style="background-color: #b5dcb3;  clear: both">      
                       <center>            
                            Copyright ©  2018  Webdesigntutorialz.blogspot.com      
                       </center>      
                  </div>
            </div>
     </body>
</html>

Feel free to try the above code out using your text editor for a better understanding. You can also ask your questions where necessary.


Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, am going to be introducing you to Cascading Style Sheets (Css).

Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain