BLOG

Adding backgrounds to table cells

Before W3C compliance call along, designing web pages was a free for all. Coders might develop a nifty bouncing ball JavaScript that worked fine in FireFox but wasn't all that reliable in Internet Explorer. Such issues still occur, but thanks to W3C compliance web designers have standards they can rely upon in the development of their websites that ultimately controls how websites are put together and ensures they look the same from browser to browser.

A simple example relates to the adding of a background image to a table cell. It used to be the case that the addition was as simple as,

<td background="/images/gradient.jpg">

In the W3C compliant world, such code would not adhere to strict W3C//DTD XHTML 1.0 Transitional standards. To overcome issues with adding images to table cells we recommend creating a CSS class,

td.gradient-background {
width: 60px;
background-image: url(/images/gradient.jpg);
background-repeat:repeat-y;
}

and referencing this class as follows,

<td class="gradient-background">

by: Creative

«Back»