21 powerful and beautiful ajax/CSS table designs

This article collects and organizes over 20 powerful and pretty ajax/CSS table designs to share with you, including sorting and filtering table data.

Let's take a look at these tables:

1. tablecloth

Developed by CSS globe, tablecloth is a lightweight and easy-to-use table that simply adds table styles to your HTML table elements.

2. Ask the CSS guy table

Ask the CSS guy table to teach us how to create a table that clearly shows the relationship between the data. For example, when you click a table element, this element is displayed, the related category relationships are displayed in both the column and the horizontal column.

3. a css styled Table Version 2

Veerle duoh shows us a beautiful table design and teaches us how to use CSS to attract users' attention.

4. sortable table

Sortable table demonstrates how to sort data in ascending or descending order and how to filter data in a table.

5. row locking with CSS and JavaScript

CSS guy again uses the highlighted focus effect on the table. Unless you click again, the form data remains high. It also provides another example: Another example to lock rows with radios.

6. Vertical scrolling tables

If you have a large amount of table data, but you do not have much space to display it, this may be a good method: a pure CSS table with a fixed title and footer, and the scrolling content.

7. replicating a tree table

This is a tree shape table designed with HTML and CSS.

8. paginate, sort and search a table with Ajax and rails

This table provides a dynamic interface without refreshing the entire page.

9. collapsible tables with Dom and CSS

This table is added with a script prompt in the arrow image to control the stretching and shrinking of the table.

10. tablesorter plug-in for jquery

Its main features include multi-column sorting, supported rowspan and colspan attributes, and many other features.

11. stripe your tables the OO way

The javascript is used to alternate the colors of rows in the table, and the onmouseover and onmouseout events are added. When you click the mouse, the background color is switched.

12. mootools table row & column highlighting

Based on the mootools framework, the row and column of the cell when the mouse is hovering are highlighted.

13. CSS table Gallery

Gallery is a site dedicated to collecting Table Styles. Below is a table style:

14. jquery table Filter

You can sort and filter data in different ways.

15. sortable/resizable/editable tablekit

Based on the prototype framework, tablekit collects various HTML tables and can use ajax to edit table column sizes and sorting in real time.

16. make all your tables sortable

17. Zebra tables

Alistapart provides an excellent example of how to use JavaScript and Dom to change the background color style to highlight cells.

18. standardista table sorting

Standardista table sorting is a javascript module that allows you to sort any columns of an HTML data table.

19. gridview3 example

20. mootable

21. Drag & Drop sortable lists with JavaScript and CSS