How to set cell's background in HTML table ?

Question

I would like to set the background of a cell in HTML table to be like this.

• What are my options besides using an image as background ?
• Are there any predefined backgrounds like this ? Maybe dotted, or diagonal lines backgrounds ?
• In case of image background, if I don't know in advance what would be the size of the cell, what image size should I take ? How to make it be repetitive so it would look nice ?

Any HTML/CSS/Javascript/jQuery suggestions are welcome :)

Answer 1

What are my options besides using an image as background ?

There might be something in CSS 3 that has very limited browser support.

In case of image background, if I don't know in advance what would be the size of the cell, what image size should I take ?

The height should be the distance from the top edge of a line to the top edge of the next line. The width should be the distance from the left edge of a line to the left edge of the next line.

How to make it be repetitive so it would look nice ?

background-repeat: repeat; /* this is the default */

Answer 2

You'll have to use a background image for something like that. To make it tiled, you can use the repeat property in the CSS definition.

td .weird-background { 
    background-image: url('/background.gif');
    background-repeat: repeat;
}

Answer 3

As far as I know, no way other than using background images. Possibly there is support of that in future versions of CSS though.

Answer 4

Since you mentioned that javascript input is welcome, I'll add that you could use javascript to draw on a background canvas.

jQuery Background Canvas Plugin

Mozilla.org Canvas Tutorial

w3.org Canvas API