How to substitute this table by CSS

Forum Moderators: not2easy

Message Too Old, No Replies

How to substitute this table by CSS

Learning with a simple example ...

jmpsoares

2:07 am on Sep 19, 2009 (gmt 0)

I was reading many comments in this forum, about the old question ' css vs tables '.
Many persons do not stop using 'tables'. Others substituted them for css.
I would be grateful if some expert in CSS, explain to me how to substitute the 'table' in the simple code below, for css, in way to produce the very same effect.

<html>
<head>
<style>
td {vertical-align:middle;text-align:center;padding:100px}
.t50{width:50%;}
</style>
</head>
<body>
<table border="1" CELLSPACING=0>
<tr><td colspan=2><img src="images_logo_lg.gif"></td></tr>
<tr>
<td class=t50><img src="images_logo_lg.gif"></td>
<td class=t50><img src="images_logo_lg.gif"></td>
</tr>
<tr><td colspan=2><img src="images_logo_lg.gif"></td></tr>
</table>
</body>
</html>

Many thanks!
js

swa66

6:26 am on Sep 19, 2009 (gmt 0)

Personally I feel very little incentive to jump through the hoops of "how do you mimic a table in CSS".

All depends on what you would have in a real world situation instead of 4 identical images. And if you'd need 4 images arranged like that, it's nearly trivial anyway: just use absolute positioning to paste them anywhere you like.

Give us fully compliant browsers and it all doesn't matter as we can use display:table-* .

The reverse exercise is the one that matters: It's pretty easy to give a CSS example you can't do with tables without using at least some CSS.

Just float a box of text to one side and have a larger box of text wrap around and under it in a fluid manner. There's no way to do that if you need to start by chopping up things in a grid.

jmpsoares

2:15 pm on Sep 19, 2009 (gmt 0)

Hi !
You did not understand that my post is not destined to make a competition between the one who can change CSS by 'tables ' or vice-versa.
Also misunderstanding with "4 identical images". They are an example, occupying the place of headers, images, text, footer, etc., repeating this structures along the page of the site.
My interest learning how 'this table' can be modified in CSS, is genuine, and it does not serve to prove anything, not even to create any embarrassment to anybody.
If there will be an acceptable solution, I will be thanked and I will substitute the 'tables' for CSS in my site. If not ... case closed.
I use Vista Windows, and only need a code compatible with the IE8.

Many thanks
js

rocknbil

3:20 pm on Sep 19, 2009 (gmt 0)

Welcome aboard jmpsoares, I don't have time to code and test but the puzzle you posed is pretty simple. There are dozens of ways to do this, depending on what else is on the page. Another solution, and the approach I'd probably take:

- Create a main container, assign it a width, center it with margin: auto. If left unassigned, it will default to 100% which can lead to some really wide pages on high resolution monitors. This creates a legibility problem as bad as tiny type (i.e., really wide lines of text.) The max-width property will help if you want to default to 100%.

- You already have a 50% class. I'd **probably** change that to 49% or zero out all padding and margins. Inside the main, float one div left, one right - remember to put the LEFT one first in the source code. (This is just one way - you could also just assign a pixel or em width.)

- The top and bottom divs/images can be a 100% width class.

- You will probably need to put a clearing div/element after the two floated divs.

In any case, use a valid document type [webmasterworld.com] and validate the document [validator.w3.org] and it should fly in all modern browsers.

swa66

9:44 pm on Sep 19, 2009 (gmt 0)

The thing is to start from what you want on the page, not from the 4 images. What we tend to do with CSS depends on what is on the page.
If we don't give you an example to learn from that takes into account what is on the page we inevitably will teach you what we call "divitis", the over-use of divs.
And this is especially a risk for somebody coming from table based design background.

The first thing to do is NOT to think in terms of a matrix and instead use all the ways to position things on your page. You have in CSS element that can be blocks or can be inline (even inline blocks).
next you can position these elements in a number of ways:

You can change the default inline or block behavior or elements usign the display attribute. So you can have 2 paragraphs sit on the same line e.g.
float: left or right will make the element behave like your old <img align="left">: pushing inline content aside, even over many paragraphs (read:blocks).
position is the other way to make things behave lie what you need: the default is static.
- relative is special in the sense that you can nudge it about (and there is a side effect: it gains "position" .
- absolute: puts your element anywhere, you basically specify the coordinate you want it to be at, and the reference used is the closest parent that has gained position or lacking such a parent the viewport
- fixed: glued to the viewport, no matter how you scroll

So the best solution really depends on what we want to achieve and what we know about the elements.

swa66

9:55 pm on Sep 19, 2009 (gmt 0)

So it looks like you want a page with a header, a footer , and a typical 2 column layout in between.

No navigation menu ?

And what's in those areas (logo, title, images, ...)

Also what do you want to happen when columns are unequal in length, what do you want to happen if the viewport is rather small, or ridiculously large, ...

Similarly we can all things to make your page centered, at least the height of the viewport etc. but it's all up to you to decide what you want it to look like.

Basically you need to think outside of the table. ;)

jmpsoares

1:30 am on Sep 23, 2009 (gmt 0)

Ok, thank you for your tips.
js