Мы принимаем к оплате:
«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!
«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 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;}Наименование | Описание | Цена |
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 – толщина, стиль и цвет границы вокруг элемента.
812 просмотров всего, 1 просмотров сегодня
Красивые таблицы CSS
Платье с цветочным принтом | 2500 | 1 | 2500 | |
Платье с боковыми вставками | 3000 | 1 | 3000 |
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Monday | Tuesday | Wednesday | Thursday | Friday |
2 | 3 | 4 | 5 | 6 |
9 | 10 | 11 | 12 | 13 |
16 | 17 | 18 | 19 | 20 |
23 | 24 | 25 | 26 | 27 |
30 | 31 |
Stephen C. Cox | $300 | $50 | Bob |
Josephin Tan | $150 | - | Annie |
Joyce Ming | $200 | $35 | Andy |
James A. Pentel | $175 | $25 | Annie |
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Scary Movie | Indiana Jones | The Punisher | Wall-E |
Epic Movie | Star Wars | Bad Boys | Madagascar |
Spartan | LOTR | Die Hard | Finding Nemo |
Dr. Dolittle | The Mummy | 300 | A Bug's Life |
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Оформление таблиц в CSS
Про HTML-таблицы читайте здесь, а в этой статье я расскажу об их оформлении с помощью CSS. Для форматирования таблиц каскадные стили используют перечисленные ниже свойства.
width и height
Задают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера
Хлеб | 16 | 18 | 21 |
Сахар | 35 | 44 | 50 |
Соль | 8 | 8,50 | 9 |
В браузере таблица будет выглядеть, как показано ниже.
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;
Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.
Полезные ссылки:
Оформление таблиц
Благодаря своей наглядности, универсальности и простоте таблицы повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Однако в большинстве случаев на веб-страницах используют весьма убогие средства по представлению табличных данных. Вместе с тем воспользовавшись мощью стилей, можно весьма расширить средства по оформлению таблиц, удачно вписать их в дизайн сайта и нагляднее представить табличные данные.
Для начинающих
Компьютер для начинающих: Word, Excel, Access и другие программы!
Графические пакеты
Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!
WEB + анимация
Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!
Бухгалтерия + делопроизводство
Сетевые технологии
Курсы сборки ПК, системных администраторов и защиты информации!