I would like to do a table with divs, but I can not figure it out how to do it?

Whoa there. Backtrack. "table" and "div" are html/css terms. They apply to how you do something. Before you get there, you need to work out what you want to do.

You can put a table inside a div.
You can put a div inside a table cell.
You can style a div to {display: table} {display: table-cell} and almost anything else you can name.

Sometimes, as Freud said, a table is just a table. No need to dress it up as a div just because it contains non-numeric data. If the relationship between elements works in two dimensions-- rows and columns, say-- then you may really want a table. If it's long, set it to {table-layout: fixed;} and make up a width for each column so the browser doesn't have to hold its breath while loading up all the data.

Do you want the elements "panel-row-Text" and "panel-row-footer" to display one after the other, or side by side? Does each one contain a single block of text, or several?

I want the panel-row-footer be at the same level for all

OK, now I'm guessing. You want the panel-row-footer to use {display: table-cell} because that may be the most painless way to force a vertical alignment. If you've got a big element and a small element, the big one will take the space it needs, while the small one has to be told where to go.

Welcome to WebmasterWorld, yunielth!

Is there a particular reason why you don't want to use, umm ... a

<table>

?

Hi Lucy!
I need to show a notice section, a section of four column, each column is a notice, and at the footer I have links to comment and to read more, the news will load dynamicaly. So What I need is a template for the notice section and for each column make a foreach. But the notice doesnt have the same picture, text for all notices, so I have to make for each column two rows (or three) but I think two is ok, one for the picture and text and the other for the footer which is the read more and comment. The footer will have the same heigh and I want to show all footer same level, like if were in the same row.
I tried to used display table display cell but dont work when I have two rows...
I really need to work with div because is need it.
If someone can give me any tips will appreciate!

The other thing is that I am working with a "table" based on columns and not rows...if you know what I mean? I need to do a template for a "table" and make a foreach for columns not for rows...and also need to place for each column a footer with same level...hope understand me. thanks

Hm. Could you go away and come back in five years? I think CSS 4 will let you rotate tables 90° ;) It's defitely easier to dump out data if you're doing it in horizontal rows, whether it's in tables or some other form.

Now, you could have a small group of divs set to {display: inline-block} and divide each of those into a further group of divs with the default {display: block} so you get the effect of several columns. Then pour your data into each one, first from top to bottom and then from left to right. But getting everything to line up horizontally would be a major annoyance. This is why we have tables.

If your information is nicely sorted into a two-dimensional array, you should be able to pull it out in either direction:
foo[0][0] foo[0][1] foo[0][2] etc
or just as easily
foo[0][0] foo[1][0] foo[2][0] etc

Hehehe I think I´ve got lost! Hheheh sorry...I am a "little" bad writing css...could you plz just give me an small example...

Here is my static html...but is just static :(

<div class="row">
    <div class="span2">
     <div class="form">
     <div class="form-body">
      <div class="form-image">
      <img alt="#">
      </div>
      <div class="form-text">
      <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit massa vel mauris sollicitudin dignissim.</a>
      <span>dd/mm/yyyy</span>
      </div>
     </div>
     <div class="form-footer">
      <span class="read">Read</span><a href="#" class="read">+</a>
      <div class="comment">
      <span>Comment</span><a href="#"><div class="commentIcon"></div>
      </a>
      </div>
     </div>
     </div>
    </div>
<div class="span2">
reapeat data
</div>
<div class="span2">
reapeat data
</div>
</div>

By the way what about to have all to line up horizontally, well at least the footer? Why is so hard to do this that seems to be easy?

Tip #1: Use

<table>

Tip #2: Really :)

How cold I use table marge with div? But the tale is based on rows, and what I need is to make a template for one column and then with a foreach can populate for each item my notice section, it is horizontally align...

Notice1 Notice2 Notice3
Footer1 Footer2 footer3

But the notice´s heigh is dynamic, so are different...and I want all to be inline with footer.
Ufffff...tired...heheheh

If you're trying to line up two columns that will be populated dynamically with different height <div>s, use the table as a "wrapper", but the only way I see to have a footer at the bottom of different height cell content is to span the columns by using a <div> after the </table>.

A simple <table><tr><td> that contains any number of <div>s then </td><td> for the second column of any number of <div>s then close it off with </td></tr></table> and a separate <div> for your footer. The two columns are not very likely to line up horizontally unless they all contain the same image height and lines of text or unless you specify height for your <div>s which would look bad if some have no image.

I don't know another way you could have horizontal uniformity for the footer with various height blocks in the columns. If it has to look like two separate footers but align horizontally like one row, build a table in the footer <div>. The number of divs you can add to either <td> column depends on how much variation you have in height - but only if you want it to be somewhat balanced looking (which I would guess is the goal). The rest is up to you and your CSS.

If I'm reading this right, the objection to using tables isn't ideological. (Whew!) It's because the data will arrive in the form

row1/column1
row2/column1
row3/column1
etc.

followed by
row1/column2
row2/column2
row3/column2
etc.
row1/column3
row2/column3
row3/column3
etc.

But this is only an issue if you're proceeding directly from data to html. If you add an intermediate stage where the data is first read into an array, you can then use the array in any order you like. That is, there's no difference between

for x = 1 to n
for y = 1 to n
do-stuff-with array[x][y]
next y
next x

and

for y = 1 to n
for x = 1 to n
do-stuff-with array[x][y]
next x
next y

Maybe a difference in execution time if the amount of data is vast-- but here "n" can't possibly be more than 3 or 4 or, OK, 8 or 10 or it wouldn't fit on an html page.

I think I am not getting what you want me to tell me...Lucy. I just load an xsl and just decorate the way it shows on my page.
I am not motivated to work with table, also because this is based on rows and not columns. I want just to show a block with 4 columns of notices that could have different heigh, but each of those columns has a footer and I want to display the footer same level, just need the heigh first row which has the body of the notices for each column to get same heigh.
Is that hard? I just cant do it, do it all ways hehehe. Thanks Lucy!

There exists a {display: table-column;} setting. But I can't for the life of me figure out what it's supposed to do, since html basically doesn't have a table-column element except for some very narrowly constrained styling options :(

You can do it with divs if each "column" has the same number of elements, it's all inside a container, and you force a height on the upper elements.

I just load an xsl and just decorate the way it shows on my page.

What does this mean in practice? Seems to me that anything which can be read into html can be read into php first.

---

Cursory experimentation leads to:
CSS

div {padding: .25em;}
div.faketable {background-color: #EEE; margin-right: auto;}
div.fakecolumn {display: table-cell; background-color: #CCC; width: 24%; border: 1px dashed red;}
div.fakecell {height: 8em; overflow: auto; background-color: #6C6;}
div.fakefooter {background-color: #ABF;}

HTML

<div class = "faketable">
<div class = "fakecolumn">
<div class = "fakecell">
Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here Data 1a here<br>
Data 1b here<br>
Data 1c here
</div>
<div class = "fakefooter">
Data 1d (footer) here
</div>
</div>

<div class = "fakecolumn">
<div class = "fakecell">
Data 2a here<br>
Data 2b here<br>
Data 2c here
</div>
<div class = "fakefooter">
Data 2d (footer) here
</div>
</div>

<div class = "fakecolumn">
<div class = "fakecell">
Data 3a here<br>
Data 3b here Data 3b here Data 3b here Data 3b here Data 3b here Data 3b here Data 3b here<br>
Data 3c here
</div>
<div class = "fakefooter">
Data 3d (footer) here
</div>
</div>

<div class = "fakecolumn">
<div class = "fakecell">
Data 4a here<br>
Data 4b here<br>
Data 4c here
</div>
<div class = "fakefooter">
Data 4d (footer) here
</div>
</div>
</div>

Is that the layout you're describing?

Hi Lucy! Thanks for the example, but it has an static height, and verticall scroll...I dont like to have an scroll, just all the same height, take the bigger height of the fakecell...not sure if u underdtand me....Thanks for your example!

Neither the height nor the scroll are essential parts of the pattern. I just put the height in to verify that I could force all elements to the same height, and then I needed the scroll to make the first element keep from spilling over.

Without using a real table, there's no way to make the last element in each of four unrelated divs all display in a line. The question was whether I've represented the layout you want in the order you want it.

But I still think you may be going at this backward. Where is the data coming from in the first place? I mean the text that's supposed to go into your four columns. It sounds as if it's coming from some outside source.

Hm. I don't suppose there's any chance of making your table in, say, Tibetan? We want a top-to-bottom rather than a side-to-side language.

hi again Lucy! Thanks for your replay!
I just want to show in four static columns notices. I need to show for each column in the body of the column just an image and a text and in the footer of the column a read more link and a comment link, the footer is the same for all (just change the link but the icons are the same). But I want footer be same level as you did on the example. What should I do= Why seems to be so harder? Thanks! This is making me crazy! hehe

And yes you represented the layoud the way I want....but having a static height...but as you says is turning harder with divs.

Back to the same question, then. Where does the text come from? The implication is that you're getting it from some dynamic source; you're not just hard-coding it into the html.

Does the footer contain data coming from the same source as the rest of the div content? If not, the whole thing would be trivial because you'd put the four elements side by side into a body-text div, and then the footers side by side into a completely unrelated footer div. And then all eight divs could be set to width=24% or width=some-fixed-number-of-ems.

That's why I keep harping on the source of the text.

Yes I am getting the source from an XML...and the footer also contain data from the same source.

I was trying to do that, in an independient div and do two foreach...but thats ugly, i think...

Well, not half so ugly as trying to make a table without using table code ;)

:: detour to php.net ::

Yes, that's what I meant. Except that I only speak three words of php, so I'd have done it with a straight for/next loop. And this really is a case of "If I can do it, anyone can."

If it's a choice between complicated php and messy css, go with the php complications. Don't use a div at all; feed the data into a table.

Ok thanks Lucy! I will try to convince the boss hehehe...Thanks for your time and appreciations!