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 gets distorted,
I shall show a very small piece of code which displays a 3 by 3 table using Div tag.
<head id="Head1" runat="server">
<title>HealthInfo</title>
<style type="text/css">
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="Table">
<div class="Title">
<p>
This is a Table</p>
</div>
<div class="Heading">
<div class="Cell">
<p>
FirstName</p>
</div>
<div class="Cell">
<p>
LastName</p>
</div>
<div class="Cell">
<p>
Age</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>
Praveen</p>
</div>
<div class="Cell">
<p>
Raveendran</p>
</div>
<div class="Cell">
<p>
28</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>
John</p>
</div>
<div class="Cell">
<p>
Samuels</p>
</div>
<div class="Cell">
<p>
27</p>
</div>
</div>
</div>
</form>
</body>
</html>