在 HTML 中的表格单元格内添加图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13457710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding image inside table cell in HTML
提问by Rahul Tripathi
I am sorry but I am not able to do this simple thing. I am not able to add an image in the table cell. Below is my code which I have written:-
我很抱歉，但我无法做这件简单的事情。我无法在表格单元格中添加图像。下面是我写的代码：-
<html>
<head>CAR APPLICATION</head>
<body>
<table border = 5 bordercolor = red align = center>
<th colspan = 14>ABCD</th>
<tr>
<th colspan = 4>Name</th>
<th colspan = 4>Origin</th>
<th colspan = 4>Photo</th>
</tr>
<tr>
<td colspan = 4>Bugatti Veyron Super Sport</th>
<td colspan = 4>Molsheim, Alsace, France</th>
<td colspan = 4><img src="C:\Pics\H.gif" alt="" border=3 height=100 width=100></img></td>
</tr>
<tr>
<td colspan = 4>SSC Ultimate Aero TT TopSpeed</td>
<td colspan = 4>United States</td>
<td colspan = 4 border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td colspan = 4>Koenigsegg CCX</td>
<td colspan = 4>?ngelholm, Sweden</td>
<td colspan = 4 border=4 height=100 width=300>Photo1</td>
</tr>
<tr>
<td colspan = 4>Saleen S7</td>
<td colspan = 4>Irvine, California, United States</td>
<td colspan = 4 border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td colspan = 4> McLaren F1</td>
<td colspan = 4>Surrey, England</td>
<td colspan = 4 border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td colspan = 4>Ferrari Enzo</td>
<td colspan = 4>Maranello, Italy</td>
<td colspan = 4 border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td colspan = 4> Pagani Zonda F Clubsport</td>
<td colspan = 4>Modena, Italy</td>
<td colspan = 4 border=3 height=100 width=100>Photo1</td>
</tr>
</table>
</body>
<html>
What I am doing wrong? This is my output screen:-
我做错了什么？这是我的输出屏幕：-
采纳答案by Rahul Tripathi
This worked for me:-
这对我有用：-
<!DOCTYPE html>
<html>
<head>
<title>CAR APPLICATION</title>
</head>
<body>
<center>
<h1>CAR APPLICATION</h1>
</center>
<table border="5" bordercolor="red" align="center">
<tr>
<th colspan="3">ABCD</th>
</tr>
<tr>
<th>Name</th>
<th>Origin</th>
<th>Photo</th>
</tr>
<tr>
<td>Bugatti Veyron Super Sport</th>
<td>Molsheim, Alsace, France</th>
<!-- considering it is on the same folder that .html file -->
<td><img src=".\A.jpeg" alt="" border=3 height=100 width=300></img></th>
</tr>
<tr>
<td>SSC Ultimate Aero TT TopSpeed</th>
<td>United States</th>
<td border=3 height=100 width=100>Photo1</th>
</tr>
<tr>
<td>Koenigsegg CCX</th>
<td>?ngelholm, Sweden</th>
<td border=4 height=100 width=300>Photo1</th>
</tr>
<tr>
<td>Saleen S7</th>
<td>Irvine, California, United States</th>
<td border=3 height=100 width=100>Photo1</th>
</tr>
<tr>
<td> McLaren F1</th>
<td>Surrey, England</th>
<td border=3 height=100 width=100>Photo1</th>
</tr>
<tr>
<td>Ferrari Enzo</th>
<td>Maranello, Italy</th>
<td border=3 height=100 width=100>Photo1</th>
</tr>
<tr>
<td> Pagani Zonda F Clubsport</th>
<td>Modena, Italy</th>
<td border=3 height=100 width=100>Photo1</th>
</tr>
</table>
</body>
<html>
回答by Felipe Oriani
There are some syntax errors on your HTML.
您的HTML.
First, the URL of the image needs to point to an address on the public Internet. The users viewing your page won't have your hard drive, so pointing to a file on your local hard drive cannot work. Replace C:\Picswith the actual URL of the image, not a path on development machine filesystem. If you want to be absolutely sure, use a different computer and paste the img tag src attribute value to the address bar of the browser. If it works there, then you're good. Do not that the path can be relative and still valid, but then it needs to be relative to the public URL of the web page it's embedded in.
首先，图像的 URL 需要指向公共 Internet 上的地址。查看您页面的用户没有您的硬盘驱动器，因此无法指向本地硬盘驱动器上的文件。替换C:\Pics为图像的实际 URL，而不是开发机器文件系统上的路径。如果想绝对确定，换一台电脑，将img标签src属性值粘贴到浏览器地址栏即可。如果它在那里工作，那么你很好。不要认为路径可以是相对的并且仍然有效，但是它需要相对于它嵌入的网页的公共 URL。
Second, the <title>tag. You need to add this tag if you need a title on the browser, and you can't format it.
第二，<title>标签。如果您需要在浏览器上显示标题，则需要添加此标签，并且无法对其进行格式化。
The third error, if about the <th>tag, you have to add this header inside a <tr>tag, because <th>needs a row (create by <tr>).
第三个错误，如果关于<th>标签，你必须在标签中添加这个标题<tr>，因为<th>需要一行（创建者<tr>）。
Another thing is, you don't need all colspan you did.
另一件事是，你不需要你所做的所有 colspan。
I tried to do a valid html as you need. Take a look:
我试着根据你的需要做一个有效的 html。看一看：
<!DOCTYPE html>
<html>
<head>
<title>CAR APPLICATION</title>
</head>
<body>
<center>
<h1>CAR APPLICATION</h1>
</center>
<table border="5" bordercolor="red" align="center">
<tr>
<th colspan="3">SONAKSHI RAINA 10B ROLL No:-32</th>
</tr>
<tr>
<th>Name</th>
<th>Origin</th>
<th>Photo</th>
</tr>
<tr>
<td>Bugatti Veyron Super Sport</td>
<td>Molsheim, Alsace, France</td>
<!-- considering it is on the same folder that .html file -->
<td><img src="H.gif" alt="" border=3 height=100 width=100></img></td>
</tr>
<tr>
<td>SSC Ultimate Aero TT TopSpeed</td>
<td>United States</td>
<td border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td>Koenigsegg CCX</td>
<td>?ngelholm, Sweden</td>
<td border=4 height=100 width=300>Photo1</td>
</tr>
<tr>
<td>Saleen S7</td>
<td>Irvine, California, United States</td>
<td border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td> McLaren F1</td>
<td>Surrey, England</td>
<td border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td>Ferrari Enzo</td>
<td>Maranello, Italy</td>
<td border=3 height=100 width=100>Photo1</td>
</tr>
<tr>
<td> Pagani Zonda F Clubsport</td>
<td>Modena, Italy</td>
<td border=3 height=100 width=100>Photo1</td>
</tr>
</table>
</body>
<html>
回答by Billy Moat
You have a TH floating at the top of your table which isn't within a TR. Fix that.
你有一个 TH 漂浮在你的桌子顶部，它不在 TR 内。解决这个问题。
With regards to your image problem you;re referencing the image absolutely from your computer's hard drive. Don't do that.
关于您的图像问题，您绝对是从计算机硬盘中引用图像。不要那样做。
You also have a closing tag which shouldn't be there.
您还有一个不应该出现的结束标签。
It should be:
它应该是：
<img src="h.gif" alt="" border="3" height="100" width="100" />
Also this:
还有这个：
<table border = 5 bordercolor = red align = center>
Your colspans are also messed up. You only seem to have three columns but have colspans of 14 and 4 in your code.
你的 colspans 也搞砸了。您似乎只有三列，但代码中的 colspan 为 14 和 4。
Should be:
应该：
<table border="5" bordercolor="red" align="center">
Also you have no DOCTYPE declared. You should at least add:
您也没有声明 DOCTYPE。您至少应该添加：
<!DOCTYPE html>
回答by Louis Loudog Trottier
Sould look like:
看起来像：
<td colspan ='4'><img src="\Pics\H.gif" alt="" border='3' height='100' width='100' /></td>
.
.
<td>need to be closed with </td><img />is (in most case) an empty tag. The closing tag is replacede by />instead... like for br's
<td>需要用</td><img />（在大多数情况下）一个空标签来关闭。结束标记被替换为/>...就像 br 一样
<br/>
Your html structure is plain worng (sorry), but this will probably turn into a really bad cross-brwoser compatibility. Also, Encapsulate the value of your attributes with quotes and avoid using upercase in tags.
你的 html 结构很简单（抱歉），但这可能会变成一个非常糟糕的跨浏览器兼容性。此外，用引号封装属性的值并避免在标签中使用大写。
回答by Nick Green
You have referenced the image as a path on your computer (C:\etc\etc)......is it located there? You didn't answer what others have asked. I have taken your code, placed it in dreamweaver and it works apart from the image as I don't have that stored.
您已将图像作为计算机上的路径 (C:\etc\etc) 引用......它位于那里吗？你没有回答别人的问题。我已经拿走了你的代码，把它放在 Dreamweaver 中，它与图像分开工作，因为我没有存储它。
Check the location and then let us know.
检查位置，然后告诉我们。
回答by user4844498
Try using "/" instead of "\" for the path to your image. Some comments here seem to come from people that do not understand some of us are simply learning web development which in many cases is best done locally. So instead of using src=C:\Pics\H.gif use src="C:/Pics/H.gif" for an absolute path or just src="Pics/H.gif" for a relative path if your Pics are in a sub-directory of your html page's location). Note also, it is good practice to surround your path with quotes. otherwise you will have problems with paths that include spaces and other odd characters.
尝试使用“/”而不是“\”作为图像路径。这里的一些评论似乎来自不了解的人，我们中的一些人只是在学习 Web 开发，在许多情况下最好在本地完成。因此，不要使用 src=C:\Pics\H.gif 使用 src="C:/Pics/H.gif" 作为绝对路径，或者如果您的图片是相对路径，则仅使用 src="Pics/H.gif"在您的 html 页面位置的子目录中）。另请注意，用引号将路径括起来是一种很好的做法。否则您将遇到包含空格和其他奇数字符的路径问题。
回答by MessatsuX
Or... You could place the image in an anchor tag. Cause I had the same problem and it fixed it without issue. A lot of people use local paths before they publish their site and photos. Just make sure you go back and fix that in the final editing phase.
或者...您可以将图像放置在锚标记中。因为我遇到了同样的问题并且它没有问题地解决了它。许多人在发布他们的网站和照片之前使用本地路径。只要确保在最后的编辑阶段返回并修复它。
