Create Tables By Using Div&css

[nokida]

Hi everybody,When I try to create a table by using DIV&CSS. If I use the display property as: "table-cell, table-row,.v.v.", so in the FireFox, It is good. But in IE7, It is unsupported for these properties, the table will be broken. If I use the Float: left and Width: , so the cells which have the different data, they will make the height of cells differently, So the table is very bad.How to solving this problem?thank you for the suggestion.

[Yvil]

First off:When you need a table, use tables. That's what tables are for.It's recommended not to use tables in a layout, but that's a different story.Also, could you provide me/us with the code you're using, because I don't really understand your problem now.

[jeffman]

Using divs and css is actually a very efficient way of organizing tabular data, but it only looks right when the divs can be assigned a fixed height. Even in css3, there is no way to create divs that automatically resize themselves with respect to other divs. (Okay, there are unsemantic ways, but they only work when the number of "cells" in a row is two, which I'm sure is not the case here.)In other words, if you want the height of the cells to be fluid, and you want all the cells in a row to be the same height, you HAVE to use a table. (I'm leaving aside javascript options, which are clunky.)Also: copy/paste will usually produce different results with a true table than with a simulated table. It is important to keep in mind user expectations.As Yvil says, there is no need to run away from tables when your content is obviously tabular.

[nokida]

Yes, I see. thank you for all

[Guest FirefoxRocks]

Using divs and css is actually a very efficient way of organizing tabular data

Care to explain that?

[Ingolme]

Care to explain that?

Rendering tables is very slow in browsers, compared to rendering <div> elements (given that you don't change their display property).

[jeffman]

Care to explain that?

Also because you can eliminate all the <table> and <tr> tags. Float, clear, width, and height properties handle the layout.

[MagNet]

Hi, The element which ensures that all the cells in a table row have the same height is the bottom border of that row.So, why couldn't we replace it by a horizontal ruler; HR?I think the following code will work

<div width=950>  <div id=d1 style="width:33%;">text here</div>  <div id=d2 style="width:34%;">text here</div>  <div id=d3 style="width:33%;">text here</div><br clear="all" /><hr style="visibility:hidden;" /></div>

In the same time it will afford a sort of padding.

[Synook]

Care to explain that?

Also, tables have to fully load before they can be rendered while a multi-div alternative could be displayed line-by-line.