P.J P.J - 7 months ago 13
HTML Question

HTML - Displaying Images side by side

I am trying to put images side by side on my e-commerce website. My code is given below.I don't have any CSS on it.How can i make the website for checkout(Its just for tesing purposes so website wont be alive).

Should I use javscript or anything else ?

HTML-:

<span class="image">

<p style="float:left ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
<a href="order.html"><img src="images/kitmu.jpg" style="width: 180px; margin-bottom: 5px; padding-top :50px;" ></a><br><a href="order.html">Buy Manchester united Kit for £30.00</a>
<a href="order.html"><img src="images/kitliver.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Liverpool Kit for £30.00</a>
<a href="order.html"><img src="images/kita.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy arsenal Kit for £30.00</a>
</p>

<p style="clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
<a href="order.html"><img src="images/kitmc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Manchester City Kit for £30.00</a>
<a href="order.html"><img src="images/kitc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Chelsea Kit for £30.00</a>
<a href="order.html"><img src="images/Afootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Addias football for £15.00</a>
</p>

<p style="clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
<a href="order.html"><img src="images/cfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Champions League Football for £20.00</a>
<a href="order.html"><img src="images/pfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Puma football for £12.00</a>
<a href="order.html"><img src="images/nfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Nike football for £1.00</a>
</p>

</span>

Answer

Try This Code

    <span class="image">
<table>
<tr>
<th><a href="order.html"><img src="images/kitmu.jpg" style="width: 180px; margin-bottom: 5px; " ></a><br><a href="order.html">Buy Manchester united Kit for £30.00</a> </th>
<th><a href="order.html"><img src="images/kitliver.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Liverpool Kit for £30.00</a></th>
<th><a href="order.html"><img src="images/kita.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy arsenal Kit for £30.00</a></th>
</tr>      

<tr>          
<th><a href="order.html"><img src="images/kitmc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Manchester City Kit for £30.00</a></th>
<th><a href="order.html"><img src="images/kitc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Chelsea Kit for £30.00</a></th>
<th><a href="order.html"><img src="images/Afootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Addias football for £15.00</a></th>
</tr>

<tr>
<th><a href="order.html"><img src="images/cfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Champions League Football for £20.00</a></th>
<th><a href="order.html"><img src="images/pfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Puma football for £12.00</a></th>
<th><a href="order.html"><img src="images/nfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Nike football for £1.00</a></th>
</tr>
</table>
</span>
Comments