Help - Search - Members - Calendar
Full Version: CSS Tables
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
asmith
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
pandy
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.
asmith
Thanks for the reply
I always thought there is a CSS equivalent to HTML table.
pandy
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
Christian J
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.


asmith
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 ^^
pandy
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
asmith
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
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.