Главная » Языки программирования

Таблица

На чтение 6 мин
Содержание
  1. Строки таблицы
  2. Чередование фонового цвета строк таблицы, пунктов списка и других html-элементов с помощью CSS и псевдокласса nth-child
  3. Как сделать полосатую таблицу на HTML, CSS, JS, PHP
  4. Полосатая таблица на CSS
  5. Полосатая таблица на JS
  6. Полосатая таблица на jQuery
  7. Вывод классов с помощью PHP

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

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

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

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

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

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

        
 
 200420052006 
 
Рубины435179 
 
Изумруды283448 
 
Сапфиры295736

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

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

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

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

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

        
 
 200420052006

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

Источник

Чередование фонового цвета строк таблицы, пунктов списка и других html-элементов с помощью CSS и псевдокласса nth-child

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

С появлением CSS3 эффекта чередования фонового цвета можно добиться исключительно средствами CSS, не изменяя HTML-разметки документа. Для этого используется псевдокласс nth-child , который позволяет выбрать все четные или нечетные элементы, используя значения odd — нечетные или even — четные элементы, либо числовое выражение an+b , где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2. и так далее. Перейдем от теории к практике.

Допустим у Вас на сайте есть какая-то большая таблица. Например таблица футбольного чемпионата:

М Команда И В Н П Заб Проп О
1 Зенит 30 20 7 3 58 17 67
2 ЦСКА 30 19 3 8 67 27 60
3 Краснодар 30 17 9 4 52 27 60
4 Динамо 30 14 8 8 53 36 50
5 Рубин 30 13 9 8 39 33 48
6 Спартак 30 12 8 10 42 42 44
7 Локомотив 30 11 10 9 31 25 43
8 Мордовия 30 11 5 14 22 43 38
9 Терек 30 10 7 13 30 30 37
10 Кубань 30 8 12 10 32 36 36
11 Амкар 30 8 8 14 25 42 32
12 Уфа 30 7 10 13 26 39 31
13 Урал 30 9 3 18 31 44 30
14 Ростов 30 7 8 15 27 51 29
15 Торпедо 30 6 11 13 28 45 29
16 Арсенал Тула 30 7 4 19 20 46 25

HTML-код таблицы с минимальным оформлением:

М Команда И В Н П Заб Проп О
1 Зенит 30 20 7 3 58 17 67
2 ЦСКА 30 19 3 8 67 27 60
3 Краснодар 30 17 9 4 52 27 60
4 Динамо 30 14 8 8 53 36 50
5 Рубин 30 13 9 8 39 33 48
6 Спартак 30 12 8 10 42 42 44
7 Локомотив 30 11 10 9 31 25 43
8 Мордовия 30 11 5 14 22 43 38
9 Терек 30 10 7 13 30 30 37
10 Кубань 30 8 12 10 32 36 36
11 Амкар 30 8 8 14 25 42 32
12 Уфа 30 7 10 13 26 39 31
13 Урал 30 9 3 18 31 44 30
14 Ростов 30 7 8 15 27 51 29
15 Торпедо 30 6 11 13 28 45 29
16 Арсенал Тула 30 7 4 19 20 46 25

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

М Команда И В Н П Заб Проп О
1 Зенит 30 20 7 3 58 17 67
2 ЦСКА 30 19 3 8 67 27 60
3 Краснодар 30 17 9 4 52 27 60
4 Динамо 30 14 8 8 53 36 50
5 Рубин 30 13 9 8 39 33 48
6 Спартак 30 12 8 10 42 42 44
7 Локомотив 30 11 10 9 31 25 43
8 Мордовия 30 11 5 14 22 43 38
9 Терек 30 10 7 13 30 30 37
10 Кубань 30 8 12 10 32 36 36
11 Амкар 30 8 8 14 25 42 32
12 Уфа 30 7 10 13 26 39 31
13 Урал 30 9 3 18 31 44 30
14 Ростов 30 7 8 15 27 51 29
15 Торпедо 30 6 11 13 28 45 29
16 Арсенал Тула 30 7 4 19 20 46 25

Можно сделать акцент на столбцы оформив вертикальную зебру. Для этого используется все тот же псевдокласс nth-child и применяем его к элементам td . А при наведении на строку выделять ее цветом с помощью псевдокласса hover :

М Команда И В Н П Заб Проп О
1 Зенит 30 20 7 3 58 17 67
2 ЦСКА 30 19 3 8 67 27 60
3 Краснодар 30 17 9 4 52 27 60
4 Динамо 30 14 8 8 53 36 50
5 Рубин 30 13 9 8 39 33 48
6 Спартак 30 12 8 10 42 42 44
7 Локомотив 30 11 10 9 31 25 43
8 Мордовия 30 11 5 14 22 43 38
9 Терек 30 10 7 13 30 30 37
10 Кубань 30 8 12 10 32 36 36
11 Амкар 30 8 8 14 25 42 32
12 Уфа 30 7 10 13 26 39 31
13 Урал 30 9 3 18 31 44 30
14 Ростов 30 7 8 15 27 51 29
15 Торпедо 30 6 11 13 28 45 29
16 Арсенал Тула 30 7 4 19 20 46 25

Тоже самое можно сделать и для списков. В статье горизонтальное меню с помощью CSS мы сделали несколько вариантов горизонтального меню. Вот одно из них:

Это меню можно немного оживить с помощью чередования фонового цвета у соседних пунктов. Для этого нужно всего лишь добавить одну строчку кода:

Псевдокласса nth-child позволяет применять различные свойства не только к четным или нечетным элементам, но и к конкретным элементам. Так, например, если необходимо изменить цвет шрифта только в первом пункте списка, то поможет следующее CSS правило:

Если надо выделить все строки таблицы начиная с третьей то достаточно такой строчки:

tr:nth-child (n + 3) background-color: silver;
>

Можно выделить какой-то диапазон, например с четвертого по седьмой:

tr:nth-child (n+4):nth-child (-n+7) font-size: 20px;
>

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

Пробуйте и предлагайте свои варианты. На этом все, до новых встреч!

Источник

Как сделать полосатую таблицу на HTML, CSS, JS, PHP

Сборник методов как сделать HTML таблицу «полосатой» или, как её еще называют «таблица с зеброй».

Полосатая таблица на CSS

В CSS можно применить псевдокласс :nth-child он используется для добавления стиля к элементам на основе нумерации.

 
Last Name Username 
   
1 Mark Otto @mdo 
 
2 Jacob Thornton @fat 
 
3 Larry the Bird @twitter 
 
4 Jake Propper @vso 
  
/* Нечетные строки */ #table tbody tr:nth-child(odd) < background: #fff; >/* Четные строки */ #table tbody tr:nth-child(even)

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

/* Строки 1,4,7. */ #table tbody tr:nth-child(3n+1) < background: #f2fff5; >/* Строки 2,5,8. */ #table tbody tr:nth-child(3n+2) < background: #ffeaea; >/* Строки 3,6,9. */ #table tbody tr:nth-child(3n+3)

Полосатая таблица на JS

Скрипт перебирает строки таблицы и добавляет им классы odd и even .

var table = document.getElementById('table'); var table_body = table.getElementsByTagName('tbody'); for (var h = 0; h < table_body.length; h++) < var table_tr = table_body[h].getElementsByTagName('tr'); for (var i = 0; i < table_tr.length; i++) < if (i%2) < table_tr[i].className = 'even'; >else < table_tr[i].className = 'odd'; >> >
/* Нечетные строки */ #table .odd < background: #fff; >/* Четные строки */ #table .even

Полосатая таблица на jQuery

Добавлением класса к строкам таблицы:

$('#table tbody tr:odd').addClass('odd'); $('#table tbody tr:even').addClass('even');

Или добавление CSS стилей:

$('#table tbody tr:odd').css('background', '#F7F7F7'); $('#table tbody tr:even').css('background', '#fff');

Вывод классов с помощью PHP

В скрипте используется префиксный инкремент ++$i для подсчёта строк и арифметический оператор % – деление по модулю.
Выражение $i%2 вернет « 1 » если число в переменной нечётное и « 0 » если чётное.

  "> "> "> "> 
Last Name Username 
  
1 Mark Otto @mdo 
 
2 Jacob Thornton @fat 
 
3 Larry the Bird @twitter 
 
4 Jake Propper @vso 
  
 /* Нечетные строки */ #table .odd < background: #fff; >/* Четные строки */ #table .even

Источник

Читайте также:  React typescript form input
Оцените статью
© 2023 Программирование