Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.53/15: Рейтинг темы: голосов - 15, средняя оценка - 4.53
2 / 2 / 0
Регистрация: 19.11.2019
Сообщений: 193

Изменить цвет фона таблицы в html через селектор

27.02.2020, 23:52. Показов 3166. Ответов 9

Студворк — интернет-сервис помощи студентам
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<table border="1">
    <tr>
        <th>Choose your plan</th>
        <th>Starter<br>10$</th>
        <th>Economy<br>20$</th>
        <th>Standard<br>40$</th>
        <th>Professional<br>60$</th>
    </tr>
    <tr>
        <td>Latter remark</td>
        <td align="center">+</td>
        <td align="center">+</td>
        <td align="center">+</td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td>Small for ask</td>
        <td align="center">+</td>
        <td align="center">+</td>
        <td align="center">+</td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td>At none neat </td>
        <td align="center">-</td>
        <td align="center">-</td>
        <td align="center">+</td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td>Any delicate</td>
        <td align="center">-</td>
        <td align="center">+</td>
        <td align="center">-</td>
        <td align="center">+</td>
    </tr>
    <tr>
        <td>To sure calm</td>
        <td align="center">-</td>
        <td align="center">-</td>
        <td align="center">+</td>
        <td align="center">+</td>
    </tr>
</table>
Нужно покрасить таблицу как на картинке, но запрещается
использовать классы и идентификатор.

Можно использовать селекторы!
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
27.02.2020, 23:52
Ответы с готовыми решениями:

Можно ли изменить цвет\поставить фон вокруг пространства ячеек таблицы?
Есть таблица-меню, для красоты увеличил расстояние между ячейками. Но цвет в в этом пространстве белый. Можно ли изменить его на другой или...

Возможно ли изменить цвет фона одно записи или ячейки в режиме таблицы?
Подскажите! Есть список клиентов и складов в базе. Есть функция подбора склада под клиента по опр. параметрам по кнопке. При...

Как изменить цвет фона, текста в Edit через ColorGrid?
Доброго времени, как изменить цвет фона, и цвет текста в Edit с помощью ColorGrid? Допустим если я выбираю цвет ForegroundColor то...

9
2 / 2 / 0
Регистрация: 19.11.2019
Сообщений: 193
27.02.2020, 23:53  [ТС]
Картинка
Миниатюры
Изменить цвет фона таблицы в html через селектор  
0
 Аватар для D_Vik
368 / 234 / 68
Регистрация: 19.07.2016
Сообщений: 833
28.02.2020, 00:12
Чего то не совсем понятно. Вы говорите нельзя использовать классы и ид но можно использовать селекторы... Ну остались ещё тэгнэймы и нтш:чилды.. Или ещё какая экзотика с переменными css.
0
2 / 2 / 0
Регистрация: 19.11.2019
Сообщений: 193
28.02.2020, 00:17  [ТС]
Цитата Сообщение от D_Vik Посмотреть сообщение
Чего то не совсем понятно. Вы говорите нельзя использовать классы и ид но можно использовать селекторы... Ну остались ещё тэгнэймы и нтш:чилды.. Или ещё какая экзотика с переменными css
Дали такое задание: "Реализовать с использованием стилей таблицу по образцу (Запрещается
использовать классы и идентификаторы). Использовать селекторы для
дочерних элементов"
0
 Аватар для D_Vik
368 / 234 / 68
Регистрация: 19.07.2016
Сообщений: 833
28.02.2020, 00:25
:nth-child четные (even) и нечетные (odd) , :nth-child(4) конкретный, наверное это подойдёт.
1
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
28.02.2020, 00:35
Лучший ответ Сообщение было отмечено Bohdan2 как решение

Решение

CSS
1
2
3
4
5
6
7
8
9
10
11
table{border:none}
td, th{border:1px solid white}
th{color:#ffffff}
tr td:first-child{background-color:#777777}
tr:nth-child(even) td{background-color:#cccccc}
tr:nth-child(odd) td{background-color:#eeeeee}
tr:nth-child(1) th:nth-child(1){background-color:#eeeeee}
tr th:nth-child(2){background-color:#cccccc}
tr th:nth-child(3){background-color:#aaaaaa}
tr th:nth-child(4){background-color:#555555}
tr th:nth-child(5){background-color:#333333}
Добавлено через 2 минуты
Я как увидел стартовый пост, сразу всё понял!
Bohdan2, цвета подберите сами.
1
 Аватар для D_Vik
368 / 234 / 68
Регистрация: 19.07.2016
Сообщений: 833
28.02.2020, 00:39
Ну по идее класс и идентификатор это тоже селектор.
0
2 / 2 / 0
Регистрация: 19.11.2019
Сообщений: 193
28.02.2020, 00:43  [ТС]
Цитата Сообщение от DrType Посмотреть сообщение
Я как увидел стартовый пост, сразу всё понял!
Благодарю вас
0
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
28.02.2020, 00:51
Bohdan2, подождите, у меня неправильно: в 4 строке надо
CSS
1
tr:nth-child(n+1) td:nth-child(1){background-color:#777777}

Не по теме:

Понял-то понял, да поторопился :(

1
2 / 2 / 0
Регистрация: 19.11.2019
Сообщений: 193
28.02.2020, 00:52  [ТС]
Цитата Сообщение от DrType Посмотреть сообщение
подождите, у меня неправильно:
Понял, спасибо.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
28.02.2020, 00:52
Помогаю со студенческими работами здесь

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

Как изменить цвет кнопки, на которую установлен селектор?
Добрый день! Хочу изменить цвет кнопки на которой установлен селектор, но после установки цвета селектор не работает. вот селектор...

Изменить цвет фона
Здравствуйте уважаемый знатоки ,подскажите пожалуйста как прописать на кнопке при его нажатии , чтоб изменился цвет фона поля к примеру...

Изменить цвет фона фрейма
Здравствуйте. Столкнулся с такой проблемой-есть страница с фреймами. Нужно изменить цвет фона определённого фрейма. Вот код...

Изменить цвет фона Edit
case WM_CTLCOLORSTATIC: if ((HWND)lParam == GetDlgItem(hWnd, ID_LIST)) { SetTextColor((HDC)wParam, 0x00FFFF); ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru