Warning: mysqli_connect(): (HY000/2002): Connection refused in /home/programc/public_html/wp-content/plugins/wp-pro-quiz/wp-pro-quiz.php on line 38

Warning: mysqli_query() expects parameter 1 to be mysqli, boolean given in /home/programc/public_html/wp-content/plugins/wp-pro-quiz/wp-pro-quiz.php on line 40

Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, null given in /home/programc/public_html/wp-content/plugins/wp-pro-quiz/wp-pro-quiz.php on line 41

Warning: mysqli_query() expects parameter 1 to be mysqli, boolean given in /home/programc/public_html/wp-content/plugins/wp-pro-quiz/wp-pro-quiz.php on line 45

Warning: mysqli_query() expects parameter 1 to be mysqli, boolean given in /home/programc/public_html/wp-content/plugins/wp-pro-quiz/wp-pro-quiz.php on line 48

Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, null given in /home/programc/public_html/wp-content/plugins/wp-pro-quiz/wp-pro-quiz.php on line 49
Best Styling for HTML Tables - CSS styles - Get Program Code
Home / HTML / Best Styling for HTML Tables – CSS styles

Best Styling for HTML Tables – CSS styles

If you want to style your HTML Tables appearing throughout the websites with good designs and colourful professional HTML Table styles then here are some awesome TOP designs for you: without using the style code again and again.

First You should read ->how to style HTML Tables on your Website

If you dont know how to use this CSS or apply this CSS then Read this article:

How to apply customized CSS in WordPress | How to add Customised CSS in Blogger

STYLE #1 | SIMPLE DESIGN GREEN COLOUR TABLE HEADING

<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
</style>

TABULAR VIEW: 

NameEarningsInvestments
Michael$45000$2300
Rachael$55999$5150
Alister$90000$3000
ROB$21000$1200

STYLE #2 | Colour the row on Hover

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
tr:hover {background-color: rgba(76, 175, 80, 0.5);}
th {
    background-color: #4CAF50;
    color: white;
}

TABULAR VIEW:

NameEarningsInvestments
Michael$45000$2300
Rachael$55999$5150
Alister$90000$3000
ROB$21000$1200

 

STYLE #3 | Round Corners Table and Border Color

<style type="text/css">
table.roundedCorners { 
  border: 10px solid RoyalBlue;
  border-radius: 13px; 
  }
table.roundedCorners td, 
table.roundedCorners th { 
  border-bottom: 1px dotted black;
  padding: 5px; 
  }
</style>

html table styles

Leave a Reply

Your email address will not be published. Required fields are marked *

Preventing spam * Time limit is exhausted. Please reload the CAPTCHA.