Jump to content

Create Tables By Using Div&css


nokida
 Share

Recommended Posts

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.

Edited by Summer Melody
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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).
Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...