Шаблон css html: Скачать бесплатно

Содержание

Осваиваем CSS: макет страницы

  • Главная

  • ->

  • Материалы

  • ->

  • Осваиваем CSS: макет страницы

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.


Назад
Вперед

Осваиваем CSS: макет страницы

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

Кажется, будто каждый веб-разработчик имеет свои собственные приемы и техники верстки CSS-шаблонов, и начинающие вебмастера зачастую используют какую-то технику даже не понимая, как она работает. Такой подход по типу «черного ящика» к использованию CSS помогает, конечно, получить результат быстро, но, в конечном счете мешает росту понимания языка разработчиком.

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

Центрирование дизайна

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

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


Центрирование с использованием автоматических внешних отступов

Предположим, перед вами стоит типичная задача отцентровать по горизонтали контейнер div с id wrapper («обертка»). 


<body>
  <div>
  </div>
</body>

Для осуществления этого на практике нужно просто задать ширину div wrapper и установить горизонтальные внешние отступы в значение auto. 


#wrapper {
  width: 720px;
  margin: 0 auto;
}

В данном примере ширина установлена в пикселях. Но, разумеется, с таким же успехом можно указать ее в процентах от ширины тела документа body, либо использовать размер в «em» относительно размера текста.

Такой способ работает во всех современных браузерах, но не в IE 6. К счастью, IE неправильно интерпретирует свойство text-align: center, выравнивая по центру все, а не только текст. Вы можете использовать это себе во благо, центрируя все, что находится в тэге body, включая и div wrapper, переназначая затем выравнивание на left для содержимого блока wrapper. 


body {
  text-align: center;
}

#wrapper {
  width: 720px;
  margin: 0 auto;
  text-align: left;
}

Использование свойства text-align подобным образом является по сути хаком, но он совсем безобиден и не окажет неблагоприятного воздействия на ваш код. Сейчас наш блок wrapper отцентрирован и в IE 6, точно так же, как и в других браузерах, которые лучше дружат со спецификацией.

Центрирование дизайна с использованием позиционирования и отрицательных отступов

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

Начинаем, как и в предыдущем примере — с установки ширины wrapper. Затем устанавливаем свойство position для wrapper в значение relative и свойство left в значение 50%. Это позволяет нам разместить левый край блока wrapper в центре страницы. 


#wrapper {
  width: 720px;
  position: relative;
  left: 50%;
}

Нам, однако, нужно немного другое — мы хотим видеть в центре страницы центр блока wrapper. Добиться этого можно, применив отрицательный отступ с левой стороны блока wrapper равный половине ширины этого блока. Это сдвинет блок wrapper на половину его ширины влево, перемещая его в центр экрана: 


#wrapper {
  width: 720px;
  position: relative;
  left: 50%;
  margin-left: -360px;
}

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

Шаблоны на основе обтекания

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

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

Двухколоночный шаблон с использованием обтекания

Для создания простого двухколоночного шаблона с использованием обтекания, начнем с базовой структуры (X)HTML. В нашем примере (X)HTML-каркас состоит из зон: branding, content, зоны для навигации и футера. Вся данная структура заключена в «обертку» — wrapper, который будет выровнен по горизонтали одним из описанных выше способов. 


<div>
    <div>
    ...
    </div>
    <div>
    ...
    </div>
    <div>
    ...
    </div>
    <div>
    . ..
    </div>
</div>

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

Обычно, когда люди создают шаблоны и использованием обтекания, они придают свойству float значение left для обеих колонок, после чего создают «поле» между колонками, используя свойства margin или padding. При использовании такого подхода колонки плотно прижаты в доступном им пространстве — так, что «не продохнуть». Обычно это не вызывает проблем, но некоторые браузеры разрушают такой «плотный» дизайн, при этом колонки выстраиваются в столбик — одна под другой.


Это может происходить в IE, потому что в IE за основу берется «размер» контента, а не содержащего контент элемента. В браузерах, придерживающихся стандартов, если контент не помещается в блоке, он просто выходит за его пределы. В IE, однако, если контент не помещается в содержащем его элементе, то он «растягивает» элемент, увеличивая его в размере. Если подобная вещь происходит в плотном, зажатом дизайне, то у элементов больше не остается места, чтобы оставаться рядом друг с другом, и один из них как бы «проваливается», опускается ниже другого.

Чтобы избежать подобного развития событий, старайтесь не переполнять блок, содержащий ваш дизайн с обтеканием. Вместо использования горизонтальных внешних и внутренних отступов, (margin, padding) вы можете создать «виртуальные поля» придавая одному блоку float:left, а другому — float:right.

Сейчас, если один из элементов незначительно (в пределах нескольких пикселей) увеличится в размерах, вместо того, чтобы разрушить весь дизайн, вытеснив один из блоков ниже другого, произойдет «наплывание» блока на территорию «виртуального поля».

Код CSS для достижения данной цели самоочевиден. Мы просто устанавливаем желаемую ширину для каждой из колонок, после чего указываем для навигации float:left, а для контента — float:right. 


#content {
  width: 520px;
  float: right;
}
#mainNav {
  width: 180px;
  float: left;
}

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


#footer {
  clear: both;
}

Базовый вариант готов. Добавим еще пару штрихов. Внутренние отступы сверху и снизу для всего блока навигации и внутренние отступы слева и справа для списка пунктов в навигационном меню. 


#mainNav {
  padding-top: 20px;
  padding-bottom: 20px;
}
#mainNav li {
  padding-left: 20px;
  padding-right: 20px;
}

Проставим также отступ справа в зоне контента: 


#content h2, h3, p {
  padding-right: 20px;
}

Вот и все, теперь у нас готов простой двухколоночный макет на CSS.

Трехколоночный шаблон с использованием обтекания

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


<div>
    <div>
    …
    </div>
    <div>
    …
    </div>
</div>

Используя те же самые правила CSS, что и в случае двухколоночного шаблона, мы можем придать блоку основного контента float:left, а блоку дополнительного — float:right. Все это будет происходить внутри уже правильно спозиционированного основного блока content. Таким образом мы разделяем вторую колонку content на две, получая трехколоночный макет.

Как и раньше, CSS-код очень прост. Нужно просто указать желаемую ширину для каждого из блоков и задать каждому свое обтекание. 


#mainContent {
  width: 320px;
  float: left;
}

#secondaryContent {
  width: 180px;
  float: right;
}

Можно немного подчистить шаблон, удалив внутренний отступ из блока content, применив его непосредственно к контенту блока secondaryContent: 


#secondaryContent h2, h3, p {
  padding-left: 20px;
  padding-right: 20px;
}

Таким образом, мы получаем с вами вот такой симпатичный трехколоночный макет.

Andy Budd, Cameron Moll и Simon Collison: «CSS Mastery: Advanced Web Standards Solutions»
webreference.com

Перевод — Дмитрий Науменко

P.S. Хотите больше материалов по прикладной верстке? Посмотрите бесплатные курсы ниже. Это серия видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Они помогут вам быстрее получить необходимые навыки:

Понравился материал и хотите отблагодарить?

Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх

Колоночные шаблоны для сайта

Отцентрованные шаблоны для десктопной версии с фиксированной шириной 960px и прижатым подвалом. Хорошо подходят для лэндингов т.к. есть возможность сделать разноцветные блоки на всю ширину окна.

1

Шаблон с одной колонкой

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">		
	<meta name="viewport" content="width=960">	
	<title>Title</title>
	<link rel="shortcut icon" href="/favicon. ico" type="image/x-icon">
	<link rel="stylesheet" href="/style.css">
</head>
<body>
	<div>
		<header>
			<div>
				<p>Header</p>
			</div>
		</header>
		<main>
			<div>
				<p>Content</p>
			</div>
		</main>
	</div>
	<footer>
		<div>
			<p>Footer</p>
		</div>
	</footer>
</body>
</html>
html {
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	margin: 0;    
	padding: 0;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
.wrp {
	width: 960px;
	margin: 0 auto;
	position: relative;
}
.header {
	height: 150px;
	background: #B39DDB;
}
.content {
	padding: 0 0 100px;
	min-height: 200px;
}
. footer {
	margin: -100px 0 0 0;
	height: 100px;
	position: relative;
	background: #f7cfad;	
}
Результат:

2

Колонка слева

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">		
	<meta name="viewport" content="width=960">	
	<title>Title</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="/style.css">
</head>
<body>
	<div>
		<header>
			<div>
				<p>Header</p>
			</div>
		</header>
		<div>
			<div>
				<div>
					<main>
						<p>Content</p>
					</main>
				</div>
				<aside>
					<p>Left</p>
				</aside>
			</div>
		</div>
	</div>
	<footer>
		<div>
			<p>Footer</p>
		</div>
	</footer>
</body>
</html>
html {
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	margin: 0;    
	padding: 0;
}
. wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
.wrp {
	width: 960px;
	margin: 0 auto;
	position: relative;
}
.header {
	height: 150px;
	background: #B39DDB;
}
.middle {
	width: 100%;
	padding: 0 0 100px;
	position: relative;
}
.middle:after {
	display: table;
	clear: both;
	content: '';
}
.container {
	width: 100%;
	float: left;
	overflow: hidden;
}
.content {
	padding: 0 0 0 260px;
	min-height: 200px;
}
.leftcol {
	float: left;
	width: 240px;
	margin-left: -100%;
	position: relative;
	min-height: 200px;
	background: #ED6492;
}
.footer {
	margin: -100px 0 0 0;
	height: 100px;
	position: relative;
	background: #f7cfad;	
}
Результат:

3

Колонка справа

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">		
	<meta name="viewport" content="width=960">	
	<title>Title</title>
	<link rel="shortcut icon" href="/favicon. ico" type="image/x-icon">
	<link rel="stylesheet" href="/style.css">	
</head>
<body>
	<div>
		<header>
			<div>
				<p>Header</p>
			</div>
		</header>
		<div>
			<div>
				<div>
					<main>
						<p>Content</p>
					</main>
				</div>
				<aside>
					<p>Right</p>
				</aside>
			</div>
		</div>
	</div>
	<footer>
		<div>
			<p>Footer</p>
		</div>
	</footer>
</body>
</html>
html {
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	margin: 0;    
	padding: 0;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
.wrp {
	width: 960px;
	margin: 0 auto;
	position: relative;
}
.header {
	height: 150px;
	background: #B39DDB;
}
.middle {
	width: 100%;
	padding: 0 0 100px;
	position: relative;
}
.middle:after {
	display: table;
	clear: both;
	content: '';
}
.container {
	width: 100%;
	float: left;
	overflow: hidden;
}
.content {
	padding: 0 260px 0 0;
	min-height: 200px;
}
.rightcol {
	float: left;
	width: 240px;
	margin-left: -240px;
	position: relative;
	min-height: 200px;
	background: #ED6492;
}
.footer {
	margin: -100px 0 0 0;
	height: 100px;
	position: relative;
	background: #f7cfad;	
}
Результат:

4

Три колонки

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">		
	<meta name="viewport" content="width=960">	
	<title>Title</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="/style.css">	
</head>
<body>
	<div>
		<header>
			<div>
				<p>Header</p>
			</div>
		</header>
		<div>
			<div>
				<div>
					<main>
						<p>Content</p>
					</main>
				</div>
				<aside>
					<p>Left</p>
				</aside>
				<aside>
					<p>Right</p>
				</aside>
			</div>
		</div>
	</div>
	<footer>
		<div>
			<p>Footer</p>
		</div>
	</footer>
</body>
</html>
html {
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	margin: 0;    
	padding: 0;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
.wrp {
	width: 960px;
	margin: 0 auto;
	position: relative;
}
.header {
	height: 150px;
	background: #B39DDB;
}
.middle {
	width: 100%;
	padding: 0 0 100px;
	position: relative;
}
.middle:after {
	display: table;
	clear: both;
	content: '';
}
.container {
	width: 100%;
	float: left;
	overflow: hidden;
}
.content {
	padding: 0 260px 0 260px;
	min-height: 200px;
}
.leftcol {
	float: left;
	width: 240px;
	margin-left: -100%;
	position: relative;
	min-height: 200px;	
	background: #f06291;
}
.rightcol {
	float: left;
	width: 240px;
	margin-left: -240px;
	position: relative;
	min-height: 200px;	
	background: #f06291;
}
.footer {
	margin: -100px 0 0 0;
	height: 100px;
	position: relative;
	background: #f7cfad;	
}
Результат:

CSS Grid и HTML — типичный шаблон для сайта

Технология CSS Grid Layout достаточно молодая, но её уже поддерживают все основные браузеры с марта 2017-го. Модуль CSS Grid Layout вводит порядка 20 новых понятий, о которых я расскажу чуть позже. А сейчас пока предлагаю CSS Grid шаблон с HTML для типовой структуры типового сайта.

И так HTML код:

<!DOCTYPE html><html dir=»ltr» lang=»ru-ru»>
<head>
<title>CSS Grid и HTML — тпичный шаблон для сайта</title>
<link href=»/style.css» rel=»stylesheet» type=»text/css» />
</head><body>

<div>
<main>
<h2>main</h2>
</main>
<header>
<p>header</p>
</header>
<aside>
<p>left-sidebar</p>
</aside>
<aside>
<p>right-sidebar</p>
</aside>
<footer>
<p>footer</p>
</footer>
</div>

</body></html>

И сам CSS Grid код:

* {margin:0; padding:0;}

header, main, aside, footer {border:1px solid #ccc; padding:5px;}

header {grid-area:header;}
main {grid-area:main;}
aside.left-sidebar {grid-area:left-sidebar;}
aside.right-sidebar {grid-area:right-sidebar;}
footer {grid-area:footer;}

#grid {
min-width:320px;
max-width:1200px;
margin:0 auto 1px;
min-height:100vh;
display:grid;
grid-gap:10px;
grid-template:100px 1fr 100px / 230px 1fr 230px;
grid-template-areas:»header header header»
«left-sidebar main right-sidebar»
«footer footer footer»;
}

@media only screen and (max-width:750px)
{
#grid {
grid-template:100px auto auto auto 100px / 1fr;
grid-template-areas: «header»
«main»
«left-sidebar»
«right-sidebar»
«footer»;
}

}

Скачать оба файла можно здесь — CSS _Grid.rar

Автор: Алехин Геннадий (11.04.2018)

Готовые CSS шаблоны и генераторы

Готовые CSS шаблоны для сайтов в последнее время стали очень
популярными. Поставил движок — и за пару минут установил на него любой понравившийся дизайн. Это если нет желания и навыков делать дизайн для своего сайта или блога.

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

Кроме готовых CSS шаблонов и заготовок для дизайна, существует ряд он-лайн сервисов, которые генерируют CSS шаблоны.

Генераторы CSS шаблонов:
https://www.ibdjohn.com/csstemplate/
https://csscreator.com/?q=tools/layout
https://www.maketemplate.com/
https://www.positioniseverything.net/

Готовые CSS шаблоны:
https://www.opensourcetemplates.org/
https://www.freecsstemplates.org/
https://www.ex-designz.net/
https://www.templateworld.com/ Высылают PSD на e-mail
https://www.csstemplates.net/

🔥 Кстати! Я провожу платный курс по продвижению англоязычных сайтов SEO Шаолинь. Если интересует, можете подать заявку на его сайте seoshaolin.com. Для своих читателей делаю хорошую скидку по промокоду blog.

Приглашаю вас подписаться на мои каналы в Telegram:

@shakinru — продвижение в рунете.
@burzhunet — англоязычное SEO.

Заготовки для CSS дизайна:
https://www.intensivstation.ch/en/templates/
https://www.free-css-templates.com/
https://www.designshack.co.uk/
https://blog.html.it/layoutgala/
https://www.sixshootermedia.com/free-templates/
https://maxdesign.com.au/

Готовые CSS шаблоны для блогов

CSS дизайны для блогов на сервисе Blogspot.com:
https://blogger-templates.blogspot.com/
https://finalsense.com/services/blogs_templates.html
https://blogspottemplates.blogspot.com/
https://freetemplates.blogspot.com/

CSS шаблоны для блогов на движке Movable Type:
https://www.blogfashions.com/

CSS шаблоны для блогов на движке Textpattern:
https://www.textplates.com/templates
https://textgarden.org/
https://txp-templates.com/

Вспомогательные CSS генераторы для веб-дизайна

CSS генератор оформления текста:
https://www.somacon.com/p334.php

CSS генераторы круглых углов:
https://www.neuroticweb.com/
https://wigflip.com/cornershop/

CSS генератор полосы прокрутки браузера:
https://www.iconico.com/CSSScrollbar/ Не работает в Firefox

Глобатор

P.S. Cегодняшний постскриптум — рисуем Nintendo Mii.

Подпишитесь на рассылку блога с полезными материалами по SEO

Оцените, пожалуйста, статью, я старался 🙂 :

Загрузка…

Стилизация HTML-таблиц с помощью CSS

HTML-таблицы

Таблицы – неотъемлемый элемент языка гипертекстовой разметки HTML, остающийся до сих пор актуальным для структуризации и удобном представлении различных данных.

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

В настоящее время таблицы используются, например, для прайс-листов, списков, характеристик, анкет и много другого, а с применением каскадных таблиц стилей (CSS), мы можем усовершенствовать визуальное представление таблиц в документе. Здесь я представлю несколько примеров оформления HTML-таблиц с исходным кодом, что в дальнейшем можно будет применить при разработке своего проекта.

Стилизация таблиц с помощью CSS

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

В начале приведу общий HTML-код таблицы, который мы в последствии будем стилизовать.

<table>
  <thead>
    <tr>
      <td>Наименование</td>
      <td>Описание</td>
      <td>Цена</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Имя</td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
    <tr>
      <td>Имя #2</td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
    <tr>
      <td>Имя #3</td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
  </tbody>
</table>

Шаблоны CSS

Шаблоны не претендуют на оригинальность, но могут быть полезные многим.

#1

table {width: 100%; border-collapse: collapse;}
table td {padding: 12px 16px;}
table thead tr {font-weight: bold; border-top: 1px solid #e8e9eb;}
table tr {border-bottom: 1px solid #e8e9eb;}
table tbody tr:hover {background: #e8f6ff;}
Наименование Описание Цена
Лук Собран лучшими сварщиками предприятия 20 ₽
Капуста Идеально подходит для борща 52 ₽
Чеснок Особо острый, с витаминами 24 ₽

Кстати, если бы мы не использовали тег <thead>, то задать свои стили к первому ряду можно было с помощью псевдокласса :nth-child(1).

#2

table {width: 100%; border-collapse: collapse;}
table thead tr {color: #ffffff; font-weight: bold; background: #00bf80;}
table thead tr td {border: 1px solid #01ab73;}
table tbody tr td {border: 1px solid #e8e9eb;}
table tbody tr:nth-child(2n) {background: #f4f4f4;}
table tbody tr:hover {background: #ebffe8;}
Наименование Описание Цена
Виноград Для приготовления вина 146 ₽
Яблоко На любой вкус недорого 72 ₽
Лимон Особо кислый 46 ₽

#3

table {width: 100%; border-collapse: separate; border-spacing: 4px;}
table thead tr {color: #ffffff; font-weight: bold;}
table thead tr td {border-radius: 4px 4px 0 0; background: #2e82c3;}
table tbody tr td {border: 1px solid #2e82c3; border-radius: 4px; background: #cbdfef;}
table tbody tr td:hover {background: #a2c3dd; transition-duration: 0.2s;}
Наименование Описание Цена
Samsung Galaxy S8, S8 Plus 2400 ₽
Xiaomi Redmi 4A, 4X 520 ₽
Meizu M3S, M5S 720 ₽

#4

table {width: 100%; text-align: center; border-bottom: 2px solid #dfdfdf; border-radius: 6px; border-collapse: separate; border-spacing: 0px;}
table thead tr {color: #ffffff; font-weight: bold; background: #c83240;}
table tr td {border-right: 1px solid #dfdfdf;}
table tr td:last-child {border-right: 0px;}
table tbody tr:nth-child(1n) {background: #f6f6f6;}
table tbody tr:nth-child(2n) {background: #e6e6e6;}
table tbody tr:hover {background: #ffe8e8; transition-duration: 0.6s;}
Наименование Описание Цена
Вираж Дверь облицованная натуральным шпоном 5200 ₽
Наполеон Межкомнатная крашеная дверь по каталогу RAL 9900 ₽
Латина Дверь с покрытием ПВХ 7900 ₽

Своойства CSS

Что означают используемые свойства CSS в шаблонах:

  • width – ширина таблицы;
  • border-collapse – способ отображения границ ячеек вокруг таблицы;
  • border-spacing – расстояние между границами ячеек в таблице;
  • border-radius – скругление углов рамки;
  • padding – внутреннее расстояние элемента от края границы;
  • color – цвет элемента;
  • text-align – выравнивание текста по горизонтали;
  • font-weight – насыщенность шрифта;
  • background – параметры фона;
  • transition-duration – длительность анимации;
  • border – толщина, стиль и цвет границы вокруг элемента.