Awesome Free Gallery For Your Website

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?

Awesome free galleries for your website

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

 

12 reasons why people leave your website start your own blog online turn your passion into a thriving business 40 easy ways for students to make money Better business writing skills

 

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

 

12 reasons why people leave your website start your own blog online turn your passion into a thriving business 40 easy ways for students to make money Better business writing skills

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

awesome website gallery 2, HTML tabel code gallery awesome website gallery 2, HTML tabel code gallery awesome website gallery 2, HTML tabel code gallery awesome website gallery 2, HTML tabel code gallery

The Glass Edition

Awesome gallery glass bottles Awesome gallery glass bottles Awesome gallery glass bottles

Gallery of houses

awesome HTML galleries houses 1 awesome HTML galleries houses 2 awesome HTML galleries houses 3 awesome HTML galleries houses 4 awesome HTML galleries houses 5

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

    transparent tape

    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)

Gallery windows with posters

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>

 

Awesome window posters gallery 1 Awesome window posters gallery 2 Awesome window posters gallery 3 Awesome window posters gallery 4

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.

We can teach anyone to build a successful business online

 

(Visited 57 times, 1 visits today)

Hey, nice to meet you. I am Loes and I love to work, create and make money on the internet. My vision for the future is promising because the activities and sales go to triple over the next few years. You can take advantage of it too. Step into the world of affiliate marketing today, and work towards financial freedom for you and for your family. If you would like to learn how to build your own Wordpress website, click here to open your free account today!

  1. DonnieK says:

    Where were you at with this information about 4 months ago when I was looking for a related style for a page I was working on? You make HTML coding look like its making a comeback of sorts! I have a few galleries that give you a statues look.

    Your example with the cloths line hanging and the tape adds character to the photos, not one of can pictures that we see so much of these days… The little tricks you shared for connecting the lines to enhance the overall look, great. Who would have thought that a space remove would make lines connect?

    I appreciated you sharing the coding, and examples to relate to the actual results you are looking for. I copied a few of the different coding to later try and find ways to give a few my future posting a different look.
    Thanks for your perseverance and determination to gather the results that works!

    • Loes says:

      Thank you Donnie, there are many more codes to find on this website. I just love to see what happens and try to find an HTML way of creating neat little things, instead of using plugins. Often plugins are abandoned after a few years, not updated anymore, then I will have more problems to take them down again and rewrite posts. In the category Tutorials-HTML you find 12 posts more.

      Enjoy your day, Loes

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>