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

Snail is not a web designer, but he often fiddles with the blog and modifies some user experiences that he thinks are not very good. He is only limited to modifying some simple CSS styles. If you encounter problems that cannot be solved, you can search Check out the documentation. As time goes by, we feel more and more the infinite wonders of CSS styles. For example, when we are making a table, we can simply use the modification of the CSS style sheet to create various CSS table styles. Tables are commonly used when sharing page layouts and content. Sometimes when Snails share review content, they may directly take screenshots to save trouble. In the future, they may share more styles, so that the user experience and if the information is Changes can be modified directly instead of taking screenshots.

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

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 Snail was browsing several overseas front-end blogs, I saw that the following 7 color CSS table styles are quite well organized, especially when you need to add tables to the web page. They seem to be simple styles, but when you need to use them Just copy it directly, saving a lot of time.

First type:

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 type:

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 type:

CSS table style three

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}

The fourth type:

CSS table style four

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}

The fifth type:

CSS table style five

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 type:

CSS table style six

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 type:

CSS table style seven

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;}

For the CSS table style parts of the above 7 colors, we can directly copy the different color parts and modify the rows and columns according to our own needs. Then add it to the TABLE table section below:

NameCityPhone

Albert Ellis	New York	+1 718 000000
Marcus Aurelius	Rome	+1 718 000000
Epictetus	Greece	+1 718 000000
Aristotle	Greece	+1 718 000000

The overall framework of this document still uses TABLE, which is more suitable for inserting styles into the article content.

Recommended site searches: domain name registration website, IP address query, 30-day virtual host trial, Hong Kong server, website registration information query, independent IP space, website registration information query, jsp host, cloud server hosting, how to check IP, < /p>