Стили для таблиц
Используйте онлайн генератор для создания красивых стилей HTML таблиц для сайта. В инструменте, доступна возможность настройки цвета, стиля, мобильности и выравнивания текста в таблице. Результат выводится автоматически при изменение настроек.
- Простой генератор таблиц
- Генератор HTML таблиц
- Конструктор стилей таблиц
Сервис помогает сделать дизайн таблиц. Для генерации таблицы выберите один из инструментов выше.
Как использовать результат
После получения нужно набора стилей, добавьте их на странице или загрузи в файл style.css. После подключите к вашей таблице . Если у вас ещё нет таблицы, используйте генератор таблиц.
О сервисе
Конструктор стилей для таблицы позволяет за несколько секунд создать красивую таблицу для сайта. Важными отличиями конструктора является:
- Уникальные функции (которых нет на других сайтах).
- Большой выбор настроек.
- Быстрая обработка изменений.
- Чистый код.
- Гибкий и интуитивно понятный функционал.
Пишите ваши замечание и пожелания по созданию HTML таблиц на e-mail. Самые интересные и нужные функции будут внедрены в инструмент.
Оформление таблиц
Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Добавляя к таблицам всю мощь стилей можно весьма удачно вписать таблицы в дизайн сайта, наглядно и красиво представить табличные данные.
Ширина таблицы
По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.
Пример 1. Ширина таблицы в процентах
table < width: 100%; >.tbl-medium < width: 60%; >.tbl-small
Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2.
Пример 2. Выравнивание таблицы с помощью margin
| . |
В данном примере для всех таблиц на странице задано выравнивание по центру.
Цвет фона
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору table . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th , то он и будет установлен в качестве фона (пример 3).
Пример 3. Цвет фона
| Вид соединения | Поля допусков ширины шпоночного паза | |
|---|---|---|
| Вал | Втулка | |
| Свободное | H9 | D10 |
| Нормальное | N9 | Is9 |
| Плотное | P9 | |
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цвета фона
Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child , добавляя его к селектору tr . Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов и (пример 4).
Пример 4. Создание зебры
| Интервалы размеров, мм | Допуск IT, мкм, для квалитетов | |||
|---|---|---|---|---|
| 5 | 6 | 7 | 8 | |
| До 3 | 4 | 6 | 10 | 14 |
| Св. 3 до 6 | 5 | 8 | 12 | 18 |
| Св. 6 до 10 | 6 | 9 | 15 | 22 |
| Св. 10 до 18 | 8 | 11 | 18 | 27 |
| Св. 18 до 30 | 9 | 13 | 21 | 33 |
| Св. 30 до 50 | 11 | 16 | 25 | 39 |
| Св. 50 до 80 | 13 | 19 | 30 | 46 |
Результат данного примера показан на рис. 2.
Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd , тогда серым цветом будут выделяться нечётные строки.
Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even) .
Поля внутри ячеек
Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding , которое работает с селектором td или th , как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).
Расстояние между ячеек
Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing , добавляя его к селектору table (пример 5).
Пример 5. Использование border-spacing
table < border-spacing: 3px; /* Расстояние между ячеек */ >thead th < background: #e08156; /* Цвет фона заголовка */ color: #333; /* Цвет текста */ >td, th < padding: 5px; /* Поля в ячейках */ background: #4c715b; /* Цвет фона ячеек */ color: #f5e8d0; /* Цвет текста */ >Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.
Рис. 3. Вид таблицы с расстоянием между ячеек
Если к table добавляется свойство border-collapse со значением collapse , то border-spacing игнорируется, потому как расстояния между ячеек уже нет.
Границы и рамки
Пример 6. Применение свойства border-collapse при создании рамок таблицы
| O | X | X |
| O | O | X |
| X | X | O |
Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.
а — свойство не установлено
б — свойство установлено
Рис. 4. Вид таблицы при использовании border-collapse
На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).
Пример 7. Линии между строк
| Вид соединения | Поля допусков ширины шпоночного паза | |
|---|---|---|
| Вал | Втулка | |
| Свободное | H9 | D10 |
| Нормальное | N9 | Is9 |
| Плотное | P9 | |
Результат данного примера показан на рис. 5.
Рис. 5. Таблица с горизонтальными линиями
Выравнивание текста в ячейках
По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент , он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).
Пример 8. Выравнивание содержимого ячеек по горизонтали
| Заголовок 1 | Ячейка 1 | Ячейка 2 |
|---|---|---|
| Заголовок 2 | Ячейка 3 | Ячейка 4 |
Рис. 6. Выравнивание текста в ячейках
Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top , как показано в примере 9.
Пример 9. Выравнивание содержимого ячеек по вертикали
| Вид соединения | Поля допусков ширины шпоночного паза | |
|---|---|---|
| Вал | Втулка | |
| Свободное | H9 | D10 |
| Нормальное | N9 | Is9 |
| Плотное | P9 | |
В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.
Рис. 7. Выравнивание текста в ячейках
См. также
- border-collapse
- border-spacing
Красивое оформление таблиц
Рассмотрим, как можно красиво оформить таблицу с помощью CSS3. Благодаря новым селекторам появляется возможность создать уникальный стиль без добавления дополнительных классов разметки.
HTML
Так будет выглядеть наша основная структура таблицы:
Smart Starter Smart Medium Smart Business Smart Deluxe Цена в месяц $ 2.90 $ 5.90 $ 9.90 $ 14.90 Место на диске 3 GB 5 GB 10 GB 20 GB Трафик 100 GB 300 GB 600 GB Неограничен Баз данных MySQL Неограничено Неограничено Неограничено Неограничено Установка 19.90 $ 12.90 $ бесплатно бесплатно PHP 5 Ruby on Rails
У нас присутствуют все элементы, которые нужны для таблицы: header, body и footer.
В данном уроке мы будем оформлять сравнительные таблицы тарифов хостинга. В примере будет три разных варианта оформления таблиц. Применить тот или иной стиль можно очень просто, нужно лишь добавить к таблице класс table1, table2 или table3.
CSS
Стиль 1 — .table1
Первая таблица будет в зеленых тонах с градиентом для описательных ячеек, элменты «th«.
Начнем с общего стиля для таблицы:
table.table1
Мы хотим, чтобы между ячейками таблицы было некоторое пространство, поэтому применим свойство border-collapse:separate;
У элементов «th» шапки будет такой стиль:
.table1 thead th
Для Firefox и Webkit браузеров мы использовали градиент из трех цветов. С помощью border-radius закргуляем верхнюю левую и верхнюю правую границу ячеек.
Теперь займемся элементом «th«, который пустой:
.table1 thead th:empty
Низ или footer таблицы будет ииметь следующий стиль:
.table1 tfoot td < color: #9CD009; font-size:32px; text-align:center; padding:10px 0px; text-shadow:1px 1px 1px #444; >.table1 tfoot th
Просто добавляем тень для улучшения текста.
Внутренние ячейки таблицы будут иметь светло-зеленый фон и белую тень для текста:
.table1 tbody td
Также добавим небольшой радиус и границу, всего 2px к ячейкам. Это создаст небольшой светящийся эффект. Мы могли бы использовать и box-shadow для создания похожего эффекта.
Теперь, мы будем добавлять иконку ко всем ячейкам, у которых есть SPAN с классом .check. Достигается это добавлением такого стиля:
.table1 tbody span.check::before< content : url(../images/check0.png) >Свойство content позволяет нам добавлять определенный контент внутри элемента (в данном случае это изображение). Также мы могли бы добавить какой-то текст сюда. В этом случае мы можем использовать псевдо-классы ::after или ::before, которые вставят текст после или перед контентом.
Стиль 2 — .table2
Вторая таблица будет чуть по элегантнее. Черный header и footer. В этой таблице не будет пустого пространство между ячейками.
table.table2
Верх и низ таблицы (header и footer) будут иметь одинаковый вид, поэтому определим общий стиль для них:
.table2 thead th, .table2 tfoot td
Элемент th — описание footer будет иметь такой стиль:
.table2 tfoot th
Ячейки footer‘а, для которых мы уже создали общий с ячейками header‘а стиль, будут иметь другое свойство box-shadow. У хедера тень падает вверх, у футера же тень будет падать вниз. Также изменим и цвет текста:
.table2 tfoot td
Вернемся к хедеру, и укажем, что если ячейка пустая, то она не должна иметь ни каких стилей, то есть назначим такие:
.table2 thead th:empty
И для последнего элемента ячейки хедера уберем правую границу:
.table2 thead :nth-last-child(1)
Для первой ячейки хедера и последней ячейки тела таблицы уберем границы:
.table2 thead :first-child, .table2 tbody :nth-last-child(1)
Теперь добавим стили для ячеек являющихся описанием ячеек тела таблицы, т.е. внутренняя часть левого столбца:
.table2 tbody th
А такие стили для ячеек тела таблицы:
.table2 tbody td
И вставим иконку до элемента SPAN.
.table2 tbody span.check::before< content : url(../images/check1.png) >Стиль 3 — .table3
И последняя на сегодня таблица у которой заголовки столбцов будут иметь различные цвета.
Основной стиль для таблицы будет таким:
table.table3
Общий стиль для всех ячеек th в хедере будет таким:
.table3 thead th
Пустые ячейки будут без фона и границ:
.table3 thead th:empty
А теперь мы хотим выбрать конкретные ячейки th в хедере и ячейки td в футере и придать каждой из них свой уникальный вид. Пользоваться будем селектором :nth-child( номер ):
.table3 thead :nth-child(2), .table3 tfoot :nth-child(2) < background-color: #7FD2FF; >.table3 tfoot :nth-child(2) < -moz-border-radius:0px 0px 0px 5px; -webkit-border-bottom-left-radius:5px; border-bottom-left-radius:5px; >.table3 thead :nth-child(2) < -moz-border-radius:5px 0px 0px 0px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px; >.table3 thead :nth-child(3), .table3 tfoot :nth-child(3) < background-color: #45A8DF; >.table3 thead :nth-child(4), .table3 tfoot :nth-child(4) < background-color: #2388BF; >.table3 thead :nth-child(5), .table3 tfoot :nth-child(5) < background-color: #096A9F; >.table3 thead :nth-child(5) < -moz-border-radius:0px 5px 0px 0px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px; >.table3 tfoot :nth-child(5)
Стиль для всех ячеек футера будет таким:
.table3 tfoot td
Добавим внутренние отступы для ячеек:
.table3 tbody td
Строка с ценами будет у нас с более крупным и жирным шрифтом:
.table3 tbody tr:nth-child(4) td
Колонки тела таблицы будут иметь альтернативный стиль, поэтому будем снова использовать селектор :nth-child, но в этот раз со значениями even и odd:
.table3 tbody td:nth-child(even) < background-color:#444; color:#444; border-bottom:1px solid #444; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.39, rgb(189,189,189)), color-stop(0.7, rgb(224,224,224)) ); background:-moz-linear-gradient( center bottom, rgb(189,189,189) 39%, rgb(224,224,224) 70% ); text-shadow:1px 1px 1px #fff; >.table3 tbody td:nth-child(odd)
Добавим правую границу для последних td в строке:
.table3 tbody td:nth-last-child(1)
Описание слевой части имеет такой стиль:
.table3 tbody th
И добавляем иконку:
.table3 tbody span.check::before< content : url(../images/check2.png) >Красивое оформление таблиц
Стили браузера по умолчанию отображают таблицу и ее ячейки без видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу. С помощью CSS-стилей можно красиво оформить таблицу в соответствии с ее содержимым.
- Содержание:
- 1. Таблица с раздельными строками
- 2. Цветная таблица
- 3. Таблица с закругленными углами
- 4. Таблица с раздельными ячейками
- 5. Таблица-календарь
- 6. Таблица-жалюзи
- 7. Таблица-зебра
- 8. Таблица-меню
- 9. Таблица с акцентом на первый столбец
- 10. Таблица с эффектом размытия строк при наведении
- 11. Таблица-прайс
- 12. Таблица с темным фоном и с подчеркиванием текста при наведении
1. Таблица с раздельными строками
Таблицы с промежутками между строк помогают сконцентрироваться на связанной информации, расположенной в этой же строке таблицы, но в соседних ячейках. Для того, чтобы отделить текст от картинки, помещаем его в другую ячейку, объединив при этом две ячейки в заголовке таблицы (
), а правую границу между ячейками убираем.
Модель Цена Количество Итого 
Платье с цветочным принтом 2500 1 2500 
Платье с боковыми вставками 3000 1 3000
table < border-spacing: 0 10px; font-family: 'Open Sans', sans-serif; font-weight: bold; >th < padding: 10px 20px; background: #56433D; color: #F9C941; border-right: 2px solid; font-size: 0.9em; >th:first-child < text-align: left; >th:last-child < border-right: none; >td < vertical-align: middle; padding: 10px; font-size: 14px; text-align: center; border-top: 2px solid #56433D; border-bottom: 2px solid #56433D; border-right: 2px solid #56433D; >td:first-child < border-left: 2px solid #56433D; border-right: none; >td:nth-child(2)
2. Цветная таблица
Используя такой прием, можно эффектно оформить таблицу при помощи контрастных цветов, которые гармонично впишутся в цветовую гамму вашего сайта.
Company Q1 Q2 Q3 Q4 Microsoft 20.3 30.5 23.5 40.3 Google 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
table < font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; border-collapse: collapse; text-align: center; >th, td:first-child < background: #AFCDE7; color: white; padding: 10px 20px; >th, td < border-style: solid; border-width: 0 1px 1px 0; border-color: white; >td < background: #D8E6F3; >th:first-child, td:first-child
3. Таблица с закругленными углами
Благодаря добавлению в спецификацию CSS3 свойства border-radius , появилась возможность закругления углов таблицы без использования фоновых изображений. Чтобы добиться такого эффекта, нужно закруглить углы соответствующих ячеек.
Разметка HTML аналогично с примером 2.
table < font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; border-radius: 10px; border-spacing: 0; text-align: center; >th < background: #BCEBDD; color: white; text-shadow: 0 1px 1px #2D2020; padding: 10px 20px; >th, td < border-style: solid; border-width: 0 1px 1px 0; border-color: white; >th:first-child, td:first-child < text-align: left; >th:first-child < border-top-left-radius: 10px; >th:last-child < border-top-right-radius: 10px; border-right: none; >td < padding: 10px 20px; background: #F8E391; >tr:last-child td:first-child < border-radius: 0 0 0 10px; >tr:last-child td:last-child < border-radius: 0 0 10px 0; >tr td:last-child
4. Таблица с раздельными ячейками
Разметка HTML аналогично с примером 2.
table < font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; text-align: left; border-collapse: separate; border-spacing: 5px; background: #ECE9E0; color: #656665; border: 16px solid #ECE9E0; border-radius: 20px; >th < font-size: 18px; padding: 10px; >td
5. Таблица-календарь
My working weeks, March 2015 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
table < font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; text-align: center; border-collapse: collapse; border-spacing: 5px; background: #E1E3E0; border-radius: 20px; >th < font-size: 22px; font-weight: 300; padding: 12px 10px; border-bottom: 2px solid #F56433; color: #F56433; >tbody tr:nth-child(2) < border-bottom: 2px solid #F56433; >td
6. Таблица-жалюзи
Employee Salary Bonus Supervisor Stephen C. Cox $300 $50 Bob Josephin Tan $150 - Annie Joyce Ming $200 $35 Andy James A. Pentel $175 $25 Annie
table < font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; text-align: left; border-collapse: collapse; border-radius: 20px; box-shadow: 0 0 0 10px #F2906B; color: #452F21; >th < padding: 10px 8px; background: white; >table th:first-child < border-top-left-radius: 20px; >table th:last-child < border-top-right-radius: 20px; >td < border-top: 10px solid #F2906B; padding: 8px; background: white; >table td:first-child < border-bottom-left-radius: 20px; >table td:last-child
7. Таблица-зебра
Вертикальная зебра в оформлении таблицы позволит сделать акцент на столбцы, а эффект при наведении на строку добавит привлекательности такой таблице.
Q1 Q2 Q3 Q4 Microsoft 20.3 30.5 23.5 40.3 Google 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
table < border-spacing: 0; empty-cells: hide; >td < padding: 10px 20px; text-align: center; border-bottom: 1px solid #F4EEE8; transition: all 0.5s linear; >td:first-child < text-align: left; color: #3D3511; font-weight: bold; >th < padding: 10px 20px; color: #3D3511; border-bottom: 1px solid #F4EEE8; border-top-left-radius: 10px; border-top-right-radius: 10px; >td:nth-child(even) < background: #F6D27E; >td:nth-child(odd) < background: #D1C7BF; >th:nth-child(even) < background: #F6D27E; >th:nth-child(odd) < background: #D1C7BF; >.round-top < border-top-left-radius: 5px; >.round-bottom < border-bottom-left-radius: 5px; >tr:hover td
8. Таблица-меню
Холодные закуски Наименование Выход, гр. Цена, руб. Ассорти из овощей, зелени и сыра 250 190 Ассорти мясное 250 300 Ассорти рыбное (семга с/с, форель с/с) 250 350 Ассорти грибное 120 150 Соления из бочки (помидоры, огурцы, перец, чеснок, капуста) 250 180
table < font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; border-collapse: collapse; color: #686461; >caption < padding: 10px; color: white; background: #8FD4C1; font-size: 18px; text-align: left; font-weight: bold; >th < border-bottom: 3px solid #B9B29F; padding: 10px; text-align: left; >td < padding: 10px; >tr:nth-child(odd) < background: white; >tr:nth-child(even)
9. Таблица с акцентом на первый столбец
Comedy Adventure Action Children 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
.table_col < font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; width: 660px; background: white; text-align: left; border-collapse: collapse; color: #3E4347; >.table_col th:first-child, .table_col td:first-child < color: #F5F6F6; border-left: none; >.table_col th < font-weight: normal; border-bottom: 2px solid #F5E1A6; border-right: 20px solid white; border-left: 20px solid white; padding: 8px 10px; >.table_col td
10. Таблица с эффектом размытия строк при наведении
Company Q1 Q2 Q3 Q4 Microsoft 20.3 30.5 23.5 40.3 Google 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
.table_blur < background: #f5ffff; border-collapse: collapse; text-align: left; >.table_blur th < border-top: 1px solid #777777; border-bottom: 1px solid #777777; box-shadow: inset 0 1px 0 #999999, inset 0 -1px 0 #999999; background: linear-gradient(#9595b6, #5a567f); color: white; padding: 10px 15px; position: relative; >.table_blur th:after < content: ""; display: block; position: absolute; left: 0; top: 25%; height: 25%; width: 100%; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255,255,255,.08)); >.table_blur tr:nth-child(odd) < background: #ebf3f9; >.table_blur th:first-child < border-left: 1px solid #777777; border-bottom: 1px solid #777777; box-shadow: inset 1px 1px 0 #999999, inset 0 -1px 0 #999999; >.table_blur th:last-child < border-right: 1px solid #777777; border-bottom: 1px solid #777777; box-shadow: inset -1px 1px 0 #999999, inset 0 -1px 0 #999999; >.table_blur td < border: 1px solid #e3eef7; padding: 10px 15px; position: relative; transition: all 0.5s ease; >.table_blur tbody:hover td < color: transparent; text-shadow: 0 0 3px #a09f9d; >.table_blur tbody:hover tr:hover td
11. Таблица-прайс
Plans&Pricing Plan Price Basic 10$ Select Professional 20$ Select Premium 30$ Select Platinum 60$ Select
.table_price < border-collapse: collapse; border-left: 3px solid #F79361; border-right: 3px solid #F79361; border-bottom: 3px solid #F79361; font-family: "Lucida Grande", sans-serif; >.table_price caption < background: #F79361; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 10px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.3); color: white; font-family: "Roboto Slab",serif; font-style: normal; font-size: 26px; text-align: center; margin: 0; >.table_price td, .table_price th < padding: 10px; >.table_price th < text-align: left; font-size: 18px; >.table_price tr:nth-child(2n) < background: #E5E5E5; >.table_price td:last-of-type < text-align: center; >.table_price a < display: inline-block; padding: 5px 10px; background: #F79361; box-shadow: 2px 2px 0 0 #a22800; position: relative; >.table_price a:hover
12. Таблица с темным фоном и с подчеркиванием текста при наведении
Company Q1 Q2 Q3 Q4 Microsoft 20.3 30.5 23.5 40.3 Google 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
.table_dark < font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; width: 640px; text-align: left; border-collapse: collapse; background: #252F48; margin: 10px; >.table_dark th < color: #EDB749; border-bottom: 1px solid #37B5A5; padding: 12px 17px; >.table_dark td < color: #CAD4D6; border-bottom: 1px solid #37B5A5; border-right:1px solid #37B5A5; padding: 7px 17px; >.table_dark tr:last-child td < border-bottom: none; >.table_dark td:last-child < border-right: none; >.table_dark tr:hover td