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..
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
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.