堆栈内存溢出
  简体   繁体   English

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

[英]Adding image inside table cell in HTML

 原文  2012-11-19 16:10:17  2   7    html

问题描述

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:- 这是我的输出屏幕： -

在此输入图像描述

7 个解决方案

解决方案1
 11  2012-11-19 16:20:31

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. 首先，图像的URL需要指向公共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:\\Pics with the actual URL of the image, not a path on development machine filesystem. 将C:\\Pics替换为图像的实际URL，而不是开发机器文件系统上的路径。 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. 如果您想绝对确定，请使用其他计算机并将img标记src属性值粘贴到浏览器的地址栏中。 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。

Second, the <title> tag. 第二， <title>标签。 You need to add this tag if you need a title on the browser, and you can't format it. 如果您需要在浏览器上使用标题，则需要添加此标记，并且无法对其进行格式化。

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. 我试图根据需要做一个有效的HTML。 Take a look: 看一看： 

<!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>

解决方案2
 8 已采纳  2012-11-20 08:18:40

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>

解决方案3
 4  2012-11-19 16:16:13

You have a TH floating at the top of your table which isn't within a TR. 你的桌子顶部浮动的TH不在TR范围内。 Fix that. 修复它。

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. 你的colspans也搞砸了。 You only seem to have three columns but have colspans of 14 and 4 in your code. 您似乎只有三列，但代码中的colspans为14和4。

Should be: 应该： 

<table border="5" bordercolor="red" align="center">

Also you have no DOCTYPE declared. 您也没有声明DOCTYPE。 You should at least add: 你应该至少添加： 

<!DOCTYPE html>

解决方案4
 2  2012-11-19 16:17:58

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. <td>需要用</td> <img />关闭（在大多数情况下）是一个空标签。 The closing tag is replacede by /> instead... like for br's 结束标记由/>替换...就像br一样 

<br/>

Your html structure is plain worng (sorry), but this will probably turn into a really bad cross-brwoser compatibility. 你的html结构很简单（对不起），但这可能会变成一个非常糟糕的交叉兼容性。 Also, Encapsulate the value of your attributes with quotes and avoid using upercase in tags. 此外，使用引号封装属性的值，并避免在标记中使用upercase。

解决方案5
 1  2012-11-19 17:33:09

You have referenced the image as a path on your computer (C:\\etc\\etc)......is it located there? 您已将图像引用为计算机上的路径（C：\\ etc \\ etc）......它位于那里吗？ 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. 我已经把你的代码，放在Dreamweaver中，它与图像分开，因为我没有存储。

Check the location and then let us know. 检查位置，然后告诉我们。

解决方案6
 1  2015-04-29 02:47:11

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). 所以不使用src = C：\\ Pics \\ H.gif使用src =“C：/Pics/H.gif”作为绝对路径，或者只使用src =“Pics / H.gif”作为相对路径，如果你的Pics是在html页面位置的子目录中）。 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. 否则你会遇到包含空格和其他奇数字符的路径的问题。

解决方案7
 1  2015-06-12 14:42:22

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. 只需确保在最终编辑阶段返回并修复它。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在表格单元格HTML内添加图像时出错 - Error adding image inside table cell HTML 当其中有图像时，HTML垂直对齐表格单元格的内容 - HTML vertically align content of table cell when there's image inside 在表格单元格内添加段落 - Adding paragraph inside table cell HTML 在表格单元格内输入 - HTML input inside table cell 将图像插入 HTML 中的表格单元格 - Inserting an image into a table cell in HTML 在没有宽度的表格单元格中添加省略号 - Adding ellipsis inside table cell without widths 在HTML中的表格后面添加图片 - Adding an image behind a table in HTML 通过 JavaScript 将图像添加到 HTML 表格单元格 - Adding images to HTML table cell via JavaScript 将背景图像添加到单个表格单元格 - Adding a background image to a single table cell 我如何使表格中的图像适合单元格而不是溢出或使用 html 和 css 扩展单元格 - how do i make the image in a table fit inside the cell and not overflow or expand the cells using html and css
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM