Posts in current category

Four good-looking and practical CSS table styles to share


May 04, 2021 02:00 CSS



In order for users to have a better reading experience, it is necessary to present the data in the article in a more intuitive way, so it is important to have a good table design. Below, w3cschool shares 4 good-looking and useful CSS table styles.


How to do this: Copy and paste directly and you can open the display in your browser

- CSS Quick Start

1. Single-pixel border CSS table

Four good-looking and practical CSS table styles to share


This is a simple but commonly used table style.

Source:

table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;}

table.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #dedede;}

table.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;}


Try it out . . .

2. CSS style table with background chart

Four good-looking and practical CSS table styles to share

This style and the above is similar, but more background map, the visual will look a lot better.

Source:

table.imagetable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #999999;border-collapse: collapse;}

table.imagetable th {background:#b5cfd2 url('cell-blue.jpg');border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;}

table.imagetable td {background:#dcddc0 url('cell-grey.jpg');border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;}


Try it out . . .

3. CSS style table that automatically rounds the entire line of color (JS required)

Four good-looking and practical CSS table styles to share

This CSS table automatically switches the color of each row, which is great when we edit a table with huge data.

Source:

function altRows(id){

if(document.getElementsByTagName){

var table = document.getElementById(id);

var rows = table.getElementsByTagName("tr");

for(i = 0; i < rows.length; i++){

if(i % 2 == 0){

rows[i].className = "evenrowcolor";

}else{

rows[i].className = "oddrowcolor";

}}}}

window.onload=function(){

altRows('alternatecolor');}


Try it out . . .

4. Hover over the highlighted CSS style table (JS required)

Four good-looking and practical CSS table styles to share

Pure CSS display table highlighting shows that there is a problem in IE, so JS is used here to highlight.

Note: Do not define the background color of the grid.

Source:

table.hovertable tr {

background-color:#d4e3e5;}


Try it out . . .

The above is w3cschool for you to recommend several more common and commonly used CSS table styles, I hope you like.