Loes Knetsch ©

An awesome free image gallery for your website. You can make it yourself with an HTML table code. But it can be very annoying when you want to display a couple of images next to each other and there appears 2px space in between the images. How to get rid of this space in between the images? And how to keep the images in one line?

To keep images in one line you can either use a gallery or an HTML table. A gallery will always display the images separately. But when you use an HTML table, you are able to connect the images seamlessly. I will show you the differences here. I will use 5 images.

Images displayed in a gallery

These don’t look very nice, because the images do not have the same width, they are not displayed in the same way

Images displayed in a regular HTML table

 

 

The HTML code for this table is

<table style=”border-collapse: collapse; width: 100%;” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td style=”width: auto;”> </td>
<td style=”width: auto;”> </td>
<td style=”width: auto;”> </td>
<td style=”width: auto;”> </td>
<td style=”width: auto;”> </td>
</tr>
</tbody>
</table>

I have tried everything, from cellpadding, cell spacing to CSS code, nothing would remove the little space in between the images, and it doesn’t look very nice to have the clothing line into 5 pieces.

Perseverance and determination brought me the next solution to remove the space in between the table images and to let them seamlessly fit each other.

The final table code for seamlessly connected images

 

The seamlessly working table code

<table style=”border-collapse: collapse; width: 100%;” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<th style=”width: auto;”> </th>
<th style=”width: auto;”> </th>
<th style=”width: auto;”> </th>
<th style=”width: auto;”> </th>
<th style=”width: auto;”> </th>
</tr>
</tbody>
</table>

HTML code for seamlessly connected images can be that simple, just change the td into th and it works perfectly!

Awesome galleries

These galleries are created with an HTML table code

Gallery with Easels

The Glass Edition

Gallery of houses

How to make these awesome galleries for your website?

•  Go to Pxhere.com and find a suitable image.
• If you can’t find one, you can check up my blog at Wealthy Affiliate for other websites. (100+ listed sources)
• When you have found an image, make it smaller in height, keep the width.

History is a gallery of pictures in which there are a few originals and many copies ~ Alexis de Tocqueville Click To Tweet

I found this image and reduced the height in MS paint.

• Upload your reduced image to Pixlr.com/editor
  

  Amazon Transparent Tape

• Add the images you want as a layer, I choose for posters in this example gallery (All made at Design Wizard)
• You can scale them under the menu tab edit > free transformation or free deformation.
• I used some transparent tape to make it look genuine. You may use the tape image for your own good:)

This is the whole image (I have scaled it to 1000px width)

Now we have to cut it into 4 pieces, to be able to link each piece to an article. I do that in MS paint.

Select > Cut > Save as… > cntr+z > repeat

 

We have 4 pieces, and we are going to add them to this table code. Align: None. Remember to fill in the image alt text.

<table style=”height: 100%; width: auto; border-collapse: collapse;” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<th style=”width: auto;”> </th>
<th style=”width: auto;”> </th>
<th style=”width: auto;”> </th>
<th style=”width: auto;”> </th>
</tr>
</tbody>
</table>

 

When you’ve added the images, you can click on them and add the links to them.

Ready, you now have created a totally unique gallery for your website with links attached to other blogs.

 

| Home | Use of Cookies | Privacy Policy | FAQ | Affiliate Disclosure | Contact |

© Loes Knetsch. All rights reserved.