<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell">
<p>Heading 1</p>
</div>
<div class="Cell">
<p>Heading 2</p>
</div>
<div class="Cell">
<p>Heading 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 1 Column 1</p>
</div>
<div class="Cell">
<p>Row 1 Column 2</p>
</div>
<div class="Cell">
<p>Row 1 Column 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 2 Column 1</p>
</div>
<div class="Cell">
<p>Row 2 Column 2</p>
</div>
<div class="Cell">
<p>Row 2 Column 3</p>
</div>
</div>
</div>
The CSS for this table uses a few special properties and a little
clever formatting. Here is the CSS used to make this example
functional.
<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>
<html>
<head>
<title>Create table using Div</title>
<style type='text/css'>
div#container {
border: 1px solid;
margin:5px;
background: #ACFF22;
}
div#float {
text-align: center;
float: left;
border: 1px solid black;
width: 140px;
height: 100px;
}
div.tableContent {
background: #FBCA43;
border: 1px solid black;
}
div#Footer {
border: 1px solid black;
background: lightgreen;
clear: both;
}
</style>
</head>
<body>
<div id='container'>
<div id='float'>
Column 1
<div class='tableContent'>
Data 1
</div>
</div>
<div id='float'>
Column 2
<div class='tableContent'>
Data 2
</div>
</div>
<div id='float'>
Column 3
<div class='tableContent'>
Data 3
</div>
</div>
</div>
</div>
</body>
</html>
---------------------------------------------------------------
<body>
<form id="form1">
<div class="divTable">
<div class="headRow">
<div class="divCell" align="center">Customer ID</div>
<div class="divCell">Customer Name</div>
<div class="divCell">Customer Address</div>
</div>
<div class="divRow">
<div class="divCell">001</div>
<div class="divCell">002</div>
<div class="divCell">003</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>
</form>
</body>
<style type="text/css">
.divTable
{
display: table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
/* border-collapse:separate;*/
}
.divRow
{
display:table-row;
width:auto;
}
.divCell
{
float:left;/*fix for buggy browsers*/
display:table-column;
width:200px;
background-color:#ccc;
}
</style>
Here is a list of the style sheet classes I have created for the page layout. Let’s get into more
detail.
divHeaderTable: Class assigned to header of the html page and its works as headertable
divHeaderRow: Class assigned to the div element which works as header row of table. As height
of header image is fix to 105 row having height element value 105px.
divHeaderColumn: Class assigned to div element which works as header column of the table. As
header part is divided in three part the width element having value 99%.
divTable: Class assigned to the div element woks as the table in container part of html
document.
divRow: Class assigned to the div element woks as the row in container part of html document.
divColumn: Class assigned to the div element woks as the table in container part of html
document. As container form element are 4 per row the width element having value 24%.
body
{
background-color: LightBlue;
font-family: Verdana;
font-size: 13px;
}
.divHeaderTable
{
width: 100%;
padding-bottom:5px;
display:block;
}
.divHeaderRow
{
width: 100%; /* add extra that you want to for header column */
display:block;
height:105px;
}
.divHeaderColumn
{
float: left;
width: 33%;
display:block;
}
.divTable
{
width: 100%;
display:block;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
}
.divRow
{
width: 99%;
display:block;
padding-bottom:5px;
}
.divColumn
{
float: left;
width: 24%;
display:block;
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gmind Solusion-DivElement Layout</title>
<link href="CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
</head>
<body>
</div>
<div class="divHeaderColumn">
<div>
<img alt="Gmind" width="15" height="10" src="Images/smllindia.jpg" />
+91-9702989270
</div>
<div>
<img alt="Gmind" src="Images/smallusa.jpg" />
+91-9924839208
</div>
<div>
</div>
<div>
</div>
</div>
</div>
</div>
<div class="divRow">
<div class="divColumn">
<div>
<label id="Label10" > Login Name</label>
</div>
<div>
<input type="text" id="Text13" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label9" > E-mail</label>
</div>
<div>
<input type="text" id="Text12" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label7" > Password</label>
</div>
<div>
<input type="password" id="Text10" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label8" > Confirm Password</label>
</div>
<div>
<input type="password" id="Text11" />
</div>
</div>
</div>
<div class="divRow">
<div class="divColumn" style="width:48%;">
<div>
<label id="Label1" > Address1</label>
</div>
<div>
<textarea id="Text4" style="width:80%;" ></textarea>
</div>
</div>
<div class="divColumn" style="width:48%;">
<div>
<label id="Label3" > Address2</label>
</div>
<div>
<textarea id="Text6" style="width:80%;"> </textarea>
</div>
</div>
</div>
<div class="divRow">
<div class="divColumn">
<div>
<label id="Label2" > State</label>
</div>
<div>
<input type="text" id="Text5" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label4" > City</label>
</div>
<div>
<input type="text" id="Text7" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label5" > Country</label>
</div>
<div>
<input type="text" id="Text8" />
</div>
</div>
<div class="divColumn">
<div>
<label id="Label6" > Pin Code</label>
</div>
<div>
<input type="text" id="Text9" />
</div>
</div>
</div>
<br />
<div class="divRow">
<input type="submit" value="Submit" onclick="javascript:void(0);" />
or
<a href="javascript:void(0)">Cancel </a>
</div>
</div>
</div>
<div style="text-align:center; background-color:Green;">
Contact us to discuss your requirements
</div>
</body>
</html>
----------------------------------