Recreating Reusable CSS to mimic a html table?

HTML & CSS
1

I would like to recreate this two column html table in CSS: http://www.virginiaherpetologicalsociety.com/reptiles/lizards/lizards_of_virginia.htm
Ideally, the CSS would be reusable for similar pages. I’m not sure if the best approach is to use divs to mimic cells or perhaps just two column divs and unordered lists or definition lists? Or are html tables the best choice for this type of information?

I have little CSS experience and suggestions would be greatly appreciated.

Thank you!

2

Or are html tables the best choice for this type of information?

Personally I would use a table for that sort of data

the CSS would be reusable for similar pages

The css would be available on any page you link to the css file - as long as you use a separate css file; that is the point of css.
You can put the table size, borders fonts and everything into the style sheet which should cut down slightly on the amount of code you need to write.

Have you thought about using php for your code, as I think it would be quicker than creating the html ? You could put your information into a database and you could generate your whole table with a few lines of code - in fact I would have the table on a separate page and just include it with two line of code on each page.

I notice you do not have any alt information for your images.

Note: I suppose you have all your html written now so changing over to php will not help that much.

3

Thank you for the advice and suggestions.
I have not considered using php, but will look into it.
The alt information for images is on my list of things to do.

4

[font=calibri]It’s pretty easy to create something like that in CSS, depending on how precise you want to be about certain aspects.

The easiest way is to just have each row as a separate <div>, with the <img> being the first thing in the <div>.
You then set

img {float:right;}
div {clear:right;}

plus any other borders, margin/padding or formatting you want, and away you go![/font]

5

Thanks!
I’ll experiment with that as well.

6

I agree with Stevie. No table is needed in this case if everything would be similar as in yoour example

7

What happens to the second image in each row?

8

Ah yes, that was just to see who was paying attention.
It is the large picture that you put at the beginning of the <div>, and you will need to put a class on those images in the HTML and the CSS (or you could call them up by :first-child if you prefer). The location maps just flow inline as they do now.

9

If support is IE8+ only then I would use display:table row/cell properties to get the perfect vertical alignment shown in that page.

If IE7 and below support is required and the vertical alignment is a pre-requisite then you may as well stick with the html table as that data is quite tabular.

If automatic vertical alignment isn’t a pre-requisite then floating or perhaps display:inline-block would also be an option.