How to make a "tableless" table with help of CSS?

Question

How to make a table like structure (design) with help of div and [CSS][1]? to show tabular data on html page. i don't want to use <table> <tr> <td> .

I work on custom made CMS in my company and for a page cms prdouces xhtml in div tags so xhtml code is not in my hand so therefore i want to show table like data without table.

EDIT:

My question is not about Table vs CSS/div? I'm asking about how to make tabular look with any other way, without table tag.

I found links which are useful for me

http://snook.ca/archives/html%5Fand%5Fcss/getting%5Fyour%5Fdi

http://www.dev-archive.net/articles/table-in-css.html

Answer 1

The first question is: why do you want to do that? It's a bad idea to use tables for page formatting, but if what you want is a table, you should use a table.

Answer 2

If you're creating a table of data, why not just use a table? table isn't bad if it's used for what it is meant to represent.

If you really need to do with without using the table tags, here is a suggested approach. Just google for "table using css".

Answer 3

The table tag should be used for tables. It has semantic meaning that allows screen readers and search engine crawlers to understand its data.

CSS is for layout. Moving away from table-based layout is the right thing to do. Tables are for tabular data, and moving away from table-based tables is the wrong thing to do.

Answer 4

If you want to layout tabular data, use tables and not some weird CSS. That's what tables are for: tabular data — no need to fake tables using <div>s or something.

Answer 5

Is there a reason you want to use CSS for a "table-like-structure"? Is it because you've heard that HTML tables aren't intended for page layout, or is there a particular shortcoming you've encountered.

Before writing off tables as the wrong tool for page layouts consider that when they were introduced with HTML 3.2 they were noted as being used for both data and page layouts. Also be aware that going CSS-only has it's downfalls (as well as benefits) and that when it comes to being pragmattic there isn't an issue with using HTML tables for layout provided that you aren't abusing them (common sense still needs to apply).

I'm not advocating one or the other--but rather just trying to reinforce that either is probably up to the task. Both have benefits and limitations, and picking one or the other based on objective evaluations of those benefits and limitations is the only way to make the right decision.

Answer 6

Why would you not want to use a table to show tabular data? Is it the table structure? To use divs would require way too muck markup. Nesting divs to create tabular divisions would be a lot of css.

If you don't like using tr and td, try a site that will create the markup and just copy/paste.

Answer 7

I have found a nice way to go is the use of CSS frameworks. I do a lot of web developing myself and a table-less layout is the way to go nowadays.

The framework I have been using for a lof of project is the 960 Grid System.

It divides your websites into evenly spaces blocks like a grod, and then you can just choose how many blocks you want. Check the website for more details.

The nice part is that you don't have to deal with floats and clears and all that kind of stuff, just focus on the design.