10 Clean HTML Table Design Using CSS 3 – Fresh Design

Previously, we have discussed how to create a table using HTML 5 and how to style a table with CSS 3, to complete the table design series. This time, I’ll show you 10 table design using CSS 3  that I have made a while back, hope it will give you a fresh idea in designing HTML table.

10 Best Clean HTML Table Design Using CSS 3

There are several things to be considered when designing a table, so it will gain the visitor interest and the displayed data remains comfortable to read.

Some tips while designing an HTML table:

  1. Give enough padding, so that the text/content has an enough distance to the edge of each column.
  2. Make sure the data clearly legible by giving an adequate color contrast between the background and the content.
  3. Identify the data (table content), whether horizontal (data read horizontally), vertical, or both, then, specify the color pattern to suit that type.
  4. If we display a lot of numeric data, then consider using a font that can display the numbers clearly, such as Verdana      .
  5. Adjust the color of the table with the color theme of our website, so it will look good when it is displayed in the middle of the text/article.
  6. Use monochromatic color combinations. One color with a specific hue while the others use different tint with the same hue. In a simple word. Use a color as a base color then use lighter or darker color for the others.
  7. Give a title to the table when needed.

Important Note

When using CSS selector to design a table, consider that some of them could be new selectors that are only available in CSS 3.

CSS 3 itself is already supported by modern browsers, but for Internet Explorer, it only available in version 9+

Some of CSS 3 selectors that are frequently used when designing a table are :last-child:nth-child and :empty()

1. HTML Table With Minimalist Design

This table only has horizontal borders on each row and have no background color (using container background color), so it looks minimalist.

This table suits to display horizontal data type, where the data is read horizontally from left to right or right to left on RTL website.

Although it has a simple design, it still elegant and keep focus on the data.

Table 1

Sales Data of Electronic Division
No Customer Item Date Amount
1 Andrew Television September 25, 2016 250
2 Bryan Washing Machine August 10, 2016 150
3 Cherly Water Dispenser August 11, 2016 95
4 Dean Refrigerator Juli 15, 2016 175
5 Esryl Wall Fan October 11, 2016 45
Total 715

This design commonly used while displaying a table in the middle of a bunch of text, because with no background and no vertical border, would make it blend to the content of the web.

2. Minimalist HTML Table Design Using Dash Border

If our website theme has an emphasis on a particular color, and not use strict a line/border, then we could try to design the table such as the following.

We give the table a light red color to the header text and horizontal soft dash border on each row. However, the design still looks simple and elegant.

Table 2

Sales Data of Electronic Division
No Customer Item Date Amount
1 Andrew Television September 25, 2016 250
2 Bryan Washing Machine August 10, 2016 150
3 Cherly Water Dispenser August 11, 2016 95
4 Dean Refrigerator Juli 15, 2016 175
5 Esryl Wall Fan October 11, 2016 45
Total 715

3. Zebra Stripping Table Design

Maybe the zebra stripping table design is a common design that we found.

This design will give the data rows (the body of the table <tbody>) an alternate color. In practice, there are a lot of combination, such as adding a specific background color to the header and footer, such as the following table.

Tip: If our application intended to display bunch of data, then this kind of design is suitable to use.

Table 3

Sales Data of Electronic Division
No Customer Item Date Amount
1 Andrew Television September 25, 2016 250
2 Bryan Washing Machine August 10, 2016 150
3 Cherly Water Dispenser August 11, 2016 95
4 Dean Refrigerator Juli 15, 2016 175
5 Esryl Wall Fan October 11, 2016 45
Total 715

4. Zebra Stripping Table Desing Without Border and Background on Header

This table is the same as the previous, the difference is that the header and footer have no background, in addition, we remove the vertical border on each column, so the reader focus on the data.

With no boundaries on the table (no border and background in the table header), this table suits to display data in the middle of text (Website with articles as its main content).

Table 4

Sales Data of Electronic Division
No Customer Item Date Amount
1 Andrew Television September 25, 2016 250
2 Bryan Washing Machine August 10, 2016 150
3 Cherly Water Dispenser August 11, 2016 95
4 Dean Refrigerator Juli 15, 2016 175
5 Esryl Wall Fan October 11, 2016 45
Total 715

5. Zebra Stripping Table Desing Without Background on Header

This table is also the same as the previous (#3), we eliminate background color on the header and footer. Keeping the border in each column, making it easier to read the data both horizontally and vertically.

Just like table #4, in the absence of background color on the header, make it suitable to display data on a website which articles as its main content.

Table 5

Sales Data of Electronic Division
No Customer Item Date Amount
1 Andrew Television September 25, 2016 250
2 Bryan Washing Machine August 10, 2016 150
3 Cherly Water Dispenser August 11, 2016 95
4 Dean Refrigerator Juli 15, 2016 175
5 Esryl Wall Fan October 11, 2016 45
Total 715

6. Minimalist Table Design With Background on Header

The following table design is similar to the #1, except that we give a background color on the header and a clear border on the footer.

We can use this design when we want to give clear distinct boundary between a table and other content.

The table is still suitable for displaying data on the website with articles as its main content, because although there is a background to the header, there is no background on the data.

Table 6

Sales Data of Electronic Division
No Customer Item Date Amount
1 Andrew Television September 25, 2016 250
2 Bryan Washing Machine August 10, 2016 150
3 Cherly Water Dispenser August 11, 2016 95
4 Dean Refrigerator Juli 15, 2016 175
5 Esryl Wall Fan October 11, 2016 45
Total 715

7. Zebra Stripping Table Desing

In this design, <th> element in the header <thead> doesn’t have a background, while the <th> element on the body element <body> has a light zebra color.

Furthermore, giving the body row a particular zebra color will make the attention focused on the existing data

Same as previous, the data type are horizontal, where visitors are directed to read data horizontally. In this example, the growth of a browser from month to month.

Table 7

Browser Usage Statistics, source: statcounter.com
Aug 2016 Jul 2016 Jun 2016 May 2016 Apr 2016 Mar 2016 Feb 2016
Chrome 58.37 % 58.26 % 57.89 % 56.94 % 56.75 % 56.4 % 55.33 %
Firefox 13.92 % 13.97 % 14.16 % 14.52 % 14.24 % 14.31 % 14.67 %
IE 9.8 % 9.77 % 10.71 % 11.38 % 12.14 % 12.52 % 13.38 %
Safari 9.61 % 9.74 % 9.64 % 9.69 % 9.47 % 9.47 % 9.46 %
Opera 1.78 % 1.77 % 1.72 % 1.83 % 1.87 % 1.91 % 2 %

8. Zebra Stripping Table Desing With Strong Color on Header

This design is similar to the previous (#7), the difference is we give the <th> element a strong background color.

This design is typically used if we want to display a table with clear boundaries to other content.

Using appropriate color (monochromatic) that we have discussed above, will make the table still look good.

Table 8

Browser Usage Statistics, source: statcounter.com
Browser Aug 2016 Jul 2016 Jun 2016 May 2016 Apr 2016 Mar 2016 Feb 2016
Chrome 58.37 % 58.26 % 57.89 % 56.94 % 56.75 % 56.4 % 55.33 %
Firefox 13.92 % 13.97 % 14.16 % 14.52 % 14.24 % 14.31 % 14.67 %
IE 9.8 % 9.77 % 10.71 % 11.38 % 12.14 % 12.52 % 13.38 %
Safari 9.61 % 9.74 % 9.64 % 9.69 % 9.47 % 9.47 % 9.46 %
Opera 1.78 % 1.77 % 1.72 % 1.83 % 1.87 % 1.91 % 2 %

9. Colorfull Vertical Zebra Stripping Table

The design of this table would give a different color for each column.

while the information in the previous table (#7 and #8) more emphasis on reading data horizontallly, this table emphasized on reading data vertically, although it is still relevant to read the data horizontally.

In this table, the reader will be directed to compare the usage trend of a specific browser rather than comparing it to other browsers.

Table 9

Browser Usage Statistics, source: statcounter.com
Month Crome Firefox IE Safari Opera
August 2016 58.37 % 13.92 % 9.8 % 9.61 % 1.78
August 2015 52.82 % 15.62 % 15.99 % 9.31 % 1.81
August 2014 46.26 % 17.5 % 20.31 % 10.81 % 1.47
August 2013 42.78 % 19.25 % 25.55 % 8.57 % 1.16 %
August 2012 33.59 % 22.85 % 32.85 % 7.39 % 1.63 %

10. Vertical Table Design

Last but not least, we design the table vertically. This is the same as previous (#9) where we want to direct the user to read the data vertically.

By giving a space between the columns indicate that there is no data correlation between columns.

Table 10

Course Categories, source udemy.com
Develpment IT & Software Marketing
Web Development IT Certification Branding
Mobile Apps Network & Security Digital Marketing
Databases Hardware Advertising
Development Tools Operating System Public Relation
E-Commerce Other Affiliate Marketing

Although the above information rarely displayed using a table (usually using HTML list), the above example can still give us an idea of designing a layout and combining colors.

Final Words

Designing table with CSS 3 is not so difficult.

If we look at the source code of the above examples, we know that we only use little CSS code, this is because we don’t style too many elements.

However, sometimes the idea to get a good table design and get a right color combination is not easy.

By providing 10 example table design, I hope it makes you easier to find a table layout design ideas and color combinations that are appropriate to your website.

Related Post

Leave a comment