Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding image inside table cell in HTML

Tags:

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

like image 229
Rahul Tripathi Avatar asked Nov 19 '12 16:11

Rahul Tripathi


People also ask

Can you insert an image in a table cell?

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.

Which tag is used to insert image in cell of a table?

In HTML <img> tag is use to insert image in HTML page.

Can you insert an image in a table cell if yes how?

Yes, we can insert image in a table cell by using <img> tag within the <td> tag.


2 Answers

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> 
like image 132
Rahul Tripathi Avatar answered Oct 01 '22 18:10

Rahul Tripathi


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> 
like image 34
Felipe Oriani Avatar answered Oct 01 '22 18:10

Felipe Oriani