Как менять фон ячеек таблицы

[Psionic Vision]

1. Как динамически менять фон ячейки таблицы при наведении на нее мышкой?
2. Как менять стиль бордюра (цвет, толщину), и работает ли это в Internet Explorer 5x?

[RaZEr]

<td onmouseover="this.style.backgroundColor = '#ffffff';">

[Psionic Vision]

Спасибочки. 5 баллов твои :-).

Можно дешевше... Через CSS

[Psionic Vision]

medved2002
Болтаем, шоб набрать публикации? Это уже флейм... Мой вопрос состоял не в том через что это сделать, а КАК это сделать через CSS

Первоначальное сообщение от Neo
Болтаем, шоб набрать публикации? Это уже флейм...

Не угадал. Мне публикации как-то не вперлись.

Первоначальное сообщение от Neo
а КАК это сделать через CSS

Да ну? хоть написал бы тогда что черехз CSS

Первоначальное сообщение от Neo
Мой вопрос состоял не в том через что это сделать,

Просто то что написал Razer рабочее, посему я только сказал что есть еще один путь, без JavaScripta только средствами CSS.

<style>
td.i{height:20px;width:30px;}
td.i a{display:block;height:100%;background-color: #ddd;}
td.i a:hover{background-color: #eee;}
</style>
<table>
<tr>
<td class="i"><a href=""></a></td>
<td class="i"><a href=""></a></td>
<td class="i"><a href=""></a></td>
<td class="i"><a href=""></a></td>
</tr>
</table>

[Psionic Vision]

td.i{height:20px;width:30px;}

Зачем здесь указывать размер?

td.i a{display:block;height:100%;background-color: #ddd;}

А что такое display:block? и что дает "a"?

td.i a:hover{background-color: #eee;}

Опять непонятно - что такое А?

Добавлено через 3 минуты:
Я попробовал пример - неплохо, но есть одно но: Мне нужно, чтобы стиль ячейки и ссылки менялся раздельно. И мне совсем не нужно, чтобы ячейка являлась ссылкой.

Добавлено через 8 минут:
Почему вот это не меняет цвет ячеек?

<style>
td.i {display:block; height:20px; width:40px; background-color: #ddd;}
td:hover {background-color: black}
a:hover {text-decoration: none}
</style>
<table border=0>
<tr>
<td class="i"><a href="">1</a></td>
<td class="i"><a href="">2</a></td>
<td class="i"><a href="">3</a></td>
<td class="i"><a href="">4</a></td>
</tr>
</table>

Первоначальное сообщение от Neo
Зачем здесь указывать размер?

А мне влом было забивать его инфой. и чтоб он был виден - указал размер.

Первоначальное сообщение от Neo
А что такое display:block?

display указвает как будет отображаться элемент. Два основных варианта:
inline(значение по умолчанию как у тега <span>) - линия
block(значение по умолчанию как у тега <div>) - блок.
Остальное кури в www.w3.org

Первоначальное сообщение от Neo
и что дает "a"?
Добавлено через 8 минут:
Почему вот это не меняет цвет ячеек?

Конструкция td.i{} a говорит IE что всеги теги вложенные в тег td класса i
будут иметь следующие параметры отображения. И не работает это у тебя потому
что у тега td нет насколько мне известно псевдоселектора hover

Первоначальное сообщение от Neo
Добавлено через 3 минуты:
Я попробовал пример - неплохо, но есть одно но: Мне нужно, чтобы стиль ячейки
и ссылки менялся раздельно. [/B]

насколько раздельно? что бы и бек у ссылки менялся тоже? и в цвет отличный от td? Тогда лучше вариант Razera. или вписывать в тег <a> вписывать что-нибудь еще (типа span) и
извращаться над конструкциями css рода a:hover span. Я тут уже давал ссылки по css читай там

Первоначальное сообщение от Neo
И мне совсем не нужно, чтобы ячейка являлась ссылкой.

См. выше

Добавлено через 2 минуты:
ошибочка
Конструкция td.i a{} говорит IE что всеги теги &lt;а&gt; вложенные в тег td класса i будут иметь следующие параметры отображения.

[Psionic Vision]

Спасибо. А почему CSS предпочтительней чем JavaScript?

Не всегда лучше.
А когда лучше, читай про безтабличную верстку. ссылки уже давал в форуме

[RaZEr]

А когда лучше, читай про безтабличную верстку

Ну так и чем все-таки лучше ?

А ты таки прочитал?

[RaZEr]

Что прочитал ?

Ссылки про безтабличную верстку.

А лучше ну например в этом случае:

Javascript:

<table cellpadding="0" cellspacing="0" border="0" width="100px">
	<tr>
		<td bgcolor="#dddddd" onmouseover="this.style.backgroundColor = '#ffffff';document.getElementById('i1').style.visibility='visible';" onmouseout="this.style.backgroundColor = '#ddd';document.getElementById('i1').style.visibility='hidden';">
<a href=""><img src="http://www.imho.ws/images/vb_bullet.gif" align="middle" style="visibility:hidden;" id="i1">aaaaa</a>
</td>
	</tr>
	<tr>
		<td bgcolor="#dddddd" onmouseover="this.style.backgroundColor = '#ffffff';document.getElementById('i2').style.visibility='visible';" onmouseout="this.style.backgroundColor = '#ddd';document.getElementById('i2').style.visibility='hidden';">
<a href=""><img src="http://www.imho.ws/images/vb_bullet.gif" align="middle" style="visibility:hidden;" id="i2">bbbbb</a>
</td>
	</tr>
	<tr>
		<td bgcolor="#dddddd"  onmouseover="this.style.backgroundColor = '#ffffff';document.getElementById('i3').style.visibility='visible';" onmouseout="this.style.backgroundColor = '#ddd';document.getElementById('i3').style.visibility='hidden';">
<a href=""><img src="http://www.imho.ws/images/vb_bullet.gif" align="middle" style="visibility:hidden;" id="i3">ccccc</a>
</td>
	</tr>
	<tr>
		<td bgcolor="#dddddd" onmouseover="this.style.backgroundColor = '#ffffff';document.getElementById('i4').style.visibility='visible';" onmouseout="this.style.backgroundColor = '#ddd';document.getElementById('i4').style.visibility='hidden';">
<a href=""><img src="http://www.imho.ws/images/vb_bullet.gif" align="middle" style="visibility:hidden;" id="i4">ddddd</a>
</td>
	</tr>
</table>

CSS:

<style>
div.g{width:100px; float:left;}
div.g a{display:block;background-color: #ddd;padding-left:20px;}
div.g a:hover{background:#fff url(http://www.imho.ws/images/vb_bullet.gif) no-repeat 0% 50%;padding-left:20px;}
</style>
<div class="g">
<a href="">aaaa</a><a href="">bbbb</a><a href="">cccc</a><a href="">dddd</a>
</div>

[RaZEr]

Да только в случае с JS это было бы примерно так:

<a href="" onmouseover="rollover(this,1);" onmouseout="rollover(this,0);">aaaa</a>

а не как ты расписал.

PS: Причем в отличии от CSS небыло бы необходимости использовать тег "a".

Э неееее.
Надо было бы уместить меню слева и и текст справа для этого я и вписал таблицу.
Насчет тега а согласен, но я тебе привел пример когда нужны ссылки.

[RaZEr]

Надо было бы уместить меню слева и и текст справа для этого я и вписал таблицу

ну-ну

Гмм? а чего смешного?

[RaZEr]

Твоя агрументация ...

PS: Ну или я не понял суть предпоследней фразы ввиду отсутствия знаков препинания.

ясно