Where div and table can be used

Posted by Naveen P.N on April 30, 2010 · Leave a Comment  


Hi recently I came across the specialty of div and table;I was more confused with the
popular sayings in the web designing industry”tables design tables design”,still
I don't understand where exactly each one should be used;I didn't dig about the
issue rather I came across where div can be used and where tables can be used
Let us create two sample pages one with div and  one with tables





<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
 <title>Untitled Page</title>
</head>
<script type="text/javascript" language="javascript">
function sam()
{
   document.getElementById('<%= s1.ClientId %>').style.display="none";
}
function sam1()
{
   document.getElementById('<%= s1.ClientId %>').style.display="block";
}
 </script>
<body>
 <form id="form1" runat="server">
       <table width="100%" border="1px">
         <tr>
              <td style="width:100%; height:15px; border:solid 1px black">
                  <div id="s1" runat="server" style="display: block; background-color: Aqua ">
                          Hai
                  </div>
              </td>
        </tr>
        <tr>
              <td  style="width:100%; height:15px ; border:solid 1px black">
                  <div id="s2" runat="server" style="display: block; background-color: Lime ">
                        Hello
                  </div>
             </td>
       </tr>
     </table>
 <input type="button" runat="server" value="Disable" onclick="javascript:sam()" id="Button1" />
 <input  type="button" runat="server" value="Enable" onclick="javascript:sam1()" />
 <asp:Button ID="btn" runat="server" Text="Disable" />
 </form>
</body>
</html>




Instead if a situation arises once user clicks button and inspite of 
block getting  dissappearing we wanted the other block to come first 
then we  can use div




<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Untitled Page</title>
</head>
<script type="text/javascript" language="javascript">
function sam()
{
   document.getElementById('<%= s1.ClientId %>').style.display="none";
}
function sam1()
{
   document.getElementById('<%= s1.ClientId %>').style.display="block";
}
 </script>


 <body>

<form id="form1" runat="server">

<div>

<div id="s1" runat="server" style="display: block; background-color: Blue">

Hai

</div>

<div id="s2" runat="server" style="display: block; background-color: Green">

Hello

</div>

<input id="Button1" type="button" runat="server" value="Disable" onclick="javascript:sam()" />

<input id="Button2" type="button" runat="server" value="Enable" onclick="javascript:sam1()" />

</div>

</form>

</body></html>




 Know click disable we can see the position of second div changes







		
	
			

			
			

				
				

					
Filed under ASP.NET, Web Programming

Leave a comment