2015-02-10 130 views
1

您好,我想知道是否可以将背景图像添加到单个表格单元格中?如果你看看我下面的图片,我想我必须在这些单元格中的绿色背景图像。将背景图像添加到单个表格单元格

example image

我对表的代码是,

<table class="TFtable" style="height: 448px;" width="1007"> 
<tbody> 
<tr> 
<td style="background-color: #000000;"> 
<p><span style="font-size: 200%; color: #749d36;">    Pricing</span></p> 
<p><span style="font-size: 200%;">     Structure</span></p> 
</td> 
<td style="text-align: center;"> 
<p><span style="font-size: medium;">Professional</span></p> 
<p><span style="font-size: medium;">Resume</span></p> 
<br /><br /> 
<p><span style="font-size: xx-large; color: #749d36;">$199</span></p> 
</td> 
<td style="text-align: center;"> 
<p>Managerial</p> 
<p>Resume</p> 
<p>$299</p> 
</td> 
<td style="text-align: center;"> 
<p><span style="font-size: medium;">Executive</span></p> 
<p><span style="font-size: medium;">Resume</span></p> 
<br /><br /> 
<p><span style="font-size: xx-large; color: #749d36;">$399</span></p> 
</td> 
<td style="text-align: center;"> 
<p>C-Suite</p> 
<p>Resume</p> 
<p>$499</p> 
</td> 
</tr> 
<tr> 
<td style="text-align: center;"><span style="font-size: medium;">Resume Specs</span></td> 
<td style="text-align: center;"><span style="font-size: small;">2-3 pg resume</span></td> 
<td style="text-align: center;">4-5 pg resume</td> 
<td style="text-align: center;"> 
<p>+ cover sheet and</p> 
<p>graphics</p> 
</td> 
<td style="text-align: center;">+ standalone bio pg</td> 
</tr> 
<tr> 
<td style="text-align: center;"><span style="font-size: medium;">Phone Interview</span></td> 
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td> 
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td> 
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td> 
<td style="text-align: center;"> 
<p><img src="images/greentick.png" alt="" width="24" height="24" /></p> 
</td> 
</tr> 
<tr> 
<td style="text-align: center;"><span style="font-size: medium;">Draft To Approve</span></td> 
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td> 
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td> 
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td> 
<td style="text-align: center;"> 
<p><img src="images/greentick.png" alt="" width="24" height="24" /></p> 
</td> 
</tr> 
<tr> 
<td style="text-align: center;"><span style="font-size: medium;">Template Options</span></td> 
<td style="text-align: center;"> </td> 
<td style="text-align: center;"> </td> 
<td style="text-align: center; vertical-align: middle;"><br /><img src="images/greentick.png" alt="" width="24" height="24" /></td> 
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td> 
</tr> 
<tr> 
<td style="text-align: center;"><span style="font-size: medium;">Extras</span></td> 
<td style="text-align: center;"> </td> 
<td style="text-align: center;"> </td> 
<td style="text-align: center;"> 
<p>+ free LinkedIn</p> 
<p>profile</p> 
</td> 
<td style="text-align: center;"> 
<p>+ free LinkedIn</p> 
<p>profile</p> 
</td> 
</tr> 
<tr> 
<td style="text-align: center;"><span style="font-size: medium;">Delivery</span></td> 
<td style="text-align: center;"> 
<p>.docx &amp; .pdf</p> 
<p>versions</p> 
</td> 
<td style="text-align: center;"> 
<p>.docx &amp; .pdf</p> 
<p>versions</p> 
</td> 
<td style="text-align: center;"> 
<p>.docx &amp; .pdf</p> 
<p>versions</p> 
</td> 
<td style="text-align: center;"> 
<p>.docx &amp; .pdf</p> 
<p>versions</p> 
</td> 
</tr> 
<tr> 
<td style="text-align: center;"><span style="font-size: medium;">Cover Letter</span></td> 
<td style="text-align: center;"><br />+ $50<br /><br /></td> 
<td style="text-align: center;"><br />+ $50<br /><br /></td> 
<td style="text-align: center;"><br />+ $50<br /><br /></td> 
<td style="text-align: center;"><br />+ $50<br /><br /></td> 
</tr> 
<tr> 
<td style="background-color: #000000; text-align: center;"> 
<p>If you're not sure where</p> 
<p>your job would fit, please</p> 
<p>get in touch to discuss </p> 
<p>your requirements.</p> 
</td> 
<td style="text-align: center;"> 
<p>Vocations (such as</p> 
<p>Teaching &amp; Nursing)</p> 
<p>Early Career Professionals</p> 
</td> 
<td style="text-align: center;"> 
<p>Managers and Senior</p> 
<p>Professionals (Lawyers,</p> 
<p>Medical Doctors), BDMs,</p> 
<p>Consultants...</p> 
</td> 
<td style="text-align: center;"> 
<p>Senior Managers and Exec</p> 
<p>Directors (Operations</p> 
<p>Managers, GMs, Heads of</p> 
<p>Department</p> 
</td> 
<td style="text-align: center;"> 
<p>CEOs, CFOs, COOs, CIOs,</p> 
<p>Managing Directors, Board</p> 
<p>Members &amp; Non-Execs,</p> 
<p>Practice Directors &amp; Principals</p> 
</td> 
</tr> 
</tbody> 
</table> 
<p> </p> 
+1

呃,这么多的内联样式... – 2015-02-10 01:28:06

+0

不知道任何其他方式做到这一点很抱歉。你能帮助我在单个表格单元格中的背景图像吗? – 2015-02-10 01:28:54

回答

1

这是可以实现使用CSS:

首先,你需要创建的表格单元格,你想一个ID有一个图像作为背景。

在此之后,你需要做的CSS:

#tableCellWithBackground { 
    background-image: url("<The location of your image in your webspace, or the url of the image."); 
} 

这应该工作,告诉我,如果有错误或有些不妥。

+0

我会推荐一个类来代替。 – user3781632 2015-02-10 01:34:20

+0

感谢您的帮助。当我为表格单元格创建一个ID时,该单元格内的文本将离开表格。你能告诉我我应该使用的表格内的html代码吗? – 2015-02-10 01:36:54

+0

感谢您的帮助。已完美工作 – 2015-02-10 02:22:18

2

你可以尝试:

<td style="background-image: url(PATH/TO/IMAGE);"> 

如果你绝对要直列做到这一点。

但是使用CSS会更方便。喜欢的东西:

HTML

<td class="green_background"></td> 

CSS

.green_barground { 
background-image: url(PATH/TO/IMAGE.JPG); 
} 
+0

感谢您的帮助。已完美运作 – 2015-02-10 02:21:41

1

全部完成。干得好。查看JSfiddle HERE。我为您添加了“管理简历”的绿色背景。由于你在做所有内联CSS,因此需要将background-image: url('http://globe-views.com/dcim/dreams/green/green-04.jpg')添加到<td><style>标记。

+0

感谢您的帮助。已完美运作 – 2015-02-10 02:22:57

相关问题