Help replacing a long table with css

[Danny9]

Hi,

I am working on an old website that uses lots of very long tables and would appreciate any advice on how best to modernise things taking advantage of CSS.

The tables at the moment are 3 columns long, the first cell in each row contains a text link and the two cells after that contain important info about that link so it might look like:

col 1 col2 col3
google a search engine 5 stars
facebook a social networking site 3 stars
Youtube video sharing and hosting 5 stars

Possibly tables are actually the best way to present this data anyway (and just style the elements within the table) ? I do know how to style tables but are there any cleaner/more modern way to do it apart from tables? Using lists in some way maybe?

The critical thing is the first column will always be a link and all columns must line up nicely as with a table.

Any help appreciated.

Thanks

[Egghead]

Got a link?

[TheDoc]

if that is the exact format you’re looking to show it in, a table is probably better. But once you start thinking outside of rows and columns, you can do all sorts of wonderful with divs and CSS.

[Danny9]

I’m sorry Egghead but can’t supply a link – site is down until I’ve completed the redesign.

Hi Doc – yes possibly tables are the best way. Have been experimenting all day.

Don’t want thousands of <divs> to replace thousands of <tr> etc tags!

What I have at the moment is a messy work around:

3 columns,
paragraph styles so a paragraphs background colour takes up the width of the column it’s in to fake the look of table row colours.

looks fine as long as each paragraph fits on one line, if the text goes on two lines it looks wrong because of the inability to vertical align text as you would in a cell . Also I have to visit each of the divs in turn to type in the paragraph for each column which might get confusing once there’s hundreds of paragraphs in a column. The url in column 1, row 67 must match the text in column two line 67 and column 3 line 67 etc

The good thing is the file size is much lighter as there’s just the two styles for the paragraphs of different colours and then it’s just a long list of <p> tags in each div and no <tr> tags

[Author]

Posts