Div Class

<div class="Table">
<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">
</div>
<div class="Cell">
</div>
</div>
<div class="Row">
<div class="Cell">
</div>
<div class="Cell">
</div>
<div class="Cell">
</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;
}
div#Footer {
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
Data 2
</div>
</div>
<div id='float'>
Column 3
Data 3
</div>
</div>
Data main div

Data
</div>
Data main div
<div id='Footer'>
Can be used as table footer
</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>
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<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-right:10px;
 padding-left:10px;
 }
 .divRow
 {
 width: 99%;
 display:block;
 }
 .divColumn
 {
 float: left;
 width: 24%;
 display:block;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"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 style="width:99%; height:565px;">

<div class="divHeaderTable">
<div class="divHeaderRow">
<div class="divHeaderColumn">
<img alt="Offshore Outsourcing software development company India"
title="Offshore Outsourcing software development company India"
src="Images/gmind.png" width="100%" height="105" />

</div>
</div>
<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 id="menu" class="divHeaderTable" >

<ul style="list-style-type:none;" >
<li style="float:left"><a href="javascript:void(0);" >Home</a> </li>
<li style="float:left"><a href="javascript:void(0);" >About Us</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Services</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Technology</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Outsourcing</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Quality</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Career</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Blogs</a> </li>
<li style="float:left"><a href="javascript:void(0);" >Partner</a> </li>
<li><a href="javascript:void(0);" title="Contact Us">Contact Us</a> </li>
</ul>
</div>
<div id="divHeader" class="divHeaderTable">

<h4>User Registration</h4>
</div>
<div id="content" class="divTable">

<div class="divColumn">
<div>
<label id="lblSolutation" > Solutation</label>
</div>
<div>
<input type="text" id="txtSolutation" />
</div>
</div>
<div>
<label id="lblFname" > First Name</label>
</div>
<div>
<input type="text" id="Text1" />
</div>
</div>
<div>
<label id="lblMname" > Middle Name</label>
</div>
<div>
</div>
</div>
<div>
<label id="lblLname" > Last Name</label>
</div>
<div>
</div>
</div>
</div>
<div>
<label id="Label10" > Login Name</label>
</div>
<div>
</div>
</div>
<div>
<label id="Label9" > E-mail</label>
</div>
<div>
</div>
</div>
<div>
<label id="Label7" > Password</label>
</div>
<div>
<input type="password" id="Text10" />
</div>
</div>
<div>
<label id="Label8" > Confirm Password</label>
</div>
<div>
<input type="password" id="Text11" />
</div>
</div>
</div>
<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>
<label id="Label2" > State</label>
</div>
<div>
</div>
</div>
<div>
<label id="Label4" > City</label>
</div>
<div>
</div>
</div>
<div>
<label id="Label5" > Country</label>
</div>
<div>
</div>
</div>
<div>
<label id="Label6" > Pin Code</label>
</div>
<div>
</div>
</div>
</div>
<br />
<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>
----------------------------------

Div Class

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Div Class

Uploaded by

Copyright:

Available Formats

<div class="Table">

Data main div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<div style="width:99%; height:565px;">

title="Offshore Outsourcing software development company India"

src="Images/gmind.png" width="100%" height="105" />

<div id="menu" class="divHeaderTable" >

<div id="divHeader" class="divHeaderTable">

<div id="content" class="divTable">

You might also like