Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ CSS Tables

Posted by: asmith May 5 2009, 09:26 PM

Hi,

I've been searching for this for a while, probably with the wring keywords, I couldn't find exactly what I was looking for.

How do you write this table in CSS:

CODE
<table border="1">
<tr>
<td>content1</td><td>content2</td>
</tr>
<tr>
<td>content3</td><td>content4</td>
</tr>
</table>



I mean putting 4 divs for each cell. and How to stick those divs together? Is it as easy as tables? Works in all browsers?
Hope it is not with a simple float biggrin.gif

Posted by: pandy May 6 2009, 12:37 AM

Could be floats. What in a table do you want to mimic? If you want the parts to depend on eachother as with a table, that won't happen anytime soon.

Posted by: asmith May 6 2009, 01:33 AM

Thanks for the reply
I always thought there is a CSS equivalent to HTML table.

Posted by: pandy May 6 2009, 01:43 AM

You can accomplish the look, but not the functionality. I'm referring to, using your example, how content1 would also stretch, get higher, if content2 got more content. That won't happen with DIVs.

If you just want two columns with two sections in each, no problem. But the DIVs won't depend on eachother, cross-column-wise or cross-row-wise. Clear as mud, huh? Sorry, but I don't find the words to express what I mean. I claim ESL! tongue.gif

Posted by: Christian J May 6 2009, 06:14 AM

QUOTE(asmith @ May 6 2009, 04:26 AM) *

I mean putting 4 divs for each cell. and How to stick those divs together?

If you meant "putting 4 divs for each table", you can use the "display: table-cell" property: http://www.w3.org/TR/CSS21/tables.html#table-display

QUOTE
Is it as easy as tables?

Haven't used it much, but it may even be easier. happy.gif

QUOTE
Works in all browsers?

IE8 is said to support it, but not IE7 and older. Other modern browsers seem to support it.

As a workaround for IE6/7 you can sometimes use "display: inline-block" on inline (but not block) elements, but then you must give them an explicit width. Firefox2 and older don't support "inline-block", so separate style sheets are needed.



Posted by: asmith May 8 2009, 12:50 AM

lol tables ftw!

anyway, if table is outdated tag, if someone is using strict doc type, how can he achieve this 'stretchy-related' cells?

QUOTE
I claim ESL!

More here ^^

Posted by: pandy May 8 2009, 02:24 AM

No, tables aren't outdated at all. Just the misuse of them. IMO they are used to seldom today. Can your data be seen as tabular? Use a table.

But I assume this is a pure layout table, right?

QUOTE
More here ^^


Those darn Anglo-Saxons, huh? angry.gif tongue.gif

Posted by: asmith May 8 2009, 03:23 AM

This isn't anywhere. It was a simple question.

I always liked tables. I guess mainly because the cells are stick together, So that I can "trust" them to stay where they should.

DIVs with floats or so, always scared me of their "moving" in different situations/browsers.

QUOTE
Those darn Anglo-Saxons, huh?

Sure biggrin.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)