Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Красивые таблицы css в html


Стилизация HTML-таблиц на CSS, шаблоны

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

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

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

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

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

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

Наименование Описание Цена
Имя Характеристики Стоимость
Имя #2 Характеристики Стоимость
Имя #3 Характеристики Стоимость

Шаблоны 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 ₽

Кстати, если бы мы не использовали тег , то задать свои стили к первому ряду можно было с помощью псевдокласса :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;}
НаименованиеОписаниеЦена
SamsungGalaxy S8, S8 Plus 2400 ₽
XiaomiRedmi 4A, 4X520 ₽
MeizuM3S, M5S720 ₽

#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 ₽
НаполеонМежкомнатная крашеная дверь по каталогу RAL9900 ₽
ЛатинаДверь с покрытием ПВХ7900 ₽

Своойства CSS

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

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

812 просмотров всего, 1 просмотров сегодня

lospirata.ru

Красивые таблицы CSS

МодельЦенаКол-воИтого
Платье с цветочным принтом250012500
Платье с боковыми вставками300013000
CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3
CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.4 15.622.329.3
CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3
My working weeks, March 2015
MondayTuesdayWednesdayThursdayFriday
23456
910111213
1617181920
2324252627
3031
EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie
Q1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3
ComedyAdventureActionChildren
Scary MovieIndiana JonesThe PunisherWall-E
Epic MovieStar WarsBad BoysMadagascar
SpartanLOTRDie HardFinding Nemo
Dr. DolittleThe Mummy300A Bug's Life
CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3
CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3

html5book.ru

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

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

width и height

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

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

table {width: 450px; height: 80%;}

caption-side

Указывает, где будет размещён заголовок таблицы, описанный тегом . Свойству можно задавать значения:

  • top — расположить над таблицей.
  • bottom — разместить под таблицей.

Эксклюзивно для обозревателя Firefox доступны значения left (заголовок слева) и right (справа от таблицы), но другие браузеры их не понимают.

table {caption-side: top;}

border-collapse

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

Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate; даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse; (результат показан на рисунке ниже).

border-spacing

Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе — по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;}.

CSS-код

table { border: 4px double #FCA360; border-collapse: separate; border-spacing: 10px 20px; } td { padding: 3px; border: 1px solid #FCA360; }

Задаёт таблице следующее оформление:

empty-cells

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

  • show — показывать границы и фон (по умолчанию).
  • hide — скрыть их. Если все ячейки строки пусты, то будет скрыта, соответственно, вся строка. Если таблице задано правило border-collapse: collapse;, то свойство игнорируется.

table-layout

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

  • auto. Ширина определяется автоматически. При этом либо суммируется ширина всех столбцов, либо берётся значение свойства width, если таблице оно задано. Браузер сначала загружает таблицу, потом анализирует её, определяя ширину, и только после этого отображает.
  • fixed. Фиксированная ширина, которая определяется по первой строке.

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

Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height) и шириной (width).

Помня это, оформим несложную таблицу, частично прокомментировав код.

border-collapse table { width: 50%; caption-side: bottom; border: 4px solid #006400; border-collapse: collapse; table-layout: fixed; } th { font-size: 13px; font-weight: bold; background: #ADFF2F; border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00; color: #039; padding: 8px; } td { background: #E0FFFF; border-bottom: 1px solid #FF8C00; border-top: 1px solid transparent; padding: 8px;
Пример таблицы Цены2014 20152016
Хлеб16 1821
Сахар35 4450
Соль8 8,509

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

width: 50%;

Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера , потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера.

caption-side: bottom;

Размещаем заголовок снизу, под таблицей.

border: 4px solid #006400;

Задаём таблице цветную рамку толщиной 4 пикселя.

border-collapse: collapse;

Объединяем границы ячеек.

table-layout: fixed;

Настраиваем способ определения браузером ширины таблицы.

font-size: 13px;

Задаём размер шрифта заглавных ячеек.

font-weight: bold;

Делаем текст внутри них жирным.

background: #ADFF2F;

Устанавливаем цвет фона ячеек.

border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;

Настраиваем верхние и нижние рамки.

color: #039;

Определяем цвет текста.

padding: 8px;

Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.

Полезные ссылки:

www.seostop.ru

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

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

htmlbook.ru


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



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!