Как установить фон ячейки в таблице HTML?

Question

Я хотел бы установить фон ячейки в таблице HTML как this.

• Какие у меня варианты кроме изображения (изображения).
• Есть ли какие-либо предопределенные фоны, подобные этому? Возможно, пунктирные или диагональные линии фона?
• В случае изображения фона, если я не знаю заранее, каков размер ячейки, какой размер изображения следует взять? Как сделать его повторяющимся, чтобы он выглядел хорошо?

Любой HTML/CSS/Javascript/JQuery предложения приветствуются :)

Answer 1

Вы должны будете использовать фоновое изображение для чего-то в этом роде. Чтобы сделать это черепицей, вы можете использовать свойство repeat в определении CSS.

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

Answer 2

Каковы мои варианты, кроме использования изображения в качестве фона?

В CSS 3 может быть что-то вроде очень ограниченной поддержки браузера.

В случае изображения фона, если я не знаю заранее, каков размер ячейки, какой размер изображения следует взять?

Высота должна быть расстоянием от верхнего края линии до верхнего края следующей линии. Ширина должна быть расстоянием от левого края линии до левого края следующей строки.

Как сделать его повторяющимся, чтобы оно выглядело хорошо?

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

Answer 3

Насколько я знаю, нет другого пути, кроме использования фоновых изображений. Возможно, есть поддержка этого в будущих версиях CSS.

Answer 4

Поскольку вы упомянули, что вход в javascript приветствуется, добавлю, что вы можете использовать javascript для рисования на фоне холста.

jQuery Background Canvas Plugin

Mozilla.org Canvas Tutorial

w3.org Canvas API