Post
Ask Question

Creating Table using DIV

DIV Tables

 
We all know how to create tables using HTML. HTML has provided the <table> attribute to create one. The main disadvantage of using a table structure is that it does not support resolution scenarios. Confused!!!
 
If you want the controls to get arranged even when the display window is resized better use the div tag. By using the conventional table attribute, the controls get distorted,
 
I shall show a very small piece of code that displays a 3 by 3 table using the Div tag.
  1. <head id="Head1" runat="server">  
  2.     <title>HealthInfo</title>  
  3.     <style type="text/css">  
  4.         .Table  
  5.         {  
  6.             display: table;  
  7.         }  
  8.         .Title  
  9.         {  
  10.             display: table-caption;  
  11.             text-align: center;  
  12.             font-weight: bold;  
  13.             font-size: larger;  
  14.         }  
  15.         .Heading  
  16.         {  
  17.             display: table-row;  
  18.             font-weight: bold;  
  19.             text-align: center;  
  20.         }  
  21.         .Row  
  22.         {  
  23.             display: table-row;  
  24.         }  
  25.         .Cell  
  26.         {  
  27.             display: table-cell;  
  28.             border: solid;  
  29.             border-width: thin;  
  30.             padding-left: 5px;  
  31.             padding-right: 5px;  
  32.         }  
  33.     </style>  
  34. </head>  
  35. <body>  
  36.     <form id="form1" runat="server">  
  37.         <div class="Table">  
  38.             <div class="Title">  
  39.                 <p>  
  40.                 This is a Table</p>  
  41.             </div>  
  42.             <div class="Heading">  
  43.                 <div class="Cell">  
  44.                     <p>  
  45.                     FirstName</p>  
  46.                 </div>  
  47.                 <div class="Cell">  
  48.                     <p>  
  49.                     LastName</p>  
  50.                 </div>  
  51.                 <div class="Cell">  
  52.                     <p>  
  53.                     Age</p>  
  54.                 </div>  
  55.             </div>  
  56.             <div class="Row">  
  57.                 <div class="Cell">  
  58.                     <p>  
  59.                     Praveen</p>  
  60.                 </div>  
  61.                 <div class="Cell">  
  62.                     <p>  
  63.                     Raveendran</p>  
  64.                 </div>  
  65.                 <div class="Cell">  
  66.                     <p>  
  67.                     28</p>  
  68.                 </div>  
  69.             </div>  
  70.             <div class="Row">  
  71.                 <div class="Cell">  
  72.                     <p>  
  73.                     John</p>  
  74.                 </div>  
  75.                 <div class="Cell">  
  76.                     <p>  
  77.                     Samuels</p>  
  78.                 </div>  
  79.                 <div class="Cell">  
  80.                     <p>  
  81.                     27</p>  
  82.                 </div>  
  83.             </div>  
  84.         </div>  
  85.     </form>  
  86. </body>undefined</html>