Красивое оформление таблиц css

Красивое оформление таблиц css

Таблицы с промежутками между строк помогают сконцентрироваться на связанной информации, расположенной в этой же строке таблицы, но в соседних ячейках. Для того, чтобы отделить текст от картинки, помещаем его в другую ячейку, объединив при этом две ячейки в заголовке таблицы <th colspan="2">Модель</th> , а правую границу между ячейками убираем.

Разметка HTML

Модель Цена Количество Итого Платье с цветочным принтом 2500 1 2500 Платье с боковыми вставками 3000 1 3000

Стили CSS

table th th:first-child th:last-child td td:first-child td:nth-child(2)

2. Цветная таблица

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

Разметка HTML

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

Стили CSS

table th, td:first-child th, td td th:first-child, td:first-child

3. Таблица с закругленными углами

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

Разметка HTML — аналогично с примером 2.

Стили CSS

table th th, td th:first-child, td:first-child th:first-child th:last-child td tr:last-child td:first-child tr:last-child td:last-child tr td:last-child

4. Таблица с раздельными ячейками

Разметка HTML

— аналогично с примером 2.

Стили CSS

table th td

5. Таблица-календарь

Разметка HTML

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

Стили CSS

table th tbody tr:nth-child(2) td

6. Таблица-жалюзи

Разметка HTML

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

Стили CSS

table th table th:first-child table th:last-child td table td:first-child table td:last-child

7. Таблица-зебра

Вертикальная зебра в оформлении таблицы позволит сделать акцент на столбцы, а эффект при наведении на строку добавит привлекательности такой таблице.

Разметка HTML

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

Стили CSS

table td td:first-child th td:nth-child(even) td:nth-child(odd) th:nth-child(even) th:nth-child(odd) .round-top .round-bottom tr:hover td

8. Таблица-меню

Разметка HTML

Холодные закуски Наименование Выход, гр. Цена, руб. Ассорти из овощей, зелени и сыра 250 190 Ассорти мясное 250 300 Ассорти рыбное (семга с/с, форель с/с) 250 350 Ассорти грибное 120 150 Соления из бочки (помидоры, огурцы, перец, чеснок, капуста) 250 180

Стили CSS

table caption th td tr:nth-child(odd) tr:nth-child(even)

9. Таблица с акцентом на первый столбец

Разметка HTML

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

Стили CSS

.table_col .table_col th:first-child, .table_col td:first-child .table_col th .table_col td

10. Таблица с эффектом размытия строк при наведении

Разметка HTML

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

Стили CSS

.table_blur .table_blur th .table_blur th:after .table_blur tr:nth-child(odd) .table_blur th:first-child .table_blur th:last-child .table_blur td .table_blur tbody:hover td .table_blur tbody:hover tr:hover td

11. Таблица-прайс

Разметка HTML

Plans&Pricing Plan Price Basic 10$ Select Professional 20$ Select Premium 30$ Select Platinum 60$ Select

Стили CSS

.table_price .table_price caption .table_price td, .table_price th .table_price th .table_price tr:nth-child(2n) .table_price td:last-of-type .table_price a .table_price a:hover

12. Таблица с темным фоном и с подчеркиванием текста при наведении

Разметка HTML

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

Стили CSS

.table_dark .table_dark th .table_dark td .table_dark tr:last-child td .table_dark td:last-child .table_dark tr:hover td

Вот и все, если Вы хотите «поблагодарить» наше IT сообщество — у вас есть такая возможность: справа есть варианты для пожертвований на развитие портала. Или поделитесь статьей в ваших соц.стеях через сервисы ниже. Если у вас есть доп. списки — будем рады если прикрепите их в комментарии.

📎📎📎📎📎📎📎📎📎📎