Adding image inside table cell in HTML

Question

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 -    lt html gt      lt head gt CAR APPLICATION lt  head gt      lt body gt        lt table border   5 bordercolor   red align   center gt       lt th colspan   14 gt ABCD lt  th gt       lt tr gt           lt th colspan   4 gt Name lt  th gt           lt th colspan   4 gt Origin lt  th gt           lt th colspan   4 gt Photo lt  th gt       lt  tr gt       lt tr gt           lt td colspan   4 gt Bugatti Veyron Super Sport lt  th gt           lt td colspan   4 gt Molsheim  Alsace  France lt  th gt           lt td colspan   4 gt  lt img src  C  Pics H gif  alt    border 3 height 100 width 100 gt  lt  img gt  lt  td gt       lt  tr gt       lt tr gt           lt td colspan   4 gt SSC Ultimate Aero TT  TopSpeed lt  td gt           lt td colspan   4 gt United States lt  td gt           lt td colspan   4 border 3 height 100 width 100 gt Photo1 lt  td gt       lt  tr gt       lt tr gt           lt td colspan   4 gt Koenigsegg CCX lt  td gt           lt td colspan   4 gt   ngelholm  Sweden lt  td gt           lt td colspan   4 border 4 height 100 width 300 gt Photo1 lt  td gt       lt  tr gt       lt tr gt           lt td colspan   4 gt Saleen S7 lt  td gt           lt td colspan   4 gt Irvine  California  United States lt  td gt           lt td colspan   4 border 3 height 100 width 100 gt Photo1 lt  td gt       lt  tr gt       lt tr gt           lt td colspan   4 gt  McLaren F1 lt  td gt           lt td colspan   4 gt Surrey  England lt  td gt           lt td colspan   4 border 3 height 100 width 100 gt Photo1 lt  td gt       lt  tr gt       lt tr gt           lt td colspan   4 gt Ferrari Enzo lt  td gt           lt td colspan   4 gt Maranello  Italy lt  td gt           lt td colspan   4 border 3 height 100 width 100 gt Photo1 lt  td gt       lt  tr gt       lt tr gt           lt td colspan   4 gt  Pagani Zonda F Clubsport lt  td gt           lt td colspan   4 gt Modena  Italy lt  td gt           lt td colspan   4 border 3 height 100 width 100 gt Photo1 lt  td gt       lt  tr gt   lt  table gt    lt  body gt   lt html gt    What I am doing wrong  This is my output screen -

User · Answer

Sould look like    lt td colspan   4  gt  lt img src   Pics H gif  alt    border  3  height  100  width  100    gt  lt  td gt        lt td gt  need to be closed with  lt  td gt   lt img   gt  is  in most case  an empty tag  The closing tag is replacede by   gt  instead    like for br s    lt br  gt    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

User · Answer

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

User · Answer

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

User · Answer

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  lt title gt  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  lt th gt  tag  you have to add this header inside a  lt tr gt  tag  because  lt th gt  needs a row  create by  lt tr gt     Another thing is  you don t need all colspan you did   I tried to do a valid html as you need  Take a look    lt  DOCTYPE html gt    lt html gt   lt head gt       lt title gt CAR APPLICATION lt  title gt   lt  head gt   lt body gt       lt center gt           lt h1 gt CAR APPLICATION lt  h1 gt       lt  center gt        lt table border  5  bordercolor  red  align  center  gt           lt tr gt               lt th colspan  3  gt SONAKSHI RAINA 10B ROLL No -32 lt  th gt            lt  tr gt           lt tr gt               lt th gt Name lt  th gt               lt th gt Origin lt  th gt               lt th gt Photo lt  th gt           lt  tr gt           lt tr gt               lt td gt Bugatti Veyron Super Sport lt  td gt               lt td gt Molsheim  Alsace  France lt  td gt                       lt  -- considering it is on the same folder that  html file -- gt               lt td gt  lt img src  H gif  alt    border 3 height 100 width 100 gt  lt  img gt  lt  td gt           lt  tr gt           lt tr gt               lt td gt SSC Ultimate Aero TT  TopSpeed lt  td gt               lt td gt United States lt  td gt               lt td border 3 height 100 width 100 gt Photo1 lt  td gt           lt  tr gt           lt tr gt               lt td gt Koenigsegg CCX lt  td gt               lt td gt   ngelholm  Sweden lt  td gt               lt td border 4 height 100 width 300 gt Photo1 lt  td gt           lt  tr gt           lt tr gt               lt td gt Saleen S7 lt  td gt               lt td gt Irvine  California  United States lt  td gt               lt td border 3 height 100 width 100 gt Photo1 lt  td gt           lt  tr gt           lt tr gt               lt td gt  McLaren F1 lt  td gt               lt td gt Surrey  England lt  td gt               lt td border 3 height 100 width 100 gt Photo1 lt  td gt           lt  tr gt           lt tr gt               lt td gt Ferrari Enzo lt  td gt               lt td gt Maranello  Italy lt  td gt               lt td border 3 height 100 width 100 gt Photo1 lt  td gt           lt  tr gt           lt tr gt               lt td gt  Pagani Zonda F Clubsport lt  td gt               lt td gt Modena  Italy lt  td gt               lt td border 3 height 100 width 100 gt Photo1 lt  td gt           lt  tr gt       lt  table gt   lt  body gt   lt html gt

User · Answer

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

User · Answer

This worked for me -    lt  DOCTYPE html gt      lt html gt     lt head gt   lt title gt CAR APPLICATION lt  title gt    lt  head gt    lt body gt   lt center gt       lt h1 gt CAR APPLICATION lt  h1 gt   lt  center gt    lt table border  5  bordercolor  red  align  center  gt       lt tr gt           lt th colspan  3  gt ABCD lt  th gt        lt  tr gt       lt tr gt           lt th gt Name lt  th gt           lt th gt Origin lt  th gt           lt th gt Photo lt  th gt       lt  tr gt       lt tr gt           lt td gt Bugatti Veyron Super Sport lt  th gt           lt td gt Molsheim  Alsace  France lt  th gt                   lt  -- considering it is on the same folder that  html file -- gt           lt td gt  lt img src    A jpeg  alt    border 3 height 100 width 300 gt  lt  img gt  lt  th gt       lt  tr gt       lt tr gt           lt td gt SSC Ultimate Aero TT  TopSpeed lt  th gt           lt td gt United States lt  th gt           lt td border 3 height 100 width 100 gt Photo1 lt  th gt       lt  tr gt       lt tr gt           lt td gt Koenigsegg CCX lt  th gt           lt td gt   ngelholm  Sweden lt  th gt           lt td border 4 height 100 width 300 gt Photo1 lt  th gt       lt  tr gt       lt tr gt           lt td gt Saleen S7 lt  th gt           lt td gt Irvine  California  United States lt  th gt           lt td border 3 height 100 width 100 gt Photo1 lt  th gt       lt  tr gt       lt tr gt           lt td gt  McLaren F1 lt  th gt           lt td gt Surrey  England lt  th gt           lt td border 3 height 100 width 100 gt Photo1 lt  th gt       lt  tr gt       lt tr gt           lt td gt Ferrari Enzo lt  th gt           lt td gt Maranello  Italy lt  th gt           lt td border 3 height 100 width 100 gt Photo1 lt  th gt       lt  tr gt       lt tr gt           lt td gt  Pagani Zonda F Clubsport lt  th gt           lt td gt Modena  Italy lt  th gt           lt td border 3 height 100 width 100 gt Photo1 lt  th gt       lt  tr gt   lt  table gt     lt  body gt     lt html gt

User · Answer

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    lt img src  h gif  alt    border  3  height  100  width  100    gt    Also this    lt table border   5 bordercolor   red align   center gt    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    lt table border  5  bordercolor  red  align  center  gt    Also you have no DOCTYPE declared  You should at least add    lt  DOCTYPE html gt

[html] Adding image inside table cell in HTML

Examples related to html