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.

DEMO

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.

Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Our Commitment: We respect your privacy, we'll not share your credential to any party

Related Post

Styling Table Using CSS 3