"What is difference between span and div tag?"
This prompted me to write this post.
<span> and <div> tags both allow a Web designer to style text and add other formatting attributes to their Web page.
The <span> and <div> tags are very useful when dealing with Cascading Style Sheets.
Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using
<div style="text-align: center;">
to center the content inside your div.
<div> tags are block elements. This means they can "hold" other HTML elements, and they can be positioned anywhere on the screen. For this reason, <div> tags can be used for replacing table-based Web designs.
Unlike <div> tags, <span> tags cannot hold other HTML tags. They should only be used for inline styling of text. Consider the following code:
<span >
<p>This is some text sized at 14 pixels.</p>
</span>
This code will probably render OK in most browsers, but it is actually incorrect. Remember, since the <span> tag is not a block-level element, it cannot contain other HTML tags. The correct way to write this code would be:
<p><span >
This is some text sized at 14 pixels.
</span></p>
Since <div> tags are block elements, they create line breaks. This is the same effect as a <p> tag. <span> tags do not create line breaks, which makes them perfect for styling text in the middle of a sentence.
There are far more possible values for the display property than block and inline — in fact, the CSS 2.1 specification lists 17 different possible values. Ten of these values are related to tables and correspond to the way the various HTML table elements act.
However, IE 6/7 doesnot support "display: table"
So, simple code to display a table is rendered differently in IE and Firefox
<html>
<body>
<div style="display:table">
<div style="display:table-row ;">
<div style="display:table-cell;background: #ccc;">
Cell 1
</div>
<div style="display:table-cell;background: #aaa;">
Cell 2
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;background: #ccc;">
Cell 3
</div>
<div style="display:table-cell;background: #aaa;">
Cell 4
</div>
</div>
</div>
</body>
</html>
IE 7 renders it as:
Firefox renders it as:
Your browser will display above code as:
Cell 1
Cell 2
Cell 3
Cell 4
(Refer
Decloak.com for comparison between <table> and <div>tags for displaying tabular data
and Quirksmode.org for compatibility of browsers for display property).
3 comments:
I need link exchange with your blog
if you are interested, please contact : seolinksexpert (at) gmail (dot) com
I am waiting for your positive response
by
web design company, web designer, web design india
I need link exchange with your blog
if you are interested, please contact : seolinksexpert (at) gmail (dot) com
I am waiting for your positive response
by
web design company, web designer, web design india
Very helpful and informative.
Regards,
Roxy
Web Designer
Post a Comment