Название документа

CSS: Оформление таблиц

Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

• separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
• collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.

     table, td, th < border: 4px outset blue; border-spacing: 5px; >.first  
Имя
Фамилия
 
Гомер
Симпсон
 
Мардж
Симпсон
 
 
 
Имя
Фамилия
 
Гомер
Симпсон
 
Мардж
Симпсон
 
   

Размер таблицы

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

Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height, задавая нужные размеры или самой таблице или ячейкам:

Выравнивание текста

По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align :

• top: текст выравнивается по верхней границе ячейки
• middle: выравнивает текст по центру (значение по умолчанию)
• bottom: текст выравнивается по нижней границе ячейки

     table, td, th < border: 1px solid black; border-collapse: collapse; >table < width: 70% >td < text-align: right; >th < height: 50px; >.test1 < vertical-align: top; >.test2  
Имя
Фамилия
 
Гомер
Симпсон
 
Мардж
Симпсон
 
   

Чередование фонового цвета строк таблицы

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

     table < width: 70%; border-collapse: collapse; >td, th < border: 1px solid #98bf21; padding: 3px 7px 2px 7px; >th < text-align: left; padding: 5px; background-color: #A7C942; color: #fff; >.alt td  
Имя
Фамилия
Положение
 
Гомер
Симпсон
отец
 
Мардж
Симпсон
мать
 
Барт
Симпсон
сын
 
Лиза
Симпсон
дочь
 
   

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

Изменение фона строки при наведении курсора

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

Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

Выравнивание таблицы по центру

Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:

Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник

Чередование фонового цвета строк таблицы, пунктов списка и других 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 

Источник