How to position images underneath each other using HTML?

How do I position images underneath each other with spacing in between each image using HTML?

I found these codes

<table>
<tr>
<td><replace with your image URL or button code></td>
<td><replace with your image URL or button code></td>
</tr>
</table>

HTML:

<center><a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a>&nbsp;<a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a></center><center><a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a>&nbsp;<a href="http://www.flickr.com/photos/goldenapples/6771776799/" title="goldentree by thefruitofherhands, on Flickr"><img src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg" width="100" height="100" alt="goldentree"></a><

HTML:

that centers and positions the images sit side by side online but I want my pictures to be centered and positioned underneath each other with spacing in between each image. I'm using HTML to try to make eBay listings to make the listing stand out. My images width and height will be 500" x 300" respectively. What do I need to change or add to either of the above two codes to position the images underneath each other how I want them?

 

1) You can use a table:

<table width="500" border="0">
  <tr>
    <th scope="row"><center>IMG 1</center></th>
  </tr>
  <tr>
    <th scope="row"><center>IMG 2</center></th>
  </tr>
  <tr>
    <th scope="row"><center>IMG 3</center></th>
  </tr>
</table>

Code (markup):

2) You can use an unordered list.

<ul style="list-style:none">
<li><center>IMG 1</center></li>
<li><center>IMG 2</center></li>
<li><center>IMG 3</center></li>
</ul>

Code (markup):

Use <br /> for line breaks.

 

Wow, bad code with the first answer being WORSE code.

On a modern website you have NO business using tables for layout, NO business using the decade and a half deprecated CENTER tag, much less the waste of TITLE attributes holding ALT tag content with pointless ALT content.

It would depend on the images in question, but if you had the list of images from that second example...

<div class="imageSet">
	<a href="http://www.flickr.com/photos/goldenapples/6771776799/">
		<img
			src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg"
			width="100" height="100"
			alt="goldentree by thefruitofherhands, on Flickr"
		/>
	</a>
	<a href="http://www.flickr.com/photos/goldenapples/6771776799/">
		<img
			src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg"
			width="100" height="100"
			alt="goldentree by thefruitofherhands, on Flickr"
		>
	</a>
	<a href="http://www.flickr.com/photos/goldenapples/6771776799/">
		<img
			src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg"
			width="100" height="100"
			alt="goldentree by thefruitofherhands, on Flickr"
		/>
	</a>
	<a href="http://www.flickr.com/photos/goldenapples/6771776799/">
		<img
			src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg"
			width="100" height="100"
			alt="goldentree by thefruitofherhands, on Flickr"
		>
	</a>
</div>

Code (markup):

and then do it from the CSS the proper way.

.imageSet img { display:block; margin:0 auto; }

Code (markup):

the margin being if you want them centered.

Tables around images? CENTER tags? What is this, 1998?

 

Yeah you realize I'm using basic 1998 HTML on eBay to create an eBay listing design. So I can use the code you've given on eBay without any problems? I'm not using a server to host an external CSS style sheets if this info is relevant.

 

He said he only wants to do this with HTML and I just give him the HTML way that can accomplish this. (I didn't say that's the right way to make this on his own website)
Since this code will not be used for his website and he cannot use an external style sheet probably he cannot use css.

That code will be probably parsed by a textarea that allows HTML or something.

 

I'm trying to use the code in eBay HTML editor not own website.

 

Ok, my bad - missed that one detail. So... use line breaks (BR), leave the images in their default psuedo inline-block behavior, set text-align:center on a wrapping div with the STYLE attribute.

<div style="text-align:center;">
	<a href="http://www.flickr.com/photos/goldenapples/6771776799/">
		<img
			src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg"
			width="100" height="100"
			alt="goldentree by thefruitofherhands, on Flickr"
		/>
	</a><br />
	<a href="http://www.flickr.com/photos/goldenapples/6771776799/">
		<img
			src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg"
			width="100" height="100"
			alt="goldentree by thefruitofherhands, on Flickr"
		>
	</a><br />
	<a href="http://www.flickr.com/photos/goldenapples/6771776799/">
		<img
			src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg"
			width="100" height="100"
			alt="goldentree by thefruitofherhands, on Flickr"
		/>
	</a><br />
	<a href="http://www.flickr.com/photos/goldenapples/6771776799/">
		<img
			src="http://farm8.staticflickr.com/7174/6771776799_4243a32fd6_t.jpg"
			width="100" height="100"
			alt="goldentree by thefruitofherhands, on Flickr"
		>
	</a>
</div>

Code (markup):

Still not rocket science.