Таблица стилей css шаблон

50+ CSS Tables — Free Code + Demos

Collection of 50+ CSS Tables. All items are 100% free and open-source. The list also includes simple css tables, responsive, and pricing.

1. Zigzag Table

2. Table With Frozen Table Header And Left Column

3. Sort Table Rows By Table Headers

4. Responsive Tables Using LI

5. Responsive Table HTML And CSS Only

HTML Table made responsive only with CSS. On Mobile the header row is fixed to the left, and the content is scrollable horizontally.

6. Sticky Table Headers By Position Sticky

Trying out to make a sweet table with sticky table headers if their table is in the viewport. (Like the iOS names list names beginning capital letter)

7. Responsive & Accessible Data Table

Mobile-first responsive and accessible data table. At narrower view ports, the thead is hidden, rows are turned into cards with labels shown using a data-* attribute.

8. Grid CSS Periodic Table

9. CSS Grid: Periodic Table

My very first CSS Grid Experiment! So I can’t actually group them together in a cluster like an actual periodic table or it wouldn’t make sense or would look too forced 😔 One of my fondest memories of 2018 is when I found the resolve to deactivate Facebook, only to have my team lead tel.

10. Periodic Table Of Elements — HTML/CSS

11. Periodic Table Of Type CSS Grid

12. Period1K — JS1K 2016 Entry

13. CSS Periodic Table

14. Tailwind CSS Pricing Panel Responsive

15. Pricing Tables

Just my version of pricing-tables. Feel free to play around with them — and please credit me if you like it 😀

16. #024 — Pricing Plans

17. Pricing Table

18. Pricing Table Ui

19. Pricing Table UI Design

20. Pricing Table

Pricing table comparing 3 different plans for a mystical computing company. I used the design from this shot. https://dribbble.com/shots/2371007-Pricing-Day-030-dailyui

21. Responsive Table With Flexbox

The idea was to create a nice working table which is working on smaller screens also. I think this is a nice solution. Works even with a width of 405px.

22. CSS Responsive Table Layout

Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.

23. Fixed Table Header

24. Responsive Table

25. Pure CSS Table Highlight

A simple (and nasty) trick to have vertical and horizontal highlight on hover on tables made with pure CSS.

26. Responsive Table With RWD-Table-Patterns

27. Responsive Table + Detail View

28. Responsive Table

29. Nutrition Facts Table In HTML And CSS

30. Bootstrap Pricing Table

31. Adaptive Pricing Table

32. 062 — Price Table

33. Material Pricing Tables

34. Responsive Flip Pricing Table

Tags: responsive flip pricing table, pricing-table, flip pricing table, responsive pricing table

35. Responsive Flip Pricing Table

Tags: responsive flip pricing table, pricing-table, flip pricing table, responsive pricing table

36. Pricing Tables

37. Pricing Table

38. Responsive Tables Using LI

39. Mobile Table With Comparison View

Creating a mobile table with a comparison view. My knowledge of javascript is very limited/non-existent, so functionality will have to built in at another time. I think this could be easily expanded to a desktop view to show all plans at once. Phone plans are at the top and plan features .

Источник

43 CSS Tables

Collection of free HTML and CSS table code examples: simple, responsive, pricing, periodic, etc. Update of May 2020 collection. 6 new item.

Table of Contents:

Related Articles

Tables

Author

Links

Made with

About a code

Zigzag Table

A table formatted in a zigzag diagonal layout.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Table with Pagination

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Table with Frozen Table Header and Left Column

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Sort Table Rows By Table Headers

Sort table rows by table headers — ascending and descending.

Author

Links

Made with

About the code

Responsive Tables Using li

Author

Links

Made with

About the code

Responsive Table HTML and CSS Only

HTML table made responsive only with CSS. On mobile the header row is fixed to the left, and the content is scrollable horizontally.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive Table With Flexbox

The idea was to create a nice working table which is working on smaller screens also.
Made by Matys
April 6, 2017

CSS Responsive Table Layout

Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.
Made by Luke Peters
February 21, 2017

Fixed Table Header

Fixed table header with simple jQuery code.
Made by Nikhil Krishnan
November 3, 2016

Responsive Table

CSS tricks method responsive table.
Made by Alico
April 11, 2016

Pure CSS Table Highlight

A simple (and nasty) trick to have vertical and horizontal highlight on hover on tables made with pure CSS.
Made by Alexander Erlandsson
March 22, 2016

Author

Links

Made with

About the code

Sticky Table Headers by position: sticky;

Trying out to make a sweet table with sticky table headers if their table is in the viewport (like the iOS names list names beginning capital letter).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive Table

Responsive table with rwd-table-patterns.
Made by SitePoint
April 15, 2015

CSS Responsive Table & Detail View

An example table and detail view scenario.
Made by Heather Buchel
June 29, 2014

Author

Links

Made with

About a code

CSS Table

Using CSS to fade-in a row, fade-out a row and show data in the table updating on a live basis. Also hovering over a row expands to show more information.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive Table

Table collapses into a «list» on small screens. Headers are pulled from data attributes.
Made by Geoff Yuen
March 25, 2014

Author

Источник

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

Селектор nowrap не позволяет переносить строки. Полезный селектор, но не увлекайтесь, а то таблица «улетит».

Простая таблица

Итак, добавьте в ваш CSS файл следующий код:

.simple-little-table  font-family: Arial, Helvetica, sans-serif; color: #666; font-size: 12px; text-shadow: 1px 1px 0 #fff; background: #eaebec; margin: 20px; border: #ccc 1px solid; border-collapse: separate; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 2px #d1d1d1; -webkit-box-shadow: 0 1px 2px #d1d1d1; box-shadow: 0 1px 2px #d1d1d1; > .simple-little-table th  font-weight: 700; padding: 21px 25px 22px; border-top: 1px solid #fafafa; border-bottom: 1px solid #e0e0e0; background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb)); background: -moz-linear-gradient(top, #ededed, #ebebeb); > .simple-little-table th:first-child  text-align: left; padding-left: 20px; > .simple-little-table tr:first-child th:first-child  border-top-left-radius: 3px; > .simple-little-table tr:first-child th:last-child  border-top-right-radius: 3px; > .simple-little-table tr  text-align: center; padding-left: 20px; > .simple-little-table tr td:first-child  text-align: left; padding-left: 20px; border-left: 0; > .simple-little-table tr td  padding: 18px; border-top: 1px solid #fff; border-bottom: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; background: #fafafa; background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa)); background: -moz-linear-gradient(top, #fbfbfb, #fafafa); > .simple-little-table tr:nth-child(even) td  background: #f6f6f6; background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6)); background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6); > .simple-little-table tr:last-child td  border-bottom: 0; > .simple-little-table tr:last-child td:first-child  border-bottom-left-radius: 3px; > .simple-little-table tr:last-child td:last-child  border-bottom-right-radius: 3px; > .simple-little-table tr:hover td  background: #f2f2f2; background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0)); background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0); > .simple-little-table a:link, .simple-little-table a:visited  color: #666; font-weight: 700; text-decoration: none; > .simple-little-table a:visited  color: #999; > .simple-little-table a:active, .simple-little-table a:hover  color: #bd5a35; text-decoration: underline; > 

Теперь в тексте вашей статьи можете добавить:

 class="simple-little-table" cellspacing="0">  Алгоритмы Выполненность Наличие прогонов   Генетический алгоритм 100% Да   Муравьиный алгоритм 100% Да   Метод Ньютона 20% Нет   Дифференциальный алгоритм 80% Нет   Метод наискорейшего пуска 100% Да   Случайный поиск 23% Да   href="blog.harrix.org">Гиперссылка  80%  href="blog.harrix.org">Да    

Примеры оформления таблиц с помощью CSS стилей.

Источник