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

Table

Содержание
  1. CSS Tables
  2. Table Borders
  3. Example
  4. Full-Width Table
  5. Example
  6. Double Borders
  7. Collapse Table Borders
  8. Example
  9. 43 CSS Tables
  10. Table of Contents:
  11. Related Articles
  12. Tables
  13. Author
  14. Links
  15. Made with
  16. About a code
  17. Zigzag Table
  18. Author
  19. Links
  20. Made with
  21. About a code
  22. Table with Pagination
  23. Author
  24. Links
  25. Made with
  26. About a code
  27. Table with Frozen Table Header and Left Column
  28. Author
  29. Links
  30. Made with
  31. About the code
  32. Sort Table Rows By Table Headers
  33. Author
  34. Links
  35. Made with
  36. About the code
  37. Responsive Tables Using li
  38. Author
  39. Links
  40. Made with
  41. About the code
  42. Responsive Table HTML and CSS Only
  43. Responsive Table With Flexbox
  44. CSS Responsive Table Layout
  45. Fixed Table Header
  46. Responsive Table
  47. Pure CSS Table Highlight
  48. Author
  49. Links
  50. Made with
  51. About the code
  52. Sticky Table Headers by position: sticky;
  53. Responsive Table
  54. CSS Responsive Table & Detail View
  55. Author
  56. Links
  57. Made with
  58. About a code
  59. CSS Table
  60. Responsive Table
  61. Author
  62. Tables
  63. Bordered Table
  64. Table with Horizontal Borders
  65. Striped Table
  66. Html Table Design Examples using Html and CSS
  67. Simple table design example 1:
  68. Simple table design with CSS example 2:
  69. example 4:

CSS Tables

The look of an HTML table can be greatly improved with CSS:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Try it Yourself »

Table Borders

To specify table borders in CSS, use the border property.

Firstname Lastname
Peter Griffin
Lois Griffin
Читайте также:  Заголовок страницы

Example

Full-Width Table

Firstname Lastname
Peter Griffin
Lois Griffin

Example

Double Borders

To remove double borders, take a look at the example below.

Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a single border:

Firstname Lastname
Peter Griffin
Lois Griffin

Example

Firstname Lastname
Peter Griffin
Lois Griffin

Источник

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

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

Источник

Tables

To style an HTML table, add the pure-table classname. This class adds padding and borders to table elements, and emphasizes the header.

 class="pure-table"> thead> tr> th>#th> th>Maketh> th>Modelth> th>Yearth> tr> thead> tbody> tr> td>1td> td>Hondatd> td>Accordtd> td>2009td> tr> tr> td>2td> td>Toyotatd> td>Camrytd> td>2012td> tr> tr> td>3td> td>Hyundaitd> td>Elantratd> td>2010td> tr> tbody> table>

Bordered Table

 class="pure-table pure-table-bordered"> thead> tr> th>#th> th>Maketh> th>Modelth> th>Yearth> tr> thead> tbody> tr> td>1td> td>Hondatd> td>Accordtd> td>2009td> tr> tr> td>2td> td>Toyotatd> td>Camrytd> td>2012td> tr> tr> td>3td> td>Hyundaitd> td>Elantratd> td>2010td> tr> tbody> table>

Table with Horizontal Borders

 class="pure-table pure-table-horizontal"> thead> tr> th>#th> th>Maketh> th>Modelth> th>Yearth> tr> thead> tbody> tr> td>1td> td>Hondatd> td>Accordtd> td>2009td> tr> tr> td>2td> td>Toyotatd> td>Camrytd> td>2012td> tr> tr> td>3td> td>Hyundaitd> td>Elantratd> td>2010td> tr> tbody> table>

Striped Table

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
4 Ford Focus 2008
5 Nissan Sentra 2011
6 BMW M3 2009
7 Honda Civic 2010
8 Kia Soul 2010 
 class="pure-table"> thead> tr> th>#th> th>Maketh> th>Modelth> th>Yearth> tr> thead> tbody> tr class="pure-table-odd"> td>1td> td>Hondatd> td>Accordtd> td>2009td> tr> tr> td>2td> td>Toyotatd> td>Camrytd> td>2012td> tr> tr class="pure-table-odd"> td>3td> td>Hyundaitd> td>Elantratd> td>2010td> tr> tr> td>4td> td>Fordtd> td>Focustd> td>2008td> tr> tr class="pure-table-odd"> td>5td> td>Nissantd> td>Sentratd> td>2011td> tr> tr> td>6td> td>BMWtd> td>M3td> td>2009td> tr> tr class="pure-table-odd"> td>7td> td>Hondatd> td>Civictd> td>2010td> tr> tr> td>8td> td>Kiatd> td>Soultd> td>2010td> tr> tbody> table>

This site is built with ❤️ using Pure v 3.0.0
All code on this site is licensed under the Yahoo BSD License unless otherwise stated.

© 2014 — Present Yahoo Inc. All rights reserved.

Источник

Html Table Design Examples using Html and CSS

Today we are going to create different tables using HTML & CSS. We can do Html table designs easily. You have to study below Html-table design examples. We will start at the beginning. Let’s try it.

Simple table design example 1:

    th, td  
 
IdName 
 
01Nilu 
 
02Emma 
 
03Philip

If you add the above code correctly you can get the below output.

example 1

Here I used border property to the table tag to add a border to the table. Cell padding defines the space between the cell content and its border. To set the padding, we can use the padding property. To align the items in the table, you can use the text-align property.

Simple table design with CSS example 2:

Next, we will see another example for HTML table design.

    tr:hover < background-color: #55E6C1; >.a < text-transform: uppercase; color: darkblue; font-weight: bolder; >.a:hover < background-color: #FD7272; >td  
 
Name Home Town Bith Day Gender 
 
John Melbourne 1997-10-08 Male 
 
Thuwan Delhi 2000-04-13 Male 
 
Emma Melbourne 1997-12-18 Female 
 
Wimal Colombo 1995-08-29 Male 
 
Kathi Paris 2001-09-15 Female

I designed my table using CSS. The output of the above code in the below.

Next, we move to another table. First, we build an HTML file.

example 4:

      
  
Reg:No Name Points Rank 
   
1001 Edward 510 56 
 
1520 Sally 720 45 
 
1812 Nick 250 225

tag is used to group header content in HTML table. tag used to group the body content in the table. These elements specify each part of a table(header, body, footer). You can get output like below.

Then we can add styles to our table.

  * < font-family: sans-serif; >.content < border-collapse: collapse; margin: 25px 0; font-size: 0.9em; min-width: 400px; border-radius: 5px 5px 0 0; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); >.content thead tr < background-color: #1B1464; color: #ffffff; text-align: left; font-weight: bold; >.content th, .content td < padding: 12px 15px; >.content tbody tr < border-bottom: 1px solid #dddddd; >.content tbody tr:nth-of-type(even) < background-color: #f3f3f3; >.content tbody tr:last-of-type < border-bottom: 2px solid #1B1464; >.content tbody tr.r

If you add correctly, you can view the below page. here I used some properties. I think now you are familiar with these properties and values. Because In previous parts I explained these things properly. If you don’t know please refers to those things. It will help to increase your knowledge as well.

Moreover, the nth-of-type(n) selector compares every element that is the nth child, of its parent element. n can be a number, a formula, or a keyword. Odd and even is a keyword that can be used to match child elements whose indexes are odd or even.

example 4

I think if you had difficulties with creating a table, Now it will be clear. Please try these things and grow your path. Here I give simple help to you. Please like and join Maztars to know more things. And also please share this with your friends and if you have a problem, you can comment here. Thanks a lot and see you at the next lesson.

Welcome to maztars! I’m Nidhi, a passionate and experienced software engineer dedicated to creating innovative solutions and enhancing user experiences. With a strong background in software development and a genuine love for technology, I strive to make a positive impact through my work. As a dedicated software engineer, I am committed to leveraging my skills, experience, and passion to create exceptional software solutions that solve real-world problems. Whether you need a web application, a mobile app, or any other software solution, I am here to help you turn your ideas into reality.

Thank you for visiting maztars, and I look forward to collaborating with you!

Источник

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