HTML+CSS+JavaScript

Простейшая таблица из трех столбцов и четырех строк:

<div align="center">     <table class="first">         <tr>             <td>1-1</td>             <td>2-1</td>             <td>3-1</td>         </tr>         <tr>             <td>1-2</td>             <td>2-2</td>             <td>3-2</td>         </tr>         <tr>             <td>1-3</td>             <td>2-3</td>             <td>3-3</td>         </tr>         <tr>             <td>1-4</td>             <td>2-4</td>             <td>3-3</td>         </tr>     </table> </div>

Чтобы задать её ширину, пишем во внешнем CSS файле:

.first {width:400px;}

А как определить конкретную ячейку данной таблицы, например в ячейке 2-3 задать фон background-color:red ?

(Читал, что в CSS3 есть счетчик элементов, но он не работает в IE и в некоторых версиях других браузеров, так что пока с ним лучше не связываться. А как решить этот вопрос, чтобы надежно воспроизводилось во всех браузерах современных версий? Может, у ячейки 2-3 сделать какую-то метку?)

Если не пользоваться средствами CSS3 (там кстати, тоже не все так просто, особенно со значениями по середине), то остается либо прописывать идентификатор, класс ячейки (повесив стиль на них), либо использовать средства JavaScript.

прописывать идентификатор, класс ячейки (повесив стиль на них)

Хотелось бы попробовать таким образом.

Можете привести пример?

<td id="MyCell">2-3</td>           и в стилях        #MyCell {background-color: red} либо <td class="ForMyCell">2-3</td>     и в стилях        td.ForMyCell {background-color: red}

Спасибо, ясно!

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

Каково Ваше мнение на сей счет?

Моё мнение совпадает с мнением буржуйских разработчиков спецификации CSS 2.1 - http://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html#id-selectors и спецификации CSS 3 - http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#id-selectors
Где написано, что использовать идентификаторы в качестве селекторов в CSS можно и нужно.

Таким образом, можно задать идентификатор для таблицы и весь перечень стилей переместить в файл стилей?

Типа:

<div align="center">     <table id="table1">         <tr>             <td>Ячейка</td>         </tr>     </table> </div>

В стилях:

#table1 {     border-top:                10px solid;     border-left:            10px solid;     border-top-color:         #FF9;     border-left-color:         #FF9;     }

Верно или что-то не так?

Верно

А можно ли в CSS перенести align="center" из контейнера <div align="center"> ?

можно:

div { width: 250px; height: 250px; background: red; margin: 0px auto; }

для ИЕ необходимо Доктайп указать (я использую XHTML доктайп, там это условие отрабатывается)

Вот это я не вполне понял.

Вот здесь Владимир55 (15.03.2012 в 15:43) имеется таблица, параметры которой заданы во внешнем CSS файле, а центрирование задано посредством <div align="center"> .

Что нужно дописать в CSS файле и как изменить код, чтобы освододиться от <div align="center"> ?

(С учетом того, что контейнеров div на странице может быть много?)

Если задать <div align="center"> фиксированную ширину (атрибут align убирать), то назначив стили:

div { margin: 0px auto; }

он будет выровнен по центру.

А если ширина блока должна растягиваться в зависимости от контента, то стоит воспользоваться этим примером.

Суть то я понял, а технику исполнения не очень.

Вот так имеется в виду:

div {  margin: 0px auto;  }  <div>      <table>          <tr>              <td>Ячейка</td>          </tr>      </table>  </div>

Но если контейнер div еще где-то используется и с какими-то иными настройками, то как записать, чтобы было ясно, что этот конкретный div относится только к этому объекту?

Как с вами интересно :-)

Про ячейку вы спросили. Вам ответили - http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=85704#post509888

Теперь спрашиваете про DIV.
Ответ будет таким же.

Сколько у вас ещё тегов на странице используется, для которых правила стилей указаны?
Про каждый будете задавать отдельный вопрос с целью получить один и тот же ответ? :-)))

Вам, случаем, администрация этого форума не приплачивает за каждый вопрос по 85 рублей, как "нашистам" за троллинг в ЖЖ и прочих соцсетях?
см. http://lj.rossia.org/users/kremlingate/

div.center {  margin: 0px auto;  }  <div class="center">      <table>          <tr>              <td>Ячейка</td>          </tr>      </table>  </div>

И заодно в div.center можно вписать всё, что вписывалось в идентификатор таблицы, упразднив этот идентификатор?

Было:

#table1 {      border-top:                10px solid;      border-left:            10px solid;      border-top-color:         #FF9;      border-left-color:         #FF9;      }

Будет:

div.center {   margin: 0px auto;       border-top:                10px solid;      border-left:            10px solid;      border-top-color:         #FF9;      border-left-color:         #FF9;  }

И идентификатр table1 больше не требуется.
Так?

Если Вы перенесёте все свойства таблицы в свойства блока div.center, то эти свойства будут относится к блоку div.center, а таблица получит свойства по умолчанию, потеряв все свойства границ, которые Вы хотели ей задать. Если Вы хотите, чтобы границы у блока div и у таблицы соответствовали Вашим требованиям, то придётся задавать формат границ для каждого отдельного элемента.