Как правильно описать таблицу средствами CSS ?

@vlad-55 · Регистрация: 21.02.2009

Студворк — интернет-сервис помощи студентам

Простейшая таблица:

HTML5
1
2
3
4
5
6
7
8
<div align="center">
<table>
    <tr>
        <td>Первая</td>
        <td>Вторая</td>
    </tr>
</table>
</div>

Требуется задать через CSS параметры именно этой таблицы (если их на странице несколько, то что бы относилось только к этой). Такие параметры: ширину таблицы вцелом и цвет фона ячейки «Первая».

Мне представляется, что это можно сделать как-то через идентификатор, и ещё как-то через указание класса, но как именно, не пойму, а хотелось бы узнать оба варианта!

Что добавить в HTML код и что прописать в вынесенный в отдельный файл CSS ?

@Dimedrol · 15.03.2012, 11:44

HTML5
1
2
3
4
5
6
<table class="first">
        <tr>
                <td>Первая</td>
                <td>Вторая</td>
        </tr>
</table>

CSS
1
2
3
4
5
6
.first {
width:400px;
}
.first td:first-child {
background-color:red;
}

@vlad-55 · 15.03.2012, 11:54 **[ТС]**

Спасибо!

А как быть, если ячеек будет много, и надо определить не первую и не последнюю, а четвертую?

Например,

HTML5
1
2
3
4
5
6
7
8
9
<table class="first">
        <tr>
                <td>Первая</td>
                <td>Вторая</td>
                <td>Третья</td>
                <td>Четвертая</td>
                <td>Пятая</td>
        </tr>
</table>

@Daredevi1 · 15.03.2012, 12:02

В сss3 есть псевдокласс :nth-child

CSS
1
2
3
.first td:nth-child(4) {
  background-color:red;
}

@Dimedrol · 15.03.2012, 12:06

Ой, там в CSS3 есть счетчик элементов, но он не будет работать во многих браузерах, по-этому пока по старинке - указывать класс для нужных элементов.
А по поводу CSS3

CSS
1
2
3
:nth-child( { number expression | odd | even } ) {
declaration block
}

Работает в FF 3.5+, Safari 3.1+ , Opera 9.5+, Chrome 2+. Всеми любимый IE опять отличился, даже в восьмой версии нет поддержки.

Добавлено через 33 секунды
Daredevi1, ты меня опередил

@vlad-55 · 15.03.2012, 12:19 **[ТС]**

Вот тут я чего то не уверенно понял.

Как конкретно сейчас следует сделать запись, чтобы она обрабатывалась любым браузером и при этом адресовалась к конкретной ячейке в любом столбце (допустим, в таблице три столбца и пять строк, адресуемся к четвертой строке во втором столбце)?

Может, в коде этой ячейки нужна пометка?

@Lane · 15.03.2012, 17:30

Можно использовать

CSS
1
display: table;

и подобное.. Для разметки понадобится только три дива..

Новые блоги и статьи Все статьи Все блоги /
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787
	15.03.2012, 12:19 [ТС]
	Вот тут я чего то не уверенно понял. Как конкретно сейчас следует сделать запись, чтобы она обрабатывалась любым браузером и при этом адресовалась к конкретной ячейке в любом столбце (допустим, в таблице три столбца и пять строк, адресуемся к четвертой строке во втором столбце)? Может, в коде этой ячейки нужна пометка? 0