HTML Tags - DIV vs TABLE instead of DIV or TABLE

DIV/TABLE are HTML tags which can populate data inside the markup language. Most of us have come across the situation, where we have to choose between DIV and TABLE. Both have there own way of presenting data inside the HTML. Ofcourse TABLE tag gives easier way of displaying data like, showing a weekly/monthly/yearly report with legible heading for each column, any tabular data etc. So is it possible to use DIV instead of TABLE in the above example?, yes it is possible. Its hard for a beginner to go with a DIV, because inorder to make a perfect aligning of DIV, some styling basics (Cascading Style Sheet – CSS )also should be known. 

 Comparison

DIV	TABLE
Loads faster.	Loads slower.
Quite few tags needed (div).	More tags needed (table , tr, td, thead , tfoot ,th).
Make use of Search Engine Optimization (SEO) more powerful.	Less powerful.
Reduce size of the page significantly.	Page size increases.
Flexible.	Inflexible.
Styling issues compromised using CSS.	Only partially.

 

DIV and SPAN tags

DIV which creates a division inside html content. Usually used to dynamically populate data, using AJAX calls.SPAN also creates a division. The main difference between these two is that

• DIV creates a line break after the tag is closed.

Example 1

Example 2

Output

Example 1

Example 2

Inorder to make this in single line. This need to be changed to:

Example 1

Example 2

Output

Example 1 Example 2

• SPAN will not create any line breaks. Usually SPAN is used for styling text with the help of CSS.
  
  

  Example 1
  Example 2
  

  
  
  

  Output

  
  

  Example 1Example 2