HTML+CSS+JavaScript

Как нужно переделать данный код, чтобы тегов <table не было а были <div. И как его можно оптимизировать?

<table width="100%" border="0" cellspacing="1" cellpadding="1"> <tr align=center bgcolor='#ABCAE9' class='navto'> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/soft/>софт</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/humor/>юмор</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/pictures/>картинки</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/games/>игры</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/security/>защита</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/updates/>наш сайт</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/world/>мир</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/webreview/>веб-обзор</a></td> </tr> <tr align=center bgcolor='#ABCAE9' class='navto'> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/news/>новости</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/articles/>статьи</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/sitecreated/>ваш сайт</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/music/>музыка</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/magazines/>журналы</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/icq/>icq</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/films/>фильмы</a></td> <td onmouseover="this.style.backgroundColor='#E9EFF5'" onmouseout="this.style.backgroundColor=''"><a href=/news/others/>разное</a></td> </tr> </table>

В файле стилей css прописано:

.navto a {color:#3A5EAC;FONT-size:11px;text-decoration:none} .navto a:hover {color:#3A5EAC;FONT-size:11px;text-decoration:underline}

?

Не понял смысла...
Что конкретно надо? И зачем менять <table> на <div>? И что же это даст?

Насчет таблиц тоже не понял, а вот с оптимизацией попробую помочь.
Я гляжу у тебя сдесь много раз повторяется одно и тоже:

onmouseover="this.style.backgroundColor='#E9EFF5'"  onmouseout="this.style.backgroundColor=''"

Можно сделать так:
добавь в свой код:

<script language="JavaScript"> <!-- function bgColorOver(obj) {obj.style.backgroundColor='#E9EFF5'} function bgColorOut(obj) {obj.style.backgroundColor=''} --> </script>

и замени все свои

onmouseover="this.style.backgroundColor='#E9EFF5'"  onmouseout="this.style.backgroundColor=''"

на:

onmouseover="bgColorOver(this)"  onmouseout="bgColorOut(this)"

Ну, имена функций можешь по короче сделать,.. как нравиться...

А зачем нужно менять <table> на <div>? Какая стоит задача? Сделать меню на слоях?
Я бы вообще не стал менять. В данном случае, применение таблиц вполне уместно. Или же у вас стоит какая то задача, условия которой мы не знаем?

Да... Мы вообще не хотим использовать <table, так как MSN search не индексирует инфу в table по словам
http://nbsp.ru/articles/2005/03/08/optimizatsiya_saitov_dlya_msn_search.html
Задаче 2:
1. Максимально уменьшит размер кода
2. Избавится от table

Не знаю, что имели ввиду создатели msbot… Возможно, здесь неточность интерпретации, но отказ от индексации сайтов, которые используют таблицы – это полная глупость.
Какое дело роботу используя я таблицы или нет. Если следовать этой интерпретации, то теги <table> запрещены.
И второе: есть <table>, нет <table>… Каким образом это может помочь роботу точнее индексировать страницу или отсеять поисковый спам? Не вижу ни одного такого способа - даже теоретического.
Скорее всего здесь имеет место ошибочная формулировка, либо MS очень рьяно взялась на внедрение спецификация CSS в массы.

Лично я точно не буду перепроектировать сайты и избавляться от таблиц. CSS еще слишком слабы, чтобы полностью заменить таблицы.

Вот меню на слоях

<html> <head> <style>   div.menu div{float: left; padding: 10px; margin: 1px; background-color: #DFDFFE} </style> </head> <body> <div class=menu> <div> <a href=/news/soft/>софт</a></div>  <div> <a href=/news/soft/>юмор</a></div>  <div> <a href=/news/soft/>картинки</a></div>  <div> <a href=/news/soft/>защита</a></div>  <div> <a href=/news/soft/><nobr>наш сайт</nobr></a></div>  <div> <a href=/news/soft/>мир</a></div>  <div> <a href=/news/soft/><nobr>веб-обзор</nobr></a></div>  <div> <a href=/news/soft/>софт</a></div>  <div> <a href=/news/soft/>юмор</a></div>  <div> <a href=/news/soft/>картинки</a></div>  <div> <a href=/news/soft/>защита</a></div>  <div> <a href=/news/soft/><nobr>наш сайт</nobr></a></div>  <div> <a href=/news/soft/>мир</a></div>  <div> <a href=/news/soft/><nobr>веб-обзор</nobr></a></div>  </div>

PS: Что касается поискового спама, то, в отличии от таблиц, именно CSS могут применятся для сокрытия информации (спама) на странице.