How to create a table like layout in CSS?

[SAMRAT PAUL]

How to create a table with out using table tag in css ?

[Dormilich]

not at all. first you don’t create HTML mark-up with CSS. second, the definition of a HTML table includes <table> tags. you could disguise other HTML mark-up to look like a table, but that doesn’t make it one (a list stays a list, no matter the look).

[drhowarddrfine]

Well, actually, you can create a table-looking display with the CSS table properties but I've not messed with it yet.

[Dormilich]

I didn’t say that you can’t create something that looks like a table , but that will not be a table.

[Frinavale]

I remember playing with this once a long time ago....
I made a bunch of <div>s act like a table.
It wasn't worth the effort though and I'd recommend using a table if displaying tabular data.

[Rabbit]

I think the point is that the OP wants to recreate the look of a table without using a table.

Yeah, I've done tables using div's and css as well. The biggest issue is that you have to be rigid with the widths if you don't want the layout changing all the time depending on the size of the browser window.

The whole kerfuffle against tables is mostly pointless in my opinion. I think the only point that is legitimate is that it isn't accessibility friendly. But I see no problem with using a table if you need it to display rows of data.

[drhowarddrfine]

Tables are styled and laid out using the internal CSS of the browser.

But I see no problem with using a table if you need it to display rows of data.

Tables are a fixed, pre-defined grid that can't have things moved or changed easily, if at all. That's the problem with using them for layout.

[Rabbit]

Yeah, but I wasn't talking about laying out a website using a table. Only using it for the display of rows of data, like a dataset from a database.

If you were to try to do so using pure css, it's a pain. You have to define the width of all the columns including the width of the parent container. Otherwise you get columns moving around all over the place. Having one field of data on top of another is just plain confusing. Then there's the problem of style formatting. The height of the cells don't match up so borders and background colors are different sizes. So now you have to define the height of the row container. But then you have to handle what happens when the data in the cell overflows the size you specified.

I find it easier to just use a table when I'm displaying the results of a query rather than trying to lay it out with pure css.