Use Division Instead of Table
×
Home Courses Community Support
Use Division Instead of Table

<DIV> Tag

Div defines the division or container in HTML document. Generally it is used wth CSS because div have no properties of itself. It is a container of HTML which can contain anything. So we can say that division is used to group elements to apply CSS on them.

Below is the syntax to use div-

<div>
<!-- Space for div elements. -->
</div>

 

In the last heading you learn that table is used to represent tabular data. But apart from tabular data, the table was used to create a webpage layout.
 

Now we use Division <div> element to create webpage layout, instead of table.

Below are some reasons to use <div> instead of <table>.

  • Layout Issue:To use a table for layout we need to define all the columns in table head. Later in second row we can just combine the rows and columns, but we can not change the layout given in table head. And in case of DIVs you can use them any how. You can overlap two div. You can add space between them and you can do whatever you want because the divs are fully dynamic.
     
  • Cross browser compatibility: Tables causes cross browser compatibility issue. Table data may look different in different browsers. While Divs are same in all the browsers.
     
  • Load Time: Tables load slow while divs load faster. Faster browsing is a good feel.


Let take an example to learn more about div -

<!DOCTYPE html>
<html>
<head><title>Use of division</title></head>
<body>
<div>
<h2>CSS for this div will affect to everything inside the division.</h2>
</div>
</body>
</html>

 

Output of the above code will simply print the text in H2 heading. In next heading we will learn to apply CSS on division.

 

 

← Preview

Working on Table

Next →

Use Style with in DIV Element

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App