Color table html: Атрибут bgcolor | htmlbook.ru

Leave a Comment / Html / By /

Выделите HTML-таблицу альтернативными цветами строк с помощью селектора CSS

Введение

 

Иногда нам приходится выделять чередующиеся строки HTML-таблицы, чтобы привлечь внимание пользователя к важным данным. Есть много способов выделить чередующиеся строки, но самый простой способ — использовать селектор стилей CSS, который не требует никакого кода сценариев, такого как JavaScript или jQuery.

 

CSS предоставляет селектор nth-child(), который поддерживает ключевое слово нечетное и четное. Он также поддерживает арифметические операторы

 

Синтаксис

  1. :nth-child(number) {  
  2. объявлений css;
  3. }  

Использование селектора

 

Мы можем использовать селектор :nth-child вместе с HTML-тегами.

  1. // нечетное ключевое слово  
  2. th:nth-child(нечетный) {  
  3.   фон: красный;
  4. }  
  5. //четное ключевое слово  
  6. p:nth-child(even) {  
  7.   фон: синий;
  8. }  
  9. // арифметический оператор
  10. p:nth-child(4n+0) {  
  11.   фон: синий;
  12. }  

Пример

 

Предположим, что у нас есть таблица сотрудников, и мы хотим выделить чередующиеся строки

 

Шаг 1. Создание стиля CSS

 

Определите следующую таблицу стилей в разделе заголовка HTML-страницы, используя селектор nth-child для таблицы.

  1. <стиль>  
  2. таблица {  
  3.   семейство шрифтов: arial, без засечек;
  4.   граница-коллапс: коллапс;
  5.   ширина: 100 %;
  6. }  
  7.   
  8. тд, т {  
  9.   граница: 2 пикселя сплошная #DFFF00;
  10.   выравнивание текста: по левому краю;
  11.   отступ: 8 пикселей;
  12. }  
  13. tr:nth-child(even) {  
  14.   цвет фона: #DFFF00;
  15. }  
  16.   

Шаг 2. Создайте HTML-таблицу

  1. Employee

      
  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.   

Вывод приведенного выше кода будет выглядеть следующим образом:

 

 

Резюме

 

Я надеюсь, что этот блог был полезен для изучения того, как выделять альтернативные строки таблицы HTML с помощью CSS. Если у вас есть какие-либо предложения, пожалуйста, отправьте их, используя поле для комментариев.

  • HTML
  • CSS
  • Таблица Html
  • Селектор css
  • JavaScript
  • jQuery

Следующая рекомендуемая литература Как экспортировать HTML-таблицу в Excel с помощью плагина jQuery

css — Как изменить цвет фона в заголовке таблицы и исправить заголовок в HTML без JavaScript?

спросил

4 года, 7 месяцев назад

Изменено 4 года, 6 месяцев назад

Просмотрено 27 тысяч раз

Я пытался использовать это, но это не сработало.

 .заголовок {
  положение: фиксированное;
  сверху: 0;
  ширина: 100%;
}
  • html
  • css

Если следующий макет вашей основной таблицы:

 
, то вот что вы можете сделать:
 th{
  белый цвет;
  фон: черный;
}
 
, где -й  — заголовок таблицы.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *
 
 
  

  
Здесь что-то есть

  
Строка 1

  
Ряд 2

  
Строка 3