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:-
Click inside the cell where you want to position the picture file (first cell in the first row for this example). Click the Insert tab. Click Pictures in the Illustrations group. Use the Insert Pictures dialog to find and insert the picture.
In HTML <img> tag is use to insert image in HTML page.
Yes, we can insert image in a table cell by using <img> tag within the <td> tag.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With