Главная » Языки программирования

Table html красивая таблица

На чтение 6 мин
Содержание
  1. 51 Stylised CSS Tables
  2. 43 CSS Tables
  3. Table of Contents:
  4. Related Articles
  5. Tables
  6. Author
  7. Links
  8. Made with
  9. About a code
  10. Zigzag Table
  11. Author
  12. Links
  13. Made with
  14. About a code
  15. Table with Pagination
  16. Author
  17. Links
  18. Made with
  19. About a code
  20. Table with Frozen Table Header and Left Column
  21. Author
  22. Links
  23. Made with
  24. About the code
  25. Sort Table Rows By Table Headers
  26. Author
  27. Links
  28. Made with
  29. About the code
  30. Responsive Tables Using li
  31. Author
  32. Links
  33. Made with
  34. About the code
  35. Responsive Table HTML and CSS Only
  36. Responsive Table With Flexbox
  37. CSS Responsive Table Layout
  38. Fixed Table Header
  39. Responsive Table
  40. Pure CSS Table Highlight
  41. Author
  42. Links
  43. Made with
  44. About the code
  45. Sticky Table Headers by position: sticky;
  46. Responsive Table
  47. CSS Responsive Table & Detail View
  48. Author
  49. Links
  50. Made with
  51. About a code
  52. CSS Table
  53. Responsive Table
  54. Author
  55. Красивые таблицы CSS в HTML
  56. Простая таблица

51 Stylised CSS Tables

Then check this list of CSS tables, they are responsive too.

You may also like

  • 75 CSS Text Animations You Can Use
  • 15 Amazing CSS Animated Background for you to try
  • 57 Beautiful CSS Cards examples to improve your UI
  • 19 Cool CSS Loading Animation to inspire you
  • 17 Fancy CSS Search Boxes
  • 21 Modern CSS menu examples
  • 19 Stylish CSS forms
  • 23 Fantastic CSS Hover Effects
  • 19 CSS Border Animations you can implement
  • 13 Pure CSS Dropdown Menus
  • 15 Creative CSS Filter Examples
  • 35 Unique CSS Text Effects
  • 15 CSS Sliders you can use
  • 21 New Bootstrap Login Forms for you
  • 19 Bootstrap Profiles you can use for yourself
  • 13 Material Design Login Forms
  • 35 Cool CSS Select Boxes
  • 15 CSS Range Sliders you can use today
  • 35 Creative use of CSS clip-path examples
  • 29 Unique CSS Toggle Switches
  • 41 Beautiful CSS Animation Examples
Читайте также:  Php что такое fallback

Pure CSS Responsive Accordion Table

Dev: Anthony Collurafici

See the Pen CSS table by Andrew Lohman (@ajlohman) on CodePen.

Dev: Andrew Lohman

Fixed table header

Dev: Nikhil Krishnan

Simple Responsive Table in CSS

Dev: Matt Smith

See the Pen Data Table by alassetter (@alassetter) on CodePen.

Dev: alassetter

CSS Responsive Table Layout

Dev: Luke Peters

Responsive

See the Pen Responsive by Pablo García (@pablorgarcia) on CodePen.

Dev: Pablo García

Источник

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:

Tables

Demo image: Zigzag Table

Author

Made with

About a code

Zigzag Table

A table formatted in a zigzag diagonal layout.

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

Author

Made with

About a code

Table with Pagination

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

Author

Made with

About a code

Table with Frozen Table Header and Left Column

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

Demo image: Sort Table Rows By Table Headers

Author

Made with

About the code

Sort Table Rows By Table Headers

Sort table rows by table headers — ascending and descending.

Demo image: Responsive Tables using LI

Author

Made with

About the code

Responsive Tables Using li

Author

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

Demo Image: Responsive Table With Flexbox

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

Demo Image: CSS Responsive Table Layout

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

Читайте также:  Python вывод словаря построчно

Demo Image: Fixed Table Header

Fixed Table Header

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

Demo Image: Responsive Table

Responsive Table

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

Demo Image: Pure CSS Table Highlight

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

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

Demo Image: Responsive Table

Responsive Table

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

Demo Image: CSS Responsive Table & Detail View

CSS Responsive Table & Detail View

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

Author

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

Demo Image: Responsive Table

Responsive Table

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

Demo image: Responsive And Accessible Data Table

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 стилей.

Источник

Оцените статью
© 2023 Программирование