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:
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: