Назад к уроку

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

1. Таблица с раздельными строками

МодельЦенаКол-воИтого
dress-2Платье с цветочным принтом250012500
Платье с боковыми вставками300013000

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

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3

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

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3

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

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3

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

My working weeks, March 2015
MondayTuesdayWednesdayThursdayFriday
23456
910111213
1617181920
2324252627
3031

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

EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie

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

Q1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3

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

Холодные закуски
НаименованиеВыход, гр.Цена, руб.
Ассорти из овощей, зелени и сыра250190
Ассорти мясное250300
Ассорти рыбное (семга с/с, форель с/с)250350
Ассорти грибное120150
Соления из бочки (помидоры, огурцы, перец, чеснок, капуста)250180

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

ComedyAdventureActionChildren
Scary MovieIndiana JonesThe PunisherWall-E
Epic MovieStar WarsBad BoysMadagascar
SpartanLOTRDie HardFinding Nemo
Dr. DolittleThe Mummy300A Bug's Life

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

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3

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

Plans&Pricing
PlanPrice
Basic10$Select
Professional20$Select
Premium30$Select
Platinum60$Select

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

CompanyQ1Q2Q3Q4
Microsoft20.330.523.540.3
Google50.240.6345.2339.3
Apple25.430.233.336.7
IBM20.415.622.329.3