ansaurus

Question

Answer 1

A:

The only way I see you can do it otherwise is using <div> tags and setting their properties, such as float in CSS.

I don't think you can actually create a table in CSS, as CSS defines the style of the page and it's elements, not the elements itself.

Tony 2010-01-05 12:28:51

Answer 2

+1 A:

Similar layout can be generated using CSS and div tags.

Now a days there many tools available to build such layout using CSS. All modern web page designing tools have these features.

Apart from this tools like Yahoo Grid Builder (link to Yahoo Grid builder) can also be handy for the same.

Rutesh Makhijani 2010-01-05 12:29:39

Answer 3

+1 A:

This works in Firefox(haven't tested in other browsers). The borders are just for illustration.

<div>

 <div style="float:left; width:49%;border:1px solid black;">
    <img style="float:right; width:343px" src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/&gt;
 </div>

 <div style="float:right; width:49%;border:1px solid black;">
    <img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/&gt;
 </div>

</div>

Your question is slightly ambiguous (maybe it's me) but you could also mean this:

<div>

 <div style="float:left; width:49%; border:1px solid black;">
    <div style="margin:auto; width:343px; border:2px solid red;" >
        <img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/&gt;
    </div>

 </div>

  <div style="float:left; width:49%; border:1px solid black;">
    <div style="margin:auto; width:343px; border:2px solid red;" >
        <img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/&gt;
    </div>
  </div>
</div>

This doesn't satisfy all your requirements but is close.

Lenni 2010-01-05 12:30:18

I don't think the two DIVs will vertically align to the middle as if they were table columns.

Nirmal 2010-01-05 12:32:08

Thanks for the reply, but I was under the impression that a floated div must have a fixed width. While browsers support float without a width I don't think it is part of the CSS standard.

AJ 2010-01-05 12:35:53

I have corrected my answer to reflect this. Try it again and let me know if it works for you.

Lenni 2010-01-05 13:30:04

Answer 4

+3 A:

Then the resulting output is two images side by side with centred vertical justification. The size of the two cells in the table are the size of the images plus some padding.

Do you mean something like this?

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2005928</title>
        <style>
            #images img {
                padding: 10px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div id="images">
            <img src="http://sstatic.net/so/img/logo.png" width="100" height="50">
            <img src="http://sstatic.net/so/img/logo.png" width="50" height="100">
        </div>
    </body>
</html>

BalusC 2010-01-05 12:31:27

And how do we add another row that aligns and behaves like a table does?

Nirmal 2010-01-05 12:34:47

That's a different question. Ask a new question.

BalusC 2010-01-05 12:46:17

Answer 5

A:

Change your table, tr, and td tags to div's and make the 'td-divs' float:left. Or, use display:inline-block (with all associated problems), or, use display:table-cell (with all associated problems).

Ralf MC 2010-01-05 12:36:07

Answer 6

+1 A:

Honestly, just stick to tables. Switch to table-less when CSS will offer all the tools needed for grid-like layouts AND all browser will reliably support them.

Your other choice is juggle a lot of hacks and get a spare F5 key for testing.

kemp 2010-01-05 12:50:23

Answer 7

A:

To make an element behave like a table using pure CSS, use the display property and the values table, table-row, table-cell, inline-table, etc.

This isn't supported by IE, and somewhat defeats the objective of not using tables for columnular layout as the markup is still row based.

Pete Kirkham 2010-01-05 15:06:37

Answer 8

+1 A:

Forget about the "either or" concept with CSS vs. tables. Both have pros and cons that will drive you up the wall.

I say create as much as you can with CSS, the other layout issues you have, use a table.

Besides, between grid systems and CSS3's TABLE-LAYOUT and template layout module, CSS is really moving towards a "table-based" layout anyway.

tahdhaze09 2010-01-05 16:07:22

ansaurus

tags:

views:

answers:

Simulating table Layout in CSS

related questions