HTML and CSS

table using CSS and Xhtml

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jan 2008

Posts: 33

Reputation: vijukumar is an unknown quantity at this point

Solved Threads: 0

vijukumar

Offline

Light Poster

table using CSS and Xhtml

Mar 19th, 2008

Please some body tell me how to display a table with two rows only using <div> tags in Xhtml using CSS. if you pass me the code it will be a great help. please dont tell me again how to desing using <tr> and <td> tags. want it in <div> tags only

•

Join Date: Feb 2008

Posts: 21

Reputation: aravelli is an unknown quantity at this point

Solved Threads: 2

aravelli

Offline

Newbie Poster

Re: table using CSS and Xhtml

Mar 19th, 2008

try this link

http://www.dev-archive.net/articles/table-in-css.html

i have used the code given by this site and is working fine.

i hope this will work for you.

aravelli ramesh

•

Join Date: Feb 2008

Posts: 21

Reputation: aravelli is an unknown quantity at this point

Solved Threads: 2

aravelli

Offline

Newbie Poster

Re: table using CSS and Xhtml

Mar 19th, 2008

otherwise use this code

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="Text/css">/* The specific style rules used to suggest rendering */
/* for the CSS table design example, starts here */
*{
 
margin-top: 0ex;
 
margin-right: 0ex;
 
margin-bottom: 0ex;
 
margin-left: 0ex;
 
padding-top: 0ex;
 
padding-right: 0ex;
 
padding-bottom: 0ex;
 
padding-left: 0ex;
 
font-family: "Trebuchet MS",sans-serif;
 
}
 
DIV.base-layer {
  background: none #cc9966; border: solid #333333 1px; color: #000000;
  margin: 0.5em 12px 0.5em 12px; padding: 0; text-align: center; width: auto;
}
 
DIV.table-row {
  background: none #ffffcc; border: solid #000000 1px; color: #000000;
  margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
  padding: 0; text-align: center; width: 96%;
}
 
/* Style rules for the 3 x 2 table example */
 
DIV.left-container2 {
  border: none; float: left; margin: 0; padding: 0; width: 50%;
}
 
DIV.right-container2 {
  border: none; float: right; margin: 0; padding: 0; width: 50%;
}
 
/* Rules in detail that is used to suggest rendering for the */
/* Nobel price winner table example. I still use some of the */
/* generic rules as found above and below, but still..       */
 
DIV.left-container13 {
  border: none; float: left; margin: 0; padding: 0; width: 20%;
}
 
DIV.left-container23 {
  border: none; float: left; margin: 0; padding: 0; width: 35%;
}
 
DIV.right-container13 {
  border: none; float: right; margin: 0; padding: 0; width: 45%;
}
 
/* Rules in detail that is used to suggest rendering for the  10 by 5 int. */
/* product table example. I still use some of the generic rules as found   */
/* above and below, but still..                                            */
 
DIV.left-layer11 {
  border: none; float: left; margin: 0; padding: 0; width: 9%;
}
 
DIV.right-layer11 {
  border: none; float: right; margin: 0; padding: 0; width: 10%;
}
 
/* Watch out for this DIV... rule, it appears every now and then */
 
DIV.space-line {
  clear: both; margin: 0; padding: 0; width: auto;
}
 
/* Some rules for captions, headers and running text */
 
H4.table-caption {
  background: transparent; color: #3333cc; font-family: sans-serif;
  font-size: 1em; font-style: italic; font-weight: bold; margin: 0;
  padding: 0.3em; text-align: center; width: auto;
}
 
H5.colhdr {
  background: none #ffffcc; border: solid #3333cc 1px; color: #993333;
  font-family: sans-serif; font-size: 1em; font-style: italic;
  font-weight: normal; margin: 0; padding: 0.3em 0.3em 0 0.3em;
  text-align: center; width: auto;
}
 
P.text {
  border: solid #3333cc 1px; margin: 0; padding: 0.3em 0.3em 0 0.3em;
  font-style: normal; font-size: 1em; text-align: center; text-indent: 0;
  width: auto;
}
 
/* End of layer specific style rule set */
</style>
 </HEAD>
 
 <BODY><div class="base-container base-layer">
<h4 class="table-caption">
A 10 by 4 integer product table
</h4>
<div class="table-row">
<div class="left-layer11">
<h5 class="colhdr">
x
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
1
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
2
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
3
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
4
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
5
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
6
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
7
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
8
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
9
</h5>
</div>
<div class="right-layer11">
<h5 class="colhdr">
10
</h5>
</div>
<div class="space-line">
</div>
</div>
<div class="table-row">
<div class="left-layer11">
<h5 class="colhdr">
1
</h5>
</div>
<div class="left-layer11">
<p class="text">
1
</p>
</div>
<div class="left-layer11">
<p class="text">
2
</p>
</div>
<div class="left-layer11">
<p class="text">
3
</p>
</div>
<div class="left-layer11">
<p class="text">
4
</p>
</div>
<div class="left-layer11">
<p class="text">
5
</p>
</div>
<div class="left-layer11">
<p class="text">
6
</p>
</div>
<div class="left-layer11">
<p class="text">
7
</p>
</div>
<div class="left-layer11">
<p class="text">
8
</p>
</div>
<div class="left-layer11">
<p class="text">
9
</p>
</div>
<div class="right-layer11">
<p class="text">
10
</p>
</div>
<div class="space-line">
</div>
</div>
<div class="table-row">
<div class="left-layer11">
<h5 class="colhdr">
2
</h5>
</div>
<div class="left-layer11">
<p class="text">
2
</p>
</div>
<div class="left-layer11">
<p class="text">
4
</p>
</div>
<div class="left-layer11">
<p class="text">
6
</p>
</div>
<div class="left-layer11">
<p class="text">
8
</p>
</div>
<div class="left-layer11">
<p class="text">
10
</p>
</div>
<div class="left-layer11">
<p class="text">
12
</p>
</div>
<div class="left-layer11">
<p class="text">
14
</p>
</div>
<div class="left-layer11">
<p class="text">
16
</p>
</div>
<div class="left-layer11">
<p class="text">
18
</p>
</div>
<div class="right-layer11">
<p class="text">
20
</p>
</div>
<div class="space-line">
</div>
</div>
<div class="table-row">
<div class="left-layer11">
<h5 class="colhdr">
3
</h5>
</div>
<div class="left-layer11">
<p class="text">
3
</p>
</div>
<div class="left-layer11">
<p class="text">
6
</p>
</div>
<div class="left-layer11">
<p class="text">
9
</p>
</div>
<div class="left-layer11">
<p class="text">
12
</p>
</div>
<div class="left-layer11">
<p class="text">
15
</p>
</div>
<div class="left-layer11">
<p class="text">
18
</p>
</div>
<div class="left-layer11">
<p class="text">
21
</p>
</div>
<div class="left-layer11">
<p class="text">
24
</p>
</div>
<div class="left-layer11">
<p class="text">
27
</p>
</div>
<div class="right-layer11">
<p class="text">
30
</p>
</div>
<div class="space-line">
</div>
</div>
<div class="table-row">
<div class="left-layer11">
<h5 class="colhdr">
4
</h5>
</div>
<div class="left-layer11">
<p class="text">
4
</p>
</div>
<div class="left-layer11">
<p class="text">
8
</p>
</div>
<div class="left-layer11">
<p class="text">
12
</p>
</div>
<div class="left-layer11">
<p class="text">
16
</p>
</div>
<div class="left-layer11">
<p class="text">
20
</p>
</div>
<div class="left-layer11">
<p class="text">
24
</p>
</div>
<div class="left-layer11">
<p class="text">
28
</p>
</div>
<div class="left-layer11">
<p class="text">
32
</p>
</div>
<div class="left-layer11">
<p class="text">
36
</p>
</div>
<div class="right-layer11">
<p class="text">
40
</p>
</div>
<div class="space-line">
</div>
</div>
<h4 class="table-caption">
It should be Ok to go on from here
</h4>
</div>
 
 
 </BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="Text/css">/* The specific style rules used to suggest rendering */
/* for the CSS table design example, starts here */
*{

margin-top: 0ex;

margin-right: 0ex;

margin-bottom: 0ex;

margin-left: 0ex;

padding-top: 0ex;

padding-right: 0ex;

padding-bottom: 0ex;

padding-left: 0ex;

font-family: "Trebuchet MS",sans-serif;

}

DIV.base-layer {
  background: none #cc9966; border: solid #333333 1px; color: #000000;
  margin: 0.5em 12px 0.5em 12px; padding: 0; text-align: center; width: auto;
}

DIV.table-row {
  background: none #ffffcc; border: solid #000000 1px; color: #000000;
  margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
  padding: 0; text-align: center; width: 96%;
}

/* Style rules for the 3 x 2 table example */

DIV.left-container2 {
  border: none; float: left; margin: 0; padding: 0; width: 50%;
}

DIV.right-container2 {
  border: none; float: right; margin: 0; padding: 0; width: 50%;
}

/* Rules in detail that is used to suggest rendering for the */
/* Nobel price winner table example. I still use some of the */
/* generic rules as found above and below, but still..       */

DIV.left-container13 {
  border: none; float: left; margin: 0; padding: 0; width: 20%;
}

DIV.left-container23 {
  border: none; float: left; margin: 0; padding: 0; width: 35%;
}

DIV.right-container13 {
  border: none; float: right; margin: 0; padding: 0; width: 45%;
}

/* Rules in detail that is used to suggest rendering for the  10 by 5 int. */
/* product table example. I still use some of the generic rules as found   */
/* above and below, but still..                                            */

DIV.left-layer11 {
  border: none; float: left; margin: 0; padding: 0; width: 9%;
}

DIV.right-layer11 {
  border: none; float: right; margin: 0; padding: 0; width: 10%;
}

/* Watch out for this DIV... rule, it appears every now and then */

DIV.space-line {
  clear: both; margin: 0; padding: 0; width: auto;
}

/* Some rules for captions, headers and running text */

H4.table-caption {
  background: transparent; color: #3333cc; font-family: sans-serif;
  font-size: 1em; font-style: italic; font-weight: bold; margin: 0;
  padding: 0.3em; text-align: center; width: auto;
}

H5.colhdr {
  background: none #ffffcc; border: solid #3333cc 1px; color: #993333;
  font-family: sans-serif; font-size: 1em; font-style: italic;
  font-weight: normal; margin: 0; padding: 0.3em 0.3em 0 0.3em;
  text-align: center; width: auto;
}

P.text {
  border: solid #3333cc 1px; margin: 0; padding: 0.3em 0.3em 0 0.3em;
  font-style: normal; font-size: 1em; text-align: center; text-indent: 0;
  width: auto;
}

/* End of layer specific style rule set */
</style>
 </HEAD>

 <BODY><div class="base-container base-layer">
<h4 class="table-caption">
A 10 by 4 integer product table
</h4>
<div class="table-row">
<div class="left-layer11">
<h5 class="colhdr">
x
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
1
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
2
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
3
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
4
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
5
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
6
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
7
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
8
</h5>
</div>
<div class="left-layer11">
<h5 class="colhdr">
9
</h5>
</div>
<div class="right-layer11">
<h5 class="colhdr">
10
</h5>
</div>
<div class="space-line">
</div>
</div>
<div class="table-row">
<div class="left-layer11">
<h5 class="colhdr">
1
</h5>
</div>
<div class="left-layer11">
<p class="text">
1
</p>
</div>
<div class="left-layer11">
<p class="text">
2
</p>
</div>
<div class="left-layer11">
<p class="text">
3
</p>
</div>
<div class="left-layer11">
<p class="text">
4
</p>
</div>
<div class="left-layer11">
<p class="text">
5
</p>
</div>
<div class="left-layer11">
<p class="text">
6
</p>
</div>
<div class="left-layer11">
<p class="text">
7
</p>
</div>
<div class="left-layer11">
<p class="text">
8
</p>
</div>
<div class="left-layer11">
<p class="text">
9
</p>
</div>
<div class="right-layer11">
<p class="text">
10
</p>
</div>
<div class="space-line">
</div>
</div>
<div class="table-row">
<div class="left-layer11">
<h5 class="colhdr">
2
</h5>
</div>
<div class="left-layer11">
<p class="text">
2
</p>
</div>
<div class="left-layer11">
<p class="text">
4
</p>
</div>
<div class="left-layer11">
<p class="text">
6
</p>
</div>
<div class="left-layer11">
<p class="text">
8
</p>
</div>
<div class="left-layer11">
<p class="text">
10
</p>
</div>
<div class="left-layer11">
<p class="text">
12
</p>
</div>
<div class="left-layer11">
<p class="text">
14
</p>
</div>
<div class="left-layer11">
<p class="text">
16
</p>
</div>
<div class="left-layer11">
<p class="text">
18
</p>
</div>
<div class="right-layer11">
<p class="text">
20
</p>
</div>
<div class="space-line">
</div>
</div>
<div class="table-row">
<div class="left-layer11">
<h5 class="colhdr">
3
</h5>
</div>
<div class="left-layer11">
<p class="text">
3
</p>
</div>
<div class="left-layer11">
<p class="text">
6
</p>
</div>
<div class="left-layer11">
<p class="text">
9
</p>
</div>
<div class="left-layer11">
<p class="text">
12
</p>
</div>
<div class="left-layer11">
<p class="text">
15
</p>
</div>
<div class="left-layer11">
<p class="text">
18
</p>
</div>
<div class="left-layer11">
<p class="text">
21
</p>
</div>
<div class="left-layer11">
<p class="text">
24
</p>
</div>
<div class="left-layer11">
<p class="text">
27
</p>
</div>
<div class="right-layer11">
<p class="text">
30
</p>
</div>
<div class="space-line">
</div>
</div>
<div class="table-row">
<div class="left-layer11">
<h5 class="colhdr">
4
</h5>
</div>
<div class="left-layer11">
<p class="text">
4
</p>
</div>
<div class="left-layer11">
<p class="text">
8
</p>
</div>
<div class="left-layer11">
<p class="text">
12
</p>
</div>
<div class="left-layer11">
<p class="text">
16
</p>
</div>
<div class="left-layer11">
<p class="text">
20
</p>
</div>
<div class="left-layer11">
<p class="text">
24
</p>
</div>
<div class="left-layer11">
<p class="text">
28
</p>
</div>
<div class="left-layer11">
<p class="text">
32
</p>
</div>
<div class="left-layer11">
<p class="text">
36
</p>
</div>
<div class="right-layer11">
<p class="text">
40
</p>
</div>
<div class="space-line">
</div>
</div>
<h4 class="table-caption">
It should be Ok to go on from here
</h4>
</div>


 </BODY>
</HTML>

Last edited by peter_budo; Mar 22nd, 2008 at 5:30 am. Reason: Keep It Organized - please use [code] tags

aravelli ramesh

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: table using CSS and Xhtml

Mar 22nd, 2008

Why don't you just use the table tags? They are not deprecated.

What the W3C wants you to do is to stop using tables to do the jobs of margins, borders, and padding.

Daylight-saving time uses more gasoline

•

Join Date: Feb 2008

Posts: 88

Reputation: knight fyre is an unknown quantity at this point

Solved Threads: 1

knight fyre knight fyre is offline

Offline

Junior Poster in Training

Re: table using CSS and Xhtml

Mar 24th, 2008

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
	<head><title>Tables with CSS</title>
 
<!-- Used to create the outer borders of the table and setting the size -->
<style type="text/css"> #outer_table {border: solid red; width: 60px; height:60px;} </style>
 
<!-- Used to highlight the low border of the first div to create the illustion of a table row -->
<style type="text/css"> #first_row {border-bottom: solid blue; height:50%;} </style>
       </head>
	<body>
		<div id="outer_table">
			<div id="first_row">
			</div>
			<div id="second_row">
			</div>
	</body>
</html>
<html>
	<head><title>Tables with CSS</title>

<!-- Used to create the outer borders of the table and setting the size -->
<style type="text/css"> #outer_table {border: solid red; width: 60px; height:60px;} </style>

<!-- Used to highlight the low border of the first div to create the illustion of a table row -->
<style type="text/css"> #first_row {border-bottom: solid blue; height:50%;} </style>
       </head>
	<body>
		<div id="outer_table">
			<div id="first_row">
			</div>
			<div id="second_row">
			</div>
	</body>
</html>