3 replies [Last post]
marinebane
Offline
newbie
PHP
Last seen: 16 years 28 weeks ago
PHP
Timezone: GMT+9.5
Joined: 2004-03-08
Posts: 1
Points: 0

I need to create a table like this... but i dont want to use a table, because this will be a dynamic page and i cannot easily know what the colspan value should be

------------------------------------------------
|                       |                      |
|        Stuff          |         Stuff        |
|                       |                      |
|-----------------------|----------------------|
|      |                |                 |    |
|      |      Thing     |       Thing     |    |
|      |                |                 |    |
|----------------------------------------------|
|                             |                |
|              Thing          |                |
|                             |                |
------------------------------------------------

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Using CSS To Create a Table

Hi

There isn't quite enough information in your post.

It would be better if you DID create two or three tables on a page that gave samples of what you want. That way we can see the desired outcome and the variability you want to allow for.

Then post the link to that sample page. Keep it simple (ie minimal images) to reduce loading times, but DO include borders, background colors, text styles, etc.

Trevor

Caleb
Offline
newbie
Last seen: 16 years 27 weeks ago
Timezone: GMT-5
Joined: 2004-03-20
Posts: 1
Points: 0

Hrm... wasn't sure about the size but...

Method 1 (assumes that this is all you want on the page)

<html>
<head>
<style>
#row1{position:relative; width:100%}
#row2{position:relative; width:100%}
#row3{position:relative; width:100%}
#alfa {
   position:relative;
   width:50%;
   float:left;
   clear:right;
   background-color:#FF0000;
}
#beta {
   position:relative;
   width:50%;
   float:right;
   clear:left;
   background-color:#0000FF;
}
#charlie {
   position:relative;
   margin-left:10%;
   width:30%;
   float:left;
   clear:right;
   background-color:#008000;
}
#delta {
   position:relative;
   margin-right:15%;
   width:35%;
   float:right;
   clear:right;
   background-color:#FFFF00;
}
#echo {
   position:relative;
   width:65%;
   background-color:#FFA500;
}
</style>
</head>
<body>
<div id="row1"><div id="alfa">&nbsp;</div><div id="beta">&nbsp;</div></div>
<div id="row2"><div id="charlie">&nbsp;</div><div id="delta">&nbsp;</div></div>
<div id="row3"><div id="echo">&nbsp;</div></div>
</div>
</body>
</html>

Method 2: Assumes you want multiples of the buggers:

<html>
<head>
<style>
#table1{position:absolute; top:20px; left:20px; width:200px; height:200px;}
#table2{position:absolute; top:320px; left:20px; width:200px; height:200px;}
#table3{position:absolute; top:20px; right:20px; width:200px; height:200px;}
#table4{position:absolute; top:320px; right:20px; width:200px; height:200px;}
#row1{position:relative; width:100%}
#row2{position:relative; width:100%}
#row3{position:relative; width:100%}
#alfa {
   position:relative;
   width:50%;
   float:left;
   clear:right;
   background-color:#FF0000;
}
#beta {
   position:relative;
   width:50%;
   float:right;
   clear:left;
   background-color:#0000FF;
}
#charlie {
   position:relative;
   margin-left:10%;
   width:30%;
   float:left;
   clear:right;
   background-color:#008000;
}
#delta {
   position:relative;
   margin-right:15%;
   width:35%;
   float:right;
   clear:right;
   background-color:#FFFF00;
}
#echo {
   position:relative;
   width:65%;
   background-color:#FFA500;
}
</style>
</head>
<body>
<div id="table1">
<div id="row1"><div id="alfa">&nbsp;</div><div id="beta">&nbsp;</div></div>
<div id="row2"><div id="charlie">&nbsp;</div><div id="delta">&nbsp;</div></div>
<div id="row3"><div id="echo">&nbsp;</div></div>
</div>
<div id="table2">
<div id="row1"><div id="alfa">&nbsp;</div><div id="beta">&nbsp;</div></div>
<div id="row2"><div id="charlie">&nbsp;</div><div id="delta">&nbsp;</div></div>
<div id="row3"><div id="echo">&nbsp;</div>
</div></div>
<div id="table3">
<div id="row1"><div id="alfa">&nbsp;</div>
<div id="beta">&nbsp;</div></div>
<div id="row2"><div id="charlie">&nbsp;</div><div id="delta">&nbsp;</div></div>
<div id="row3"><div id="echo">&nbsp;</div></div>
</div>
<div id="table4">
<div id="row1"><div id="alfa">&nbsp;</div><div id="beta">&nbsp;</div></div>
<div id="row2"><div id="charlie">&nbsp;</div><div id="delta">&nbsp;</div></div>
<div id="row3"><div id="echo">&nbsp;</div></div>
</div>
</body>
</html>

Of course if you are going to use multiples, use classes instead of ids on the rows(1,2,3) and cells(alfa, bravo, charlie,delta,echo). But in this case, id's work.
And in either case split the html from the css into two separate files.

I've also got colors in the cells to make them distinguishable.

If you want to add cell borders/spacing add a section like the following to your css file.

div {
margin: [i]x x x x[/i]; 
border: [i]x x x[/i];
}

Once I finished this I noticed just how much this looked like a table's code. Oh, well. Sometimes you just gotta recreate the wheel.

C

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 34 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Using CSS To Create a Table

Ask yourself this - is the table clearly defining the data or just making it look nice? If it's the first - ie you'd do it in an excel spreadsheet or something - use a table. If the page is dynamic can you not calculate the colspan values before creating the page?

IMHO given the example above, use a table anyway!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.