Красивые таблицы CSS
1. Таблица с раздельными строками
| Модель | Цена | Кол-во | Итого | |
|---|---|---|---|---|
 |
Платье с цветочным принтом | 2500 | 1 | 2500 |
 |
Платье с боковыми вставками | 3000 | 1 | 3000 |
2. Цветная таблица
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| 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 |
3. Таблица с закругленными углами
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| 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 |
4. Таблица с раздельными ячейками
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| 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 |
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 | |||
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 |
7. Таблица-зебра
| Q1 | Q2 | Q3 | Q4 | |
|---|---|---|---|---|
| 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 |
8. Таблица-меню
| Наименование | Выход, гр. | Цена, руб. |
|---|---|---|
| Ассорти из овощей, зелени и сыра | 250 | 190 |
| Ассорти мясное | 250 | 300 |
| Ассорти рыбное (семга с/с, форель с/с) | 250 | 350 |
| Ассорти грибное | 120 | 150 |
| Соления из бочки (помидоры, огурцы, перец, чеснок, капуста) | 250 | 180 |
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 |
10. Таблица с эффектом размытия строк при наведении
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| 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 |
11. Таблица-прайс
| Plan | Price | |
|---|---|---|
| Basic | 10$ | Select |
| Professional | 20$ | Select |
| Premium | 30$ | Select |
| Platinum | 60$ | Select |
12. Таблица с темным фоном и с подчеркиванием текста при наведении
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| 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 |