Resources: Creating Thumbnail Tables in HTML

[goss]

I got a request to share the html code I used for posting my Inktober artwork thumbnails. It's in a table format, and the images are all 100 x 100 pixels.

To create a similar table, you can copy the code in the box below. Just replace the image.jpg with your thumbnail image source, and replace URL with the destination webpage link.

<table border="0" cellpadding="5"> <tr align=center bgcolor="000000"> <th><a href="URL" target="_blank" border="1"><img src="image.jpg"></a></th> <th><a href="URL" target="_blank" border="1"><img src="image.jpg"></a></th> <th><a href="URL" target="_blank" border="1"><img src="image.jpg"></a></th> </tr> <tr align="center"> <td>Day 1</td> <td>Day 2</td> <td>Day 3</td> </tr> <tr align="center" bgcolor="000000"> <th><a href="URL" target="_blank" border="1"><img src="image.jpg"></a></th> <th><a href="URL" target="_blank" border="1"><img src="image.jpg"></a></th> <th><a href="URL" target="_blank" border="1"><img src="image.jpg"></a></th> </tr> <tr align="center"> <td>Day 4</td> <td>Day 5</td> <td>Day 6</td> </tr> </table>

Comments

[mekare]

Oh and since I read on not_lucy's tumblr today that people surfing on their mobiles sometimes have trouble with images and screen size, it's a good idea to add "width=90%" to the <tr align... attrribute so the table resizes to suit every screen format!