如何在HTML表格中设置单元格的背景？

我想将HTML表格中的单元格背景设置为this。如何在HTML表格中设置单元格的背景？

除了使用图像作为背景之外，我还有哪些选择？
是否有像这样的预定义背景？也许点缀，或对角线的背景？
在图像背景的情况下，如果我事先不知道单元格的大小，我应该使用什么图像大小？如何使它重复，所以它会看起来不错？

任何HTML/CSS/JavaScript的/ jQuery的建议，欢迎:)

2010-04-21 Misha Moroshko

我不知道你是否可以采取大片的candystripe图像和整个表的背景设置为它，然后只用纯色哪里，无论你 - 不要看到candystripe。取决于您想要显示该背景的单元的百分比。这样做的好处是，如果您使用液体布局而不是固定宽度的单元格，则可能会遇到更少的问题。 – Kzqai 2010-04-21 14:54:53

恩，我的眼睛！ – 2010-04-21 16:30:58

你将不得不使用的背景图像类似的东西。为了平铺，您可以在CSS定义中使用repeat属性。

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

来源

2010-04-21 14:53:30 friedo

非常感谢！ – 2010-04-22 12:30:06

什么是除了使用作为背景的图片我的选择？

在CSS 3中可能有一些浏览器支持非常有限的东西。

在图像背景的情况下，如果我事先不知道单元的大小，我应该使用什么图像大小？

高度应该是从一条线的上边缘到下一条线的上边缘的距离。宽度应该是从一条线的左边缘到下一条线的左边缘的距离。

如何使它重复，所以它会看起来不错？

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

来源

2010-04-21 14:52:51 Quentin

据我所知，没有办法比使用背景图像等。尽管在未来的CSS版本中可能会有这种支持。

来源

2010-04-21 14:55:00 Sarfraz

对于css人来说，这看起来太具体了，只是为了这种类型的显示，所以我希望图像是唯一可以应对未来的解决方案。 – Kzqai 2010-04-21 14:57:53

@Tchalvak：可能但没有人知道未来。我们是否曾经想过CSS3和HTML5提供的很好的功能:) – Sarfraz 2010-04-21 15:05:49

对，我从这样的东西推断出来，html5和css3中的创新很好，因为它们适用于各种各样的用例，相当普遍适用。例如http://www.css3.info/preview/border-image/是一个具有多种用途的单一实现，因为它是一种通用解决方案，可以以特定于版本的方式使用。我期待着与candystripe图像一样的东西。 – Kzqai 2010-04-21 16:46:34

既然你提到javascript输入是受欢迎的，我会补充说你可以使用javascript来绘制背景画布。

jQuery Background Canvas Plugin

Mozilla.org Canvas Tutorial

w3.org Canvas API

来源

2010-04-21 16:29:09 ghoppe

如何在HTML表格中设置单元格的背景？

回答

相关问题