Awesome Free Image 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?
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.
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.
When you are having a WordPress website, you probably know that a lot of codes are stripped. I have searched for HTML codes which Read more...
Tutorial: How to create a HTML Code Block Text on your site. We start with this basic code. You see the black block and the Read more...
