CSS Table Style

CSS Table Style


CSS Table Style - 
We can style tables with different colors and we can aslo give different padding etc.
1. Firstly we will see how we can give padding to the table - 
Padding property is usde to give padding to the table - 
Example - past this piece  of code in above given example.
Output - 
2. We can also hover property with a table element 
Syntax is given as follow -
tr:hover
Example - 
Put this piece of code in the above examples to see the hover effect.
3. We can also put different color in different rows of table as shown in below Example -
Example - 
<!DOCTYPE html>
<html lang="en">
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

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

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

th {
  color: white;
}
</style>


<head>
    <link rel="stylesheet" href="sample.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


    <title>Document</title>
</head>
<body>
    <html>

  <head>
      <title>HTML Tables</title>
  </head>
 
  <body>
      <table>
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
       
        <tr>
            <td>item 1</td>
            <td>item 2</td>
        </tr>
        <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 4, Column 1</td>
            <td>Row 4, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 5, Column 1</td>
            <td>Row 5, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 6, Column 1</td>
            <td>Row 6, Column 2</td>
        </tr>
   
   
        </table>
   
  </body>
</html>
     
</body>

</html>
Output -