logo标签列表

在HTML中将图像添加到表格单元格内

html
46

很抱歉，我无法完成这个简单的任务。我无法在表格单元格中添加图像。 以下是我编写的代码：

 <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>
我做错了什么？这是我的输出屏幕：-

输入图像描述

3
可能无法运行是因为您使用了本地图像路径。 - Pekka
2
H1标签（或类似的标签）不应放在页面的HEAD中。此外，CENTER标签已被弃用，不应再使用。 - Billy Moat
1
那么使用本地图像路径添加图像的方式不正确吗？ - Rahul Tripathi
@BillyMoat：谢谢你的回复，但我的问题不在于头部和中心标签。我只想在表格单元格中添加图片。 - Rahul Tripathi
难道不是因为你在做 <td> </th> 吗？ - Naner
1
你还在使用古老的“标签汤”HTML。 - Robusto
7个回答
20

这对我起作用了：

 <!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>
为什么你用 </th> 来关闭 <td>？这显然是错误的。 - Max von Hippel
15

你的HTML存在一些语法错误。

首先，图像的URL需要指向公共互联网上的地址。浏览您页面的用户不会访问到您的硬盘，因此指向本地硬盘上的文件是行不通的。请用实际的图像URL替换C:\Pics，而不是开发机器文件系统上的路径。如果您想要绝对确定，可以使用另一台计算机并将img标签src属性值粘贴到浏览器的地址栏中检查是否能够正常工作。如果在另一台计算机上能够正常显示，那么就没有问题。请注意，路径可以是相对路径，但必须相对于所嵌入的网页的公共URL才能有效。

其次是标签。如果您需要浏览器上的标题，就需要添加此标签，但无法格式化。</p> <p>第三个错误与<th>标签有关，您必须将此标题添加到<tr>标签内，因为<th>需要一个由<tr>创建的行。</p> <p>另外一件事是，您不需要所有的colspan。</p> <p>我尝试按照您的需求创建了一个有效的HTML，请看一下：</p><pre class="guess-Perl"><code><!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> </code></pre>

可能问题出在<img />标签中的图像路径上。正如我所说，您不能设置与本地机器相同的路径，因为当您发布它时，您将不会拥有相同的环境。如果我的答案帮助您找到解决方案，请将其标记以帮助其他用户遇到相同的问题 :) - Felipe Oriani
6

你的表格顶部有一个TH，但它不在TR内。请修复。

关于你的图片问题，你正在绝对引用来自计算机硬盘驱动器的图像。请勿这样做。

你还有一个不应该存在的闭合标签。

正确的写法是：

<img src="h.gif" alt="" border="3" height="100" width="100" />

同时，这个也是相关的IT技术内容：
<table border = 5 bordercolor = red align = center>

你的列合并也出现问题了。你的代码中只有三列，但是却使用了14和4列的列合并。
应该这样写：
<table border="5" bordercolor="red" align="center">

您没有声明DOCTYPE。您应该至少添加以下内容：
<!DOCTYPE html>
很可能是像我之前提到的那样，你的图片路径有问题。如果你的图片和HTML页面在同一个目录下，那么路径应该和我上面说的一样。此外，建议文件名不要使用大写字母、空格等特殊字符。 - Billy Moat
3

Sould look like:

<td colspan ='4'><img src="\Pics\H.gif" alt="" border='3' height='100' width='100' /></td>

<td>标签需要使用</td>来关闭。 <img />标签通常是一个空标签。闭合标签被替换为/>，就像br标签一样。

<br/>

你的HTML结构有错误（抱歉），但这很可能会导致严重的跨浏览器兼容性问题。此外，请使用引号来封装属性的值，避免在标签中使用大写字母。
1

或者...您可以将图像放置在锚标记中。因为我遇到了同样的问题，而且很容易解决。许多人在发布网站和照片之前使用本地路径。只需确保在最终编辑阶段返回并修复即可。

1
尝试使用“ /”而不是“ \”作为图像路径。这里的一些评论似乎来自一些不理解我们只是简单学习网站开发的人，因此在许多情况下最好在本地完成。所以，不要使用src = C：\ Pics \ H.gif，请改用src =“ C：/Pics/H.gif”表示绝对路径，或者只需使用src =“ Pics/H.gif”表示相对路径，如果您的Pics位于html页面位置的子目录中）。此外，请注意，最好使用引号括起您的路径。否则，您将遇到包含空格和其他奇怪字符的路径问题。
1

您已将图像引用为计算机上的路径（C：\ etc \ etc）......它是否位于那里？ 您没有回答其他人所问的问题。 我已经将您的代码放入Dreamweaver中，除了我没有存储该图像外，它可以正常工作。

请检查位置，然后告诉我们。

在IE9中是可以的。同时在Firefox和Chrome上也可以！ - Rahul Tripathi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接