/    /  CSS Table

CSS Table

 

We can apply style on HTML tables for a better look and feel. There are some CSS properties that are widely used in designing a table using CSS:

 

  • border
  • border-collapse
  • padding
  • width
  • height
  • text-align
  • color
  • background-color

 

CSS Table Border:

 

<!DOCTYPE>
<html> 
<head>
<style> 
table, th, td { 
  border: 1px solid black; 
} 
</style> 
</head>
<body> 
<table> 
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> 
<tr><td>Name1</td><td>Name11</td><td>60</td></tr> 
<tr><td>Name2</td><td>Name22</td><td>80</td></tr> 
<tr><td>Name3</td><td>Name33</td><td>82</td></tr> 
<tr><td>Name4</td><td>Name44</td><td>72</td></tr> 
</table> 
</body>
</html>

 

OUTPUT:

 

CSS Table

 

Styling even and odd cells:

 

<!DOCTYPE>
<html> 
<head>
<style> 
table, th, td { 
  border: 1px solid black; 
  border-collapse: collapse; 
} 
th, td { 
  padding: 10px; 
} 
table#alter tr:nth-child(even) { 
  background-color: #eee; 
} 
table#alter tr:nth-child(odd) { 
  background-color: #fff; 
} 
table#alter th { 
  color: white; 
  background-color: gray; 
} 
</style> 
</head>
<body> 
<table id="alter"> 
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> 
<tr><td>Name1</td><td>Name11</td><td>68</td></tr> 
<tr><td>Name2</td><td>Name22</td><td>80</td></tr> 
<tr><td>Name3</td><td>Name33</td><td>82</td></tr> 
<tr><td>Name4</td><td>Name44</td><td>72</td></tr> 
</table>  
</body>
</html>

 

OUTPUT:

 

CSS Table