Want to hear peoples thoughts on using tables for image galleries

So i know alot of you old school types are going to lead by saying tabless sgould only be used to display tabular data.
Thats not what this is about, personally i dont see any issue with using tables to display images and have been doing so for years.
I just want to know peoples opinions on if there are any better alternatives and WHY they are better
Go..

 

tables are horrible, style everything with divs

nesting 4 tables deep turns into a nightmare !

 

It's simple, a gallery is a list, not a table. If you're expecting some sort of approbation for your intransigent misuse of the html language, you will get it only from your fellow ignoranti.

g

 

You've answered your own question with 'tables are for tabular data'.

 

I don't find tables make life easy, really. It results in too much code that can be trickier to handle than cooking up something with CSS. Try it for yourself - make a simple PHP gallery script and two templates (one for tables, the other using CSS, divs, etc).

 

Putting aside the semantics of it (tables for layout is garbage), you have the simple fact that if you're building a fluid layout, tables don't let you make the number of images shown across vary.

... and since one shouldn't be crapping out fixed width layouts in the first place...

Done 'properly' it should be less code, more versatile to style, and again, lets you build semantic markup progressively enhanced with CSS because again, if you are choosing your tags based on their default appearance, you're choosing all the wrong tags for all the wrong reasons!

 

Ok, lemme put it this way, take this from one of the pages you recently posted asking for help on:

<table border="2" cellspacing="1" class="c31" width="100%">
<tr>
<td width="100%"><span class="c26"><strong>Desktop Backgrounds</strong></span> <span class="c6"> Click The Plus To See More Categories</span>
<table border="0" cellspacing="1" class="c31" width="100%">
<tr>
<td width="3%">
<p class="c29"><a href="http://www.techagesite.com/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm"><img border="2" src="Thumbs/super-mario-galaxy-hd-desktop-background_small1.jpg" alt="super mario galaxy 2 thumb" width="100" height="62"></a></p>
<p class="c34">Mario Galaxy</p>
</td>
<td width="3%">
<p class="c29"><a href="http://www.techagesite.com/free-music-wallpaper-big-music-wallpapers.htm">
<img border="2" src="Thumbs/Equalizer-music-wallpaper-music-bars-wallpapers_small1.jpg" alt="music thumb" width="100" height="62"></a></p>
<p class="c34">Music</p>
</td>
<td width="3%">
<p class="c29"><a href="http://www.techagesite.com/cod7-call-of-duty-black-ops-wallpapers-7.htm"><img border="2" src="Thumbs/cod7-call-of-duty-black-ops-background-7_small1.jpg" alt="black ops cod" width="100" height="62"></a></p>
<p class="c34">Black Ops</p>
</td>
<td width="3%">
<p class="c29"><a href="scooby-doo-wallpapers-character-backgrounds-coloring-pages-the-gang.htm"><img border="2" src="Thumbs/scooby-doo-wallpaper-scary-cartoon-background-1024x768_small1.jpg" width="100" height="62" alt="scooby doo thumb"></a></p>
<p class="c34">Scooby Doo</p>
</td>
<td width="3%">
<p class="c29"><a href="free-hd-neon-colours-desktop-wallpapers-download.htm"><img border="2" src="Thumbs/bright-abtsract-glow-hd-wallpaper-1920x1080-hd_small1.jpg" width="100" height="62" alt="neon thumb"></a></p>
<p class="c34">Neon Desktop</p>
</td>
<td width="3%"><a href="funny-desktop/funny-wallpaper-pics-quotes-photos-and-stuff-cartoons.jpg">
<img border="2" src="Thumbs/funny-wallpaper-pics-quotes-photos-and-stuff-cartoons_small.jpg" alt="funny thumb" width="100" height="62"></a>
<p class="c34">Funny</p>
</td>
<td width="4%">
<p class="c29"></p>
<p class="c29"></p>
<p class="c29"></p>
<table border="0" cellspacing="1" width="60">
<tr>
<td width="60" height="60"><script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
<table width="60">
<tr class="c35">
<td onmouseover="showmenu('GraphicDesign')" onmouseout="hidemenu('GraphicDesign')"><img src="/Thumbs/plus.png" width="60" height="60" alt="** PLEASE DESCRIBE THIS IMAGE **">
<table class="menu" id="GraphicDesign" width="60">
<tr>
<td class="menu"><a href="/meboy.htm"><img src="/Thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" width="5" height="7" alt="** PLEASE DESCRIBE THIS IMAGE **"></a></td>
</tr>
<tr>
<td class="menu"><a href="/meboy.htm"><img src="/Thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" width="5" height="7" alt="** PLEASE DESCRIBE THIS IMAGE **"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Code (markup):

MULTIPLE tables for NOTHING, could never provide a proper fluid much less responsive layout, and comes in at 3.3k... I would likely have something like this:

<div id="desktopBackgrounds">
	<h2>Desktop Backgrounds</h2>
	<ul class="gallery">
		<li>
			<a href="/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm">
				<img
					src="Thumbs/super-mario-galaxy-hd-desktop-background_small1.jpg"
					alt="super mario galaxy 2"
				/>
				Mario Galaxy
			</a>
		</li><li>
			<a href="/free-music-wallpaper-big-music-wallpapers.htm">
				<img
					src="Thumbs/Equalizer-music-wallpaper-music-bars-wallpapers_small1.jpg"
					alt="music"
				/>
				Music
			</a>
		</li><li>
			<a href="/cod7-call-of-duty-black-ops-wallpapers-7.htm">
				<img
					src="Thumbs/cod7-call-of-duty-black-ops-background-7_small1.jpg"
					alt="black ops cod"
				/>
				Black Ops
			</a>
		</li><li>
			<a href="scooby-doo-wallpapers-character-backgrounds-coloring-pages-the-gang.htm">
				<img
					src="Thumbs/scooby-doo-wallpaper-scary-cartoon-background-1024x768_small1.jpg"
					alt="scooby doo"
				/>
				Scooby Doo
			</a>
		</li><li>
			<a href="free-hd-neon-colours-desktop-wallpapers-download.htm">
				<img
					src="Thumbs/bright-abtsract-glow-hd-wallpaper-1920x1080-hd_small1.jpg"
					alt="neon"
				/>
				Neon Desktop
			</a>
		</li><li>
			<a href="funny-desktop/funny-wallpaper-pics-quotes-photos-and-stuff-cartoons.jpg">
				<img
					src="Thumbs/funny-wallpaper-pics-quotes-photos-and-stuff-cartoons_small.jpg"
					alt="funny"
				/>
				Funny
			</a>
		</li><li class="more">
			<span>More Categories</span>
			<ul>
				<li>
					<a href="/meboy.htm">
						<img
							src="/Thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg"
							alt="** PLEASE DESCRIBE THIS IMAGE **"
						/>
					</a>
				</li><li>
					<a href="/meboy.htm">
						<img
							src="/Thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg"
							alt="** PLEASE DESCRIBE THIS IMAGE **"
						/>
					</a>
				</li>
			</ul>
		</li>
	</ul>
<!-- #desktopBackgrounds --></div>

Code (markup):

with EVERYTHING else handled in the external stylesheet. Comes in at 1.9k, so around one-third reduction.

Which brings up ANOTHER reason -- leveraging caching models. Even if it uses more code total between the CSS and markup, CSS is cached, markup is not, so if they visit more than one page, you've pre-cached the appearance of subpages resulting in less bandwidth used and faster rendering.