Скачать html-файл с примерами

Стили CSS для таблицы:

table {
	border-collapse: collapse;
	margin: 0px auto;
}
th, td {
	border: solid 1px #000;
	padding: 5px;
}

Горизонтальная зебра

CSS:

tbody tr:nth-child (odd) {
	background-color: #C9E4F6;/* фон нечетных строк */
}
tbody tr:nth-child (even) {
	background-color: #B4DAF2;/* фон четных строк */
}
МКомандаИВНПЗабПропО
1Зенит302073581767
2ЦСКА301938672760
3Краснодар301794522760
4Динамо301488533650
5Рубин301398393348
6Спартак3012810424244
7Локомотив3011109312543
8Мордовия3011514224338
9Терек3010713303037
10Кубань3081210323636
11Амкар308814254232
12Уфа3071013263931
13Урал309318314430
14Ростов307815275129
15Торпедо3061113284529
16Арсенал Тула307419204625

Вертикальная зебра

CSS:

td:nth-child(odd) { 
	background-color: #C9E4F6;/* фон нечетных столбцов */
}
td:nth-child(even) { 
	background-color: #B4DAF2;/* фон четных столбцов */
}
tr:hover td{
	background: #B4FFF2;/* фон строки при наведении */
}
МКомандаИВНПЗабПропО
1Зенит302073581767
2ЦСКА301938672760
3Краснодар301794522760
4Динамо301488533650
5Рубин301398393348
6Спартак3012810424244
7Локомотив3011109312543
8Мордовия3011514224338
9Терек3010713303037
10Кубань3081210323636
11Амкар308814254232
12Уфа3071013263931
13Урал309318314430
14Ростов307815275129
15Торпедо3061113284529
16Арсенал Тула307419204625

Выделяем все строки начиная с третьей

CSS:

tr:nth-child(n+3) { 
	background-color: silver;
}
МКомандаИВНПЗабПропО
1Зенит302073581767
2ЦСКА301938672760
3Краснодар301794522760
4Динамо301488533650
5Рубин301398393348
6Спартак3012810424244
7Локомотив3011109312543
8Мордовия3011514224338
9Терек3010713303037
10Кубань3081210323636
11Амкар308814254232
12Уфа3071013263931
13Урал309318314430
14Ростов307815275129
15Торпедо3061113284529
16Арсенал Тула307419204625

Выделяем диапазон строк

CSS:

tr:nth-child(n+4):nth-child(-n+7) { 
	background-color: #cceed6;
	font-weight: bold;
}
МКомандаИВНПЗабПропО
1Зенит302073581767
2ЦСКА301938672760
3Краснодар301794522760
4Динамо301488533650
5Рубин301398393348
6Спартак3012810424244
7Локомотив3011109312543
8Мордовия3011514224338
9Терек3010713303037
10Кубань3081210323636
11Амкар308814254232
12Уфа3071013263931
13Урал309318314430
14Ростов307815275129
15Торпедо3061113284529
16Арсенал Тула307419204625

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

CSS:

thead td{
	background-color: silver;
	font-weight: bold;
}
tr:nth-child(1), .rfpl tr:nth-child(2) { 
	background-color: #DDEEFF;
}
tr:nth-child(n+3):nth-child(-n+5) { 
	background-color: #cceed6;
}
tr:nth-child(n+6):nth-child(-n+12):nth-child(even) { 
	background-color: #d8d8d8;
}
tr:nth-child(n+6):nth-child(-n+12):nth-child(odd) { 
	background-color: #c8c8c8;
}
tr:nth-child(n+13) { 
	background-color: #ffccd8;
}
МКомандаИВНПЗабПропО
1Зенит302073581767
2ЦСКА301938672760
3Краснодар301794522760
4Динамо301488533650
5Рубин301398393348
6Спартак3012810424244
7Локомотив3011109312543
8Мордовия3011514224338
9Терек3010713303037
10Кубань3081210323636
11Амкар308814254232
12Уфа3071013263931
13Урал309318314430
14Ростов307815275129
15Торпедо3061113284529
16Арсенал Тула307419204625

Чередование фона в меню

HTML и CSS:

<stylel>
	#menu, #menu li {
		margin: 0;
		padding: 0;
	}
	#menu {
		text-align: center;
		background: #03658e;
	}
	#menu li{
		display:inline-block;
		text-align: center;
		width: 20%;
	}
	#menu a {
		display: block;
		padding: 5px 15px;
		color: #fff;
		font-size:150%;
		text-decoration: none;
	}
	#menu a:hover {
		background: #8AB8CC;
	}
	#menu li:nth-child (odd) {
		background: #278CB7;/* фон нечетных пунктов меню */
	}
</style>
<ul id="menu">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О сайте</a></li>
</ul>

Выделяем один из пунктов меню

Стили CSS для таблицы:

#menu li:nth-child(1) a{ /* в скобках указываем номер пункта в котором нужно поменять стиль */
	color: orange;
}

Скачать html-файл с примерами

© 2015 webcodius.ru

Рейтинг@Mail.ru