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>