Use the whole image or slice them up?

Hi Guys,

Just wondering which approach/method you guys will use to code a table like below.

Imagine the table has more fields then this, be it address, siblings, etc etc…

Not so much into the CSS stuff, although I don’t mind if you guys wanna share.

I think there’s 2 approach. One, slice the green portion with the wordings and use css to make the table columns fit into the image.

Two, slice the green portion without the wordings and use it as a background image. Then slice and use the individual wordings in normal table columns.

Which is better? Or what ever we feel comfortable?

The swirl is simply a graphical flourish so I would place it as a background image in the table (the only images on the page should be representative of the content - not the design)… so I’d personally go for your second option. As for the text, I do worry about using images in place of text as it will affect how your content will appear to visually impaired users and search engines (who want to index the content). It’s just a consideration mind, but it could be worth looking at your options in respect to what will happen if images are unavailable or unusable within the design (which is surprisingly common if you take all things considered). :slight_smile: