Any good examples/tutorial on CSS with table

[vw98034]

In a process of migranting from old style html to the new one, I still need the table mechanism for data collection and data display. Can anyone suggest some good examples on how to make CSS work together with table: a table inside of a div tag and div tag inside of a table, etc..

Thanks.

[swmr]

Tables in HTML documents The CSS table model

[vw98034]

Thanks for the links. They are helpfule materials.

The information I am looking for, however, is how the two elements, table & div, work together.

One scenario in my mind is whether a div tag can be used inside of a table cell. A cell in a table is for a photo. When the photo is absent, something else needs to fit into the spot. Can a div do the job?

Another one is tables insider of a div tag. I need to reduce the number of tables in a html file, where tables are nested. The outer table is used to frame the inner ones. Say, to make few tables with different columns line up properly.

[swmr]

I think you should use tables for layout, and divs for displaying tabular data.

Really, though, these two elements aren't associated with one another--like select and option elements, for example--so you're not likely to find a reference that addresses their integration... its up to you.

[vw98034]

Ok, I shall forget about using a div tag inside of a table cell for the position poupose. I saw an example of using a div tag nesting around a table. Is it how to position a table if the layout is done by CSS instead of a table?

[Roy Sinclair]

You can position any block element, that means in your example you can position the div containing the table. However, if the table is all you were going to put into that div you can drop the div and position the table directly, just as you would that div.

A div is just a generic block element, semantically speaking a "division" of the web page.

[vw98034]

What I were thinking about is multiple tables or a table with some div tags inside of a div tag. One example of the first case is a large form with, say, two tables: one with two columns and the other one with three columns. Email client like layout is an example of the second case: a list of email headings (div) on the top and full email content on the bottom (table or div).