all css table code

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

all css table code

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> all css table code

Page: [1]

adambrooks

Posts: 145
Joined: 1/8/2002
From: Charlotte / Matthews NC USA
Status: offline

all css table code - 9/15/2003 15:31:08

Well, for those who care, here's a lil snippet of code for a css-based table grid layout.

<style>
/* --------------------------------------------------------------------------------------------------------------------------------------- */

body
		{ 
			font-family: Verdana, Helvetica, Arial, sans-serif; 
			font-size: 10pt; 
			color: #000000;

			background: transparent 
			background-color: #FFFFFF; 
			/* background-image: url('/images/file.gif');  */
			/*background-repeat: no-repeat;*/
			/*background-position: bottom right;*/
			/*background-attachment:  fixed;*/

			scrollbar-face-color: #FFFFFF; 
			scrollbar-shadow-color: #000000; 
			scrollbar-highlight-color: #000000; 
			scrollbar-track-color: #FFFFFF; 
			scrollbar-arrow-color: #000000; 
			scrollbar-3dlight-color: #CCCCCC; 
			scrollbar-darkshadow-color: #000000;

			margin-top: 0px; 
			margin-left: 0px; 
			margin-right: 0px 
		}

/* --------------------------------------------------------------------------------------------------------------------------------------- */
/* BOX MAIN STYLE BEGIN */

.main
		{
			position: absolute;
			top: 100px;
			left: 50px;
			right: 50px;
			/*width: 100%;*/
			/*height: 150%;*/
			float: left;
			z-index: 0;

			text-align: left;
			background-color:#FFFFFF;
			/* background-image: url('/images/backgrounds/stripes.gif'); */
			vertical-align: top;

			padding-top:0; 
			padding-bottom:0;
			padding-left:0; 
			padding-right:0;
			
			border-top:0px solid #000000; 
			border-bottom:0px solid #CCCCCC; 
			border-left:0px solid #000000; 
			border-right:0px solid #000000; 

			border-collapse: collapse;
		}

/* --------------------------------------------------------------------------------------------------------------------------------------- */
/* RESULTS */

.resultsheader
		{
			width: 33%; 
			float: left; 
			text-align: left; 
			background-color: #EEEEEE; 
			vertical-align: top; 
			border-bottom: 1px solid #EEEEEE; 
			border-right: 1px solid #EEEEEE; 
			border-collapse: collapse;
		}
.resultsnormal
		{
			width: 33%; 
			float: left; 
			text-align: left; 
			background-color: #FFFFFF; 
			vertical-align: top; 
			border-bottom: 1px solid #C0C0C0; 
			border-right: 1px solid #C0C0C0; 
			border-collapse: collapse;
		}
.resultshighlight
		{
			width: 33%; 
			float: left; 
			text-align: left; 
			background-color: #C0C0C0; 
			vertical-align: top;
			border-bottom: 1px solid #000000; 
			border-right: 0px solid #EEEEEE; 
			border-collapse: collapse;
		}

/* --------------------------------------------------------------------------------------------------------------------------------------- */
</style>



<span class="main">
	<div class="resultsheader">Column 1</div><div class="resultsheader">Column 2</div><div class="resultsheader">Column 3</div>
	<div class="resultsnormal">Data Results Normal</div><div class="resultsnormal">Data Results Normal</div><div class="resultsnormal">Data Results Normal</div>
	<div class="resultshighlight">Data Results Highlighted</div><div class="resultshighlight">Data Results Highlighted</div><div class="resultshighlight">Data Results Highlighted</div>
</span>

< Message edited by adambrooks -- 9/15/2003 3:33:14 PM >

adambrooks

Posts: 145
Joined: 1/8/2002
From: Charlotte / Matthews NC USA
Status: offline

RE: all css table code - 9/15/2003 15:35:30

Basically, as long as the data length stays the same, it'll stick. I did play with some code to form rows to contain the data and make it more cohesive, but I think that most browsers just aren't ready for it.

Yada yada yada.

<style>
/* --------------------------------------------------------------------------------------------------------------------------------------- */

body
		{ 
			font-family: Verdana, Helvetica, Arial, sans-serif; 
			font-size: 10pt; 
			color: #000000;

			background: transparent 
			background-color: #FFFFFF; 
			/* background-image: url('/images/file.gif');  */
			/*background-repeat: no-repeat;*/
			/*background-position: bottom right;*/
			/*background-attachment:  fixed;*/

			scrollbar-face-color: #FFFFFF; 
			scrollbar-shadow-color: #000000; 
			scrollbar-highlight-color: #000000; 
			scrollbar-track-color: #FFFFFF; 
			scrollbar-arrow-color: #000000; 
			scrollbar-3dlight-color: #CCCCCC; 
			scrollbar-darkshadow-color: #000000;

			margin-top: 0px; 
			margin-left: 0px; 
			margin-right: 0px 
		}

/* --------------------------------------------------------------------------------------------------------------------------------------- */
/* BOX MAIN STYLE BEGIN */

.main
		{
			position: absolute;
			top: 100px;
			left: 50px;
			right: 50px;
			/*width: 100%;*/
			/*height: 150%;*/
			float: left;
			z-index: 0;

			text-align: left;
			background-color:#FFFFFF;
			/* background-image: url('/images/backgrounds/stripes.gif'); */
			vertical-align: top;

			padding-top:0; 
			padding-bottom:0;
			padding-left:0; 
			padding-right:0;
			
			border-top:0px solid #000000; 
			border-bottom:0px solid #CCCCCC; 
			border-left:0px solid #000000; 
			border-right:0px solid #000000; 

			border-collapse: collapse;
		}

/* --------------------------------------------------------------------------------------------------------------------------------------- */
/* RESULTS */

.resultsheader
		{
			width: 33%; 
			float: left; 
			text-align: left; 
			background-color: #EEEEEE; 
			vertical-align: top; 
			border-bottom: 1px solid #EEEEEE; 
			border-right: 1px solid #EEEEEE; 
			border-collapse: collapse;
		}
.resultsnormal
		{
			width: 33%; 
			float: left; 
			text-align: left; 
			background-color: #FFFFFF; 
			vertical-align: top; 
			border-bottom: 1px solid #C0C0C0; 
			border-right: 1px solid #C0C0C0; 
			border-collapse: collapse;
		}
.resultshighlight
		{
			width: 33%; 
			float: left; 
			text-align: left; 
			background-color: #C0C0C0; 
			vertical-align: top;
			border-bottom: 1px solid #000000; 
			border-right: 0px solid #EEEEEE; 
			border-collapse: collapse;
		}

/* --------------------------------------------------------------------------------------------------------------------------------------- */
</style>



<span class="main">
	<div class="resultsheader">Column 1</div><div class="resultsheader">Column 2</div><div class="resultsheader">Column 3</div>
	<div class="resultsnormal">Data Results Normal</div><div class="resultsnormal">Data Results Normal</div><div class="resultsnormal">Data Results Normal</div>
	<div class="resultshighlight">Data Results Highlighted Data Results Highlighted Data Results Highlighted Data Results Highlighted Data Results Highlighted Data Results Highlighted Data Results Highlighted </div><div class="resultshighlight">Data Results Highlighted</div><div class="resultshighlight">Data Results Highlighted</div>
</span>

< Message edited by adambrooks -- 9/15/2003 3:40:22 PM >

(in reply to adambrooks)


Spooky Posts: 26597 Joined: 11/11/1998 From: Middle Earth Status: offline	RE: all css table code - 9/19/2003 16:02:06 Not bad for starters ;-) _____________________________ If you arent part of the solution, then there is good money to be made prolonging the problem ��k� Database / DRW help Check out the Tutorials for Frontpage Databases Forum FAQ' s Developers Edition Spooky Login User Registration and Management tool Personalized Frontpage Hosting (in reply to adambrooks)


c1sissy Posts: 5079 Joined: 7/20/2002 From: NJ Status: offline	RE: all css table code - 9/19/2003 16:27:13 Since I am learning this, would you mind if I pasted and printed this to play with it? lol, in between learning the rest of css? _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to adambrooks)


adambrooks Posts: 145 Joined: 1/8/2002 From: Charlotte / Matthews NC USA Status: offline	RE: all css table code - 9/25/2003 9:20:55 quote: c1sissy go for it. (in reply to adambrooks)


c1sissy Posts: 5079 Joined: 7/20/2002 From: NJ Status: offline	RE: all css table code - 9/25/2003 9:33:40 Thanks, would like to play around with it, but didn't want to go for it without asking you first. _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to adambrooks)