HTML Layouts Examples




HTML Layouts Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Layout Table</title>
   </head>
   <body>
      <table width="100%" border="0">
         <tr>
            <td colspan="2" bgcolor="red">
            <h1 style="text-align:center;">This is Web Page</h1>
            </td>
         </tr>
         <tr valign="top">
            <td bgcolor="blue" width="70">
            <b>Main Menu</b><br />
            HTML<br />
            HTML5<br />
            CSS<br />
            PHP...
            </td>
            <td bgcolor="Orange" width="100" height="250">
            Web Development Tutorials
            </td>
         </tr>
         <tr>
            <td colspan="2" height="50" bgcolor="Cyan">
            <center>
            Copyright © Tutorialsroot.com 2017. All Rights Reserved
            </center>
            </td>
         </tr>
      </table>
   </body>
</html>

Output

HTML Layout with DIV, SPAN and CSS Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Layout with DIV, SPAN and CSS</title>
   </head>
   <body>
      <div style="width:100%">
         <div style="background-color:#F52807">
            Tutorialsroot Header
         </div>
         <div style="background-color:#B8FF33;height:200px;width:30%;float:left;">
            Left menu
         </div>
         <div style="background-color:#33FF77;height:200px;width:70%;float:right;">
            Main body
         </div>
         <div style="background-color:#F52807;clear:both">
            Tutorialsroot Footer
         </div>
      </div>
   </body>
</html>

Output