HTML+CSS+JavaScript

Короче такая проблема. Когда-то, очень давно, прошел экспресс-курсы для самоучек в Инете, Web Design Tutorial называются.
Научился рисовать, хоть и примитивно, дизайн элементов в фотошопе и резать в Image Ready.По началу всё было хорошо. Я даже восхищался своими первыми творениями.
Но позже, а точнее сейчас, когда пришёл первый опыт в разработке веб-страниц, понял что, что-то здесь не так. Легкость в управлении контентом нулевая, загрузка страниц заторможенная.
И вот решил восоздать заброшенное и переделать на новый лад.
Но как сделать оптимально, не знаю.
Всё что я рисовал, нарезалось на множество мелких кусков, страница состояла из множества таблиц, те из множества ячеек и в каждой по кусочку мозаики.
Вот приведу ссылку:
http://www.codexomega.gwgaming.net/starwars/gallery.php

Страница состоит из картинок, каждая в рамке, а вот код для одной картинки:

<!-- Image4 --> <td align="center"> <table width="140" border="0" align="center" cellpadding="0" cellspacing="0">   <tr>     <td colspan="5"> <img src="assets/images/box_01.gif" width="140" height="26" alt="" /></td>   </tr>   <tr>     <td rowspan="4"> <img src="assets/images/box_02.gif" width="18" height="174" alt="" /></td>     <td  background="assets/images/box_03.gif" width="104" height="123"" colspan="3">       <div align="center"><a href="images/republic_guard.jpg" target="_blank"><img src="images/thumbs/tn_republic_guard.jpg" width="100" height="119" border="0" /></a></div></td>     <td rowspan="4"> <img src="assets/images/box_04.gif" width="18" height="174" alt="" /></td>   </tr>   <tr>     <td colspan="3"> <img src="assets/images/box_05.gif" width="104" height="21" alt="" /></td>   </tr>   <tr>     <td rowspan="2"> <img src="assets/images/box_06.gif" width="4" height="30" alt="" /></td>     <td background="assets/images/box_07.gif" width="96" height="22"><div align="center" class="style2">Republic Guard </div></td>     <td rowspan="2"> <img src="assets/images/box_08.gif" width="4" height="30" alt="" /></td>   </tr>   <tr>     <td> <img src="assets/images/box_09.gif" width="96" height="8" alt="" /></td>   </tr> </table> </td> <!-- End Image4 -->

А у меня их там 10!

Одна только рамка состоит из 9 мелких частей, а каждая часть - это отдельная картинка...

Есть-ли что нибудь получше этих таблиц?
Спасибо.

получше таблиц нет ничего... разв что... в общем в HTML врядли возможно реализовать чтото лучше, а вот в php, можно сделать всё намного проще, так что начинай поверхостное изучение php, в HTML многого не добьёшся...

Ошибка номер 1:
Все картинки не оптимизированы и геометрически искажены по горизонтали на половину, хотя никакой амбал с дубиной не мешает откусить по 50 пикселей слева и справа :-).
Ошибка номер 2:
После верстки в ImageReady используйте повторную оптимизацию графики и кода - все, что может стать фоном, должно им стать (например рамочки), картинки обрезаны и пережаты под нужное время загрузки.
Все персонажы находятся на фоне одного цвета, посему обрежте все картинки впритык, а фон ячейки покрасте в цвет фона картинки. 15 кило на мелкость - енто муветон. Кроме того, все картинки достаточно мелкие, в этом случае приемлемее (с точки зрения резкости) использовать gif формат.
Ошибка номер 4:
Зачем в качестве фона использовать картинку одного цвета в размер ячейки ?
Ошибка номер 5:
Слишком много не нужных ячеек, акуратнее с нарезкой :-).

Итог: 7 килобайт против ваших 15-20

гыксь - гениально! :))))) я чёт подумал что всё это и так само собой разумеется и даж код не глянул :)))

Гениально было бы, есиб вы написали, как это же самое сделать при помощи поверхносно изученного PHP :-). А это обычная оптимизация.

чел не умничай :) мы ж как никак собряться по оптимизу! :))
а про php я имел ввиду не оптимизацию а вывод нужных фоток по запросу... а не потоком галереи...

Спасибо.
Буду исправлять как время появится.