[html] Adding image inside table cell in 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:-

enter image description here

This question is related to html

The answer is


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>

You have a TH floating at the top of your table which isn't within a 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. You only seem to have three columns but have colspans of 14 and 4 in your code.

Should be:

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

Also you have no DOCTYPE declared. You should at least add:

<!DOCTYPE html> 

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.


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.


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

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


There are some syntax errors on your 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:\Pics with 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.

Second, the <title> tag. 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>).

Another thing is, you don't need all colspan you did.

I tried to do a valid html as you need. 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>

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.

Check the location and then let us know.