Share CSS table styles of 7 colors to beautify the user experience of web tables

Lao Zuo is not a web designer, but he often plays tricks on blogs and modifies some user experiences that he thinks are not very good, and only modifies some simple CSS styles. When encountering problems that cannot be solved, he can search for documents. As time goes by, we feel more and more wonderful about CSS styles. For example, when we are making a table, we can simply use CSS style sheets to modify various CSS table styles. When sharing page layout and content, tables are commonly used. Sometimes when Laozuo shares the content of evaluation, he may take screenshots directly to save time. In the future, he may share more styles, so that the user experience and information can be modified directly instead of taking screenshots.

In previous blog posts, several articles about CSS table styles have been shared:

16 HTML CSS price table templates with excellent user experience, with demos and downloads

8 beautiful HTML CSS table styles commonly used by designers

6 beautiful HTML CSS style user message forms

Today, when Lao Zuo was browsing several overseas front-end blogs, he saw that the following seven color CSS table styles were well sorted out, especially when it was necessary to add tables to the web page. The seemingly simple style was directly copied when it was needed, saving a lot of time.

First:

One of the CSS table styles

CSS style code part:

 /* Border styles */ #table-1 thead, # table-1 tr { border-top-width: 1px; border-top-style: solid; border-top-color: rgb(230, 189, 189); } #table-1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(230, 189, 189); } /* Padding and font style */ #table-1 td, # table-1 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; color: rgb(177, 106, 104); } /* Alternating background colors */ #table-1 tr: nth-child(even) { background: rgb(238, 211, 210) } #table-1 tr: nth-child(odd) { background: #FFF }

Second:

CSS Table Style 2

CSS style code part:

 /* Border styles */ #table-2 thead, # table-2 tr { border-top-width: 1px; border-top-style: solid; border-top-color: rgb(230, 189, 189); } #table-2 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(230, 189, 189); } /* Padding and font style */ #table-2 td, # table-2 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; color: rgb(177, 106, 104); } /* Alternating background colors */ #table-2 tr: nth-child(even) { background: rgb(238, 211, 210) } #table-2 tr: nth-child(odd) { background: #FFF }

Third:

CSS Table Style 3

CSS style code part:

 /* Border styles */ #table-3 thead, # table-3 tr { border-top-width: 1px; border-top-style: solid; border-top-color: rgb(235, 242, 224); } #table-3 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(235, 242, 224); } /* Padding and font style */ #table-3 td, # table-3 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; color: rgb(149, 170, 109); } /* Alternating background colors */ #table-3 tr: nth-child(even) { background: rgb(230, 238, 214) } #table-3 tr: nth-child(odd) { background: #FFF }

Fourth:

CSS Table Style 4

CSS code style part:

 /* Border styles */ #table-4 thead, # table-4 tr { border-top-width: 1px; border-top-style: solid; border-top-color: rgb(211, 202, 221); } #table-4 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(211, 202, 221); } /* Padding and font style */ #table-4 td, # table-4 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; color: rgb(95, 74, 121); } /* Alternating background colors */ #table-4 tr: nth-child(even) { background: rgb(223, 216, 232) } #table-4 tr: nth-child(odd) { background: #FFF }

Fifth:

CSS Table Style 5

CSS code style part:

 /* Table Head */ #table-5 thead th { background-color: rgb(156, 186, 95); color: #fff; border-bottom-width: 0; } /* Column Style */ #table-5 td { color: #000; } /* Heading and Column Style */ #table-5 tr, # table-5 th { border-width: 1px; border-style: solid; border-color: rgb(156, 186, 95); } /* Padding and font style */ #table-5 td, # table-5 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; font-weight: bold; }

Sixth:

CSS Table Style 6

CSS style code part:

 /* Table Head */ #table-6 thead th { background-color: rgb(128, 102, 160); color: #fff; border-bottom-width: 0; } /* Column Style */ #table-6 td { color: #000; } /* Heading and Column Style */ #table-6 tr, # table-6 th { border-width: 1px; border-style: solid; border-color: rgb(128, 102, 160); } /* Padding and font style */ #table-6 td, # table-6 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; font-weight: bold; }

Seventh:

CSS Table Style 7

CSS style code part:

 /* Table Head */ #table-7 thead th { background-color: rgb(81, 130, 187); color: #fff; border-bottom-width: 0; } /* Column Style */ #table-7 td { color: #000; } /* Heading and Column Style */ #table-7 tr, # table-7 th { border-width: 1px; border-style: solid; border-color: rgb(81, 130, 187); } /* Padding and font style */ #table-7 td, # table-7 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; font-weight: bold; }

The CSS table styles in the above seven colors can be directly copied with different colors and modified with rows and columns according to our own needs. Then add it to the TABLE table below:

 <table id="table-1"> <!--  Replace "table-1" with any of the design numbers --> <thead> <th>Name</th> <th>City</th> <th>Phone</th> </thead> <tbody> <tr> <td>Albert Ellis</td> <td>New York</td> <td>+1 718 000000</td> </tr> <tr> <td>Marcus Aurelius</td> <td>Rome</td> <td>+1 718 000000</td> </tr> <tr> <td>Epictetus</td> <td>Greece</td> <td>+1 718 000000</td> </tr> <tr> <td>Aristotle</td> <td>Greece</td> <td>+1 718 000000</td> </tr> </tbody> </table>

The overall framework in this document is TABLE, which is more suitable for the insertion style part of the article content.