Creating Tables using DIVs

[kcstingel]

I recently supplied the hint below to friend, on consideration I thought it may be useful to other members as well.

DIVstart id=table - replacement for <table> tagDIVstart class=row - replacement for <tr> tagDivstart class=col1 DIVend - replacement for <th> or <td> tag
Divstart class=col2 DIVend
Divstart class=col3 DIVend
Divstart class=col4 DIVendDIVendDIVend

Set parameters:
Table Div ...
whatever width
auto height

.row
100% width
auto height

.col(n)
define width & alignment
auto height

:) Enjoy! :)

[inge]

The problem with divs is that one wants to start after/below the other, unless you give them absolute position. How do you solve this? Can you post a link to a web page that uses it?

[kcstingel]

The problem with divs is that one wants to start after/below the other, unless you give them absolute position. How do you solve this? Can you post a link to a web page that uses it?

The easy answer ... float your columns
(I do it to the left, that way they *should* line up from left to right)

I'm in the process of writing up a full example and when it's done, I'll post a link to a downloadable copy for tinkering with to this thread.

I'm a perfectionist ... at present the cell borders aren't behaving ... once that's sorted I'll post it :)

[kcstingel]

The live example page can be viewed here (http://www.kcstingel.com/examples/example1.html). I've also added a brief summary of how I built it :)

And for those of you who would like to start with a working example, the package is available for download from here (http://www.kcstingel.com/examples/tableDivexample.zip).

[nsant46]

Hi Karen,

It's to difficult to me.

Maybe I'll try with my son help.

Noemi

[kcstingel]

I just noticed, if the page is viewed with Firefox the highted background of the Heading row doesn't work ... :o

It seems to show up OK if viewed in IE(7) though. :)

Since this is only a minor problem (and Uni Assignments are screaming for attention) ... I'll submit a repaired version which will work for both browsers when I get a chance.

[inge]

Well thanks Karen, I'll get the examples and have a look at them. I'm not an expert of css yet, but I hope to be some day! :)

[xxclixxx]

If you do the float thing, and they are moving down on you, that's because the widths are too big to fit inside the main DIV. Remember to calculate the margin around the div into the width too =P

If you have a 200 width div, with two 100 width divs inside, but the divs inside have a margin, it won't fit ;-)

[revjoybunny]

I must admit it I did that and forgot to include the margins took me ages to work it out lol

Inge was great tho showing me how to add an image and text so they were in line so we are all learning off each other :)

[vsksga]

Karen,

I fiddled around some with your example and found some CSS stuff that I've managed to miss for the past 5 years... So thanks for bringing this up! :)

Add the following line to .tableRow
display: table-row;

Create a new statement:
.tableRow div {
display: table-cell;
border: 1px solid #0000FF;
padding: 5px;
}

And finally, remove everything except width from the .tableCol_(N) classes.

Oh, and as icing on the cake, you can remove the class="tableCol_" attributes from the HTML on all rows but the first!