CODEWITHSUNDEEP
css
AJ.
AJ.

Reputation: 11240

Simulating table Layout in CSS

For all my websites so far I have used table layouts but now I wish to try and use a pure CSS layout. But I am really struggling!

How can I emulate the following in CSS:

<table>
  <tr>
    <td>Some Content 1</td>
    <td>Some Content 2</td>
  </tr>
</table>

Now lets assume that "Some Content 1" and "Some Content 2" are instead <img> tags. 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.

So the table is automatically sized to fit the images or whatever content is inside the cells.

But how do I do this in CSS, it is driving me mad! I am nearly at the point of giving up and just using a table layout, and why not, it is so simple.

Any suggestions most gratefully received.

Thanks,

AJ

Upvotes: 1

Views: 3522

Answers (8)

tahdhaze09
tahdhaze09

Reputation: 2213

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.

Upvotes: 1

Pete Kirkham
Pete Kirkham

Reputation: 49311

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.

Upvotes: 0

Leonard Ehrenfried
Leonard Ehrenfried

Reputation: 1613

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"/>
 </div>

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

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

Upvotes: 1

Matteo Riva
Matteo Riva

Reputation: 25060

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.

Upvotes: 4

user241168
user241168

Reputation:

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).

Upvotes: 1

BalusC
BalusC

Reputation: 1108537

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>

Upvotes: 2

Rutesh Makhijani
Rutesh Makhijani

Reputation: 17225

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.

Upvotes: 1

Tony The Lion
Tony The Lion

Reputation: 63190

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.

Upvotes: 0

Related Questions