Making Tables with CSS

How do you convert tabular data to CSS?

[pageoneresults]

I've seen many questions asked on how to make tables using CSS. I am well aware of styling tables through CSS, but I want to replace a table with <div>. How do I do this?

I want to create a table that is 6x6 (6 Columns/6 Rows). I want the 1st column to be 30% in width and the other 5 columns to be 14% in width.

I know, I know, tables are necessary in certain circumstances. I'm just wondering if the above can be achieved with CSS and what the drawbacks may be. Any takers?

[universalis]

If you are trying to present actual tabular data, then you should always choose to use a real <table> rather than trying to hack out something using CSS positioning. The only problem arises when you are using a table for purely presentational reasons.

The description you give seems to indicate that only a table will give you what you need. Of course, don't forget to make your table accessible by using the proper markup and elements - eg. <th> for headers and a table summary. A good link with basic info (probably against the TOS' but I'll try anyway!):

http://www.evolt.org/article/Building_accessible_tables/4090/42090/

[edited by: Nick_W at 8:27 pm (utc) on June 2, 2003]
[edit reason] De-linked: See recent Charter Change / thanks! [/edit]

[drbrain]

Chapter 17 of the CSS2 TR tells you all about display: table, table-row, and table-cell. I would use <div> for the table and table-row, and <span> for the table-cells. One of the interesting things about the CSS2 table model is that "missing elements generate anonymous [table] objects", so you don't have to have explicit elements for display: table and table-row, if you have a bunch of table cells (oversimplification, of course, read section 17.2.1).

Not supported on IE.

display: table-cell is an alternative to floating block elements for use as a menu bar.