Examples of nice looking html tables [closed]

Question

All tables on my app look like sh*t, it's making me lose hair, I've been trying to make them look better but I end up making them look worse, do you have any examples of nice looking tables? preferably with lots of rows and a fair amount of columns.

Answer 1

Maybe these designs can be useful to you

15 Tips for Designing Terrific Tables

30+ Nicest Table CSS Designs You Can Apply Into Your Project

Tables in Web Design: Beautiful Examples and Best Practices

HTML Table Building: 30+ Beautiful Examples And Useful Javascripts

Answer 2

I've added a couple of collections as comments at the top.

Connie Malamed who Wrote understanding graphics wrote a popular article about designing effective data tables which I helped explain through visualization and examples in my own somewhat lengthy resource on Effective design of data tables. Connie's original article is here.

The points made in both our articles may help you understand how to make your own tables look better rather than worse, by considering what is important to show and not to show. In particular, the Gestalt principles of design and whitespace are key elements of a good looking table.

Here's a summary of the design tips:

1. Meet the audience’s expectations
2. Order data to match the purpose of the table
3. Remove clutter
4. Create a visual hierarchy
5. Round numbers and avoid questioning
6. Perform calculations for the user
7. Provide consistent appearance
8. Align
9. Separate figure and ground
10. Reduce number of columns
11. Make comparison easy
12. Group similar data
13. Make effective use of the grid
14. Highlight the important values
15. Provide a brief verbal commentary
16. Use the white space
17. Use meaningful labels, and manage headings

Answer 3

I highly recommend this article: Designing with white-space: why 1+1=3

Abstracting away his own blog's layout, he has a very good point.