Стили таблицы - строки и столбцы

[erelen]

У меня есть примерно такой код:

<table>
  <col class='id' />
  <col class='name' />
  <col class='info' />

  <tr class=odd> <td>1</td> <td>Пупкин</td> <td>...</td> </tr>
  <tr class=evn> <td>2</td> <td>Иванов</td> <td>...</td> </tr>
  <tr class=odd> <td>3</td> <td>Петров</td> <td>...</td> </tr>
  <tr class=evn> <td>4</td> <td>Сидоров</td> <td>...</td> </tr>
</table>

Я могу определить цвет фона чётных и нечётных строк, задавая его через классы odd и env соответственно.

Я могу определить цвет фона колонок задавая его через id, name и info соответственно.

Но у меня решительно никак не получается делать это одновременно. То есть я хочу, чтобы первая колонка была жёлтенькой. Для чётных (то есть для id, evn) строк посветлее, а для нечётных (то есть для id, odd) - потемнее. Имя было синенькое. Для чётных посветлее, а для нечётных - потемнее. И т.д.

Может кто-нибудь показать, как это сделать?

[spdif]

Если честно то кагбэ не совсем понятно...

<style>
* { 
	padding: 5px;
}
table { 
	border-collapse: collapse;
	border: 1px solid #000000;
}
tr.odd, td.odd { 
	background: #999999;
}
td.odd, tr.evn { 
	color: #333333;
}
tr.evn, td.evn { 
	background: #666666;
}
tr.odd, td.evn { 
	color: #cccccc;
}
</style>

<table>
	<tr class="odd"><td>1</td><td class="odd">Пупкин</td><td class="evn">...</td></tr>
	<tr class="evn"><td class="odd">2</td><td class="evn">Иванов</td><td>...</td></tr>
	<tr class="odd"><td>3</td><td class="odd">Петров</td><td class="evn">...</td></tr>
	<tr class="evn"><td class="odd">4</td><td class="evn">Сидоров</td><td>...</td></tr>
</table>

[XAOPT]

Ой ужас какой. Не используйте никогда col. Задавайте напрямую ячейке:

<td class=''>4</td>

Edited November 14, 2008 by XAOPT

[erelen]

  spdif said:

Если честно то кагбэ не совсем понятно...

  XAOPT said:

Ой ужас какой. Не используйте никогда col. Задавайте напрямую ячейке:

<td class=''>4</td>

Сейчас я так и делаю - задаю class='id' (name, info) в каждой строке для каждой ячейки. Беда в том, что строк Очень много. А данных в них мало. То есть 80% кода занимают эти <td class=''>. Пот поэтому я и задумался о col`ах.

Почему их так настоятельно не рекомендуется использовать?

Edited November 14, 2008 by erelen

[XAOPT]

  Quote

Почему их так настоятельно не рекомендуется использовать?

Потому, хотя бы, что далеко не все броузеры их воспринимают. В мозиллке тестили, например?

[kalyaka-malyaka]

я, конечно, извращенка

план такой:

1. делаем классы для трех колонок с разноцветным background-color

2. в фотошопе картинку 1х1 px png24 черную с нужной степенью прозрачности, чтобы при наложении на фоновые цвета колонок получалось чуть темнее.

3. добавляем в head следующее:

<script type="text/javascript">
function makeStripy(tabClass) 
{
   var tabs = document.getElementsByTagName("table");
   for (var e = 0; e < tabs.length; e++) 
      if (tabs[e].className == tabClass) 
      {
         var rows = tabs[e].getElementsByTagName("tr");
         for (var i = 0; i < rows.length; i++) // строки нумеруются с 0
            rows[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows");
      }
}

</script>

это скриптик, который "полосатит" таблицу. предполагается, что таблице будет присвоен class="Stripy" и что будут созданны 2 класса - oddrows и evenrows - для четных и нечетных строк. в эти классы прописываем "есть фоновая картинка" и "нет картинки". вроде этого:

table.stripy tr.oddrows td {
background-image:url(images/1x1.png);
}
table.stripy tr.evenrows td {
background-image:none;
}

4. любым доступным способом объясняем ie-шке, что png-24 надо понимать (если что, скажите, способ дам).

проверила в ie, опере и мозилле. работает.

сорри, если слишком через анус