Page Layout in CSS3

In this tutorial layout of a website will be explained and it's parts will be defined with some styling to make it more attractive and easy to use.

Examples of layout with source code.


<style type="text/css">

table {
  width: 100%;
  height: 100%;
  border: 0;
}
.c38-d1 {
  background: linear-gradient(to right, #61ba6d, #83c331);
  padding: 10px;
}
.c38-d2 {
  background-color: lightgrey;
  width: 25%;
  padding-left: 5px;
}
.td-3 {
  background-color: white;
  width: 100%;
  padding: 5px;
  height: 300px;
}
.td-4 {
  background-color: #001a33;
  padding: 20px;
  color: white;
}
table{
        border: 2px solid grey;
}

</style>
<!DOCTYPE html> <html> <head> <title> HTML Layout </title> </head> <body> <table> <tr> <td class="c38-d1" colspan="2"> <h3>Main title webtags</h3> </td> </tr> <tr valign = "top"> <td class="c38-d2"> <b>Main Menu</b><br /> Home<br /> About<br /> Contact </td> <td class="td-3"> <p>webdevelopment and technical shart courses.</p> </td> </tr> <tr> <td class="td-4" colspan = "2"> <center> Copyright © 2021 webtags.com.pk </center> </td> </tr> </table> </body> </html>

Output of above code

Main title webtags

Main Menu
Home
About
Contact

webdevelopment and technical shart courses.

Copyright © 2021 webtags.com.pk

Explanation of above example

This is a simple example of page layout whit is built with the help of table using HTML. First of all as you saw there is table element there are some styling applied on the table element like width, height, and border. After this as you know a table consists on row and columns. So the first row is used for main title of the page and also some styling are applied on it make it more responsive and attractive.This is just like header of a page commonly used in web-page after this, there is row for a side bar which is also display with row and having some styling properties applied on it.There is main content area having white background color. After these all there is footer of the page which is also displayed with the help of a row of table. Some styling properties like color and font-size are applied on it.








The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.