Таблица

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

Стиль строки таблицы при наведении на неё курсора мыши задаётся с помощью псевдокласса :hover, который добавляется к селектору tr . В правилах стиля добавляем свойство background для желаемого цвета фона и color для цвета текста, как показано в примере 1.

Пример 1. Использование псевдокласса :hover

В данном примере при наведении на строку у неё меняется цвет фона и текста. Результат примера продемонстрирован на рис. 1.

Если у таблицы содержится заголовок, что встречается довольно часто, то строка с заголовком также будет выделяться при наведении, а это может быть нежелательным. Для выделения только нужных строк следует модифицировать таблицу, вставив элементы и и к селектору добавив tbody (пример 2).

Пример 2. Использование псевдокласса :hover

Результат данного примера показан на рис. 2.

Рис. 2. Таблица с заголовком и выделенной строкой

См. также

• :focus на мобильных устройствах
• Анимация ссылок при наведении
• Виды ссылок
• Всплывающая подсказка
• Использование :hover
• Нормальное позиционирование
• Организация данных с помощью таблиц
• Переходы с помощью :hover
• Подсветка строк и колонок таблицы
• Псевдокласс :hover
• Псевдоклассы в CSS
• Работа с типографикой
• Селекторы CSS
• Состояния кнопок
• Сочетание с псевдоклассами
• Таблицы
• Таблицы
• Таблицы в HTML
• Типы ссылок

Источник

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

При большом количестве строк в таблице бывает трудно сопоставлять данные из разных колонок между собой. Для этого требуется визуально отделить одну строку таблицы от другой — либо с помощью линий, либо за счет добавления фонового цвета.

Вначале разберем вариант использования горизонтальных линий. На рис. 1 приведен один из возможных способов акцентирования внимания на строках таблицы. Каждая строка сверху и снизу обрамляется линией, за счет этого взгляд посетителя скользит вдоль них и не перескакивает на соседнюю строку. При этом данные, находящиеся в колонках, также связываются между собой, но уже за счет одновременного выравнивания по левому краю и пустого пространства между колонками.

Рис. 1. Таблица со строками, выделенными с помощью линий

Линии между строк устанавливаются достаточно просто, для этого следует добавить стилевое свойство border-bottom к селектору TD . Если вокруг таблицы содержится рамка, то нижняя граница получится удвоенной толщины. В этом случае можно убрать нижнюю линию у последней строки или скрыть нижнюю границу у таблицы (пример 1).

Пример 1. Разделение строк таблицы линиями

        
 
 
2004
2005
2006
 
 
Рубины
43
51
79
 
 
Изумруды
28
34
48
 
 
Сапфиры
29
57
36
 
 
  

В данном примере вертикальные линии между ячейками заголовка добавляются за счет стилевого свойства border , которое используется для селектора TH . При этом возникает пустое пространство толщиной один пиксел между границей таблицы и фоновой областью заголовка.

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

Рис. 2. Таблица со строками, выделенными с помощью цвета и линий

Цвет фона нечетных строк определяется путем изменения цвета всей таблицы. Но поскольку для выборочных строк (для которых добавлен параметр class=»even» ) устанавливается индивидуальный цвет, то он «перекрывает» цвет фона таблицы. За счет этого и получается чередование цветных строк.

Пример 2. Выделение строк таблицы цветом

        
 
 
2004
2005
2006
 
 
  
  
  

В данном примере двойной линии внизу таблицы не возникает в результате применения свойства border-collapse со значением collapse к селектору TABLE . Этот параметр отслеживает появление двойных линий в местах соприкосновения ячеек и заменяет их одинарными линиями. Заметим, что в разных браузерах могут возникнуть разночтения по поводу цвета оставляемых линий в том случае, если цвет границы вокруг таблицы не совпадает с цветом линий под строками.

Источник

Html заливка строки цветом

Мы привыкли, что таблица состоит из строк и столбцов и, вставляя таблицу в Word, мы указываем 3 столбца на 2 строки. Вставляя таблицу на HTML-страницу, сначала мы должны показать что сейчас будет таблица. Для этого воспользуемся тэгом TABLE>. Далее указываем, что сейчас будет строка, используя тэг TR>. А в этой строке будет три ячейки, и мы пишем три раза TD>…TD>.

 
 /*начало таблицы*/
 
 /*начало строки*/
 
… /*первая ячейка*/
 
… /*вторая ячейка*/
 
…/*третья ячейка*/
 /*конец строки*/ 
 /*начало строки*/
 
… /*первая ячейка*/
 
… /*вторая ячейка*/
 
…/*третья ячейка*/
 /*конец строки*/ /*конец таблицы*/ 

 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 

 
 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 

 
 
 
 
 
 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 

 
 
 
 
 
 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 
2
 
Иван Петров
 
8-918-964-70-11
 
3
 
Афоня Ивлев
 
8-961-594-12-45
 

 
 
 
 
 
 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 
2
 
Иван Петров
 
8-918-964-70-11
 
3
 
Афоня Ивлев
 
8-961-594-12-45
 

 
 
 
 
 
 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 
2
 
Иван Петров
 
8-918-964-70-11
 
3
 
Афоня Ивлев
 
8-961-594-12-45
 

 
 
 
 
 
 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 
2
 
Иван Петров
 
8-918-964-70-11
 
3
 
Афоня Ивлев
 
8-961-594-12-45
 

 
 
 
 
 
 
 
№
 
Фамилия
 
Номер телефона
 
1
 
Фрося Бурлакова
 
8-952-987-13-20
 
2
 
Иван Петров
 
8-918-964-70-11
 
3
 
Афоня Ивлев
 
8-961-594-12-45