Four good-looking and practical CSS table styles to share
May 04, 2021 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
1. Single-pixel border CSS table
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
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)
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)
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:
The above is w3cschool for you to recommend several more common and commonly used CSS table styles, I hope you like.