Have Geek Brain

How can I set the background of a cell in an HTML table?

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

  • What are my options other than using an image as a background?
  • Are there any predefined backgrounds like this? Possibly dotted or diagonal background lines?
  • In the case of a background image, if I don't know in advance what the cell size will be, what size of the image should I take? How do you make it repetitive to make it look good?

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

+2


a source to share


4 answers


You will need to use a background image for something like this. To make it tiled, you can use a property repeat

in your CSS definition.



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


a source


What are my options other than using an image as a background?

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

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



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

How do you make it repetitive to make it look good?

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


a source


Since you mentioned that entering javascript is encouraged, I'll add that you can use javascript to draw on the background canvas.

jQuery Background Canvas Plugin

Mozilla.org Tutorial

w3.org Canvas API

+1


a source


As far as I know, nothing more than using background images . Perhaps this is supported in future versions of CSS.

0


a source






More articles:


All Articles