The space between two rows in a table can be done using CSS border-spacing and border-collapse property. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of table is collapse or not. The border-spacing attribute can only be used if border-collapse attribute is set to separate.
Example:
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; } th { background-color:green; Color:white; } th, td { width:150px; text-align:center; border:1px solid black; padding:5px } .geeks { border-right:hidden; } .gfg { border-collapse:separate; border-spacing:0 15px; } h1 { color:green; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h2>Row spacing in a table</h2> <table> <tr> <th>Employee ID</th> <th>Name</th> <th>Gender</th> <th>Age</th> </tr> </table> <table class = "gfg"> <tr> <td class = "geeks">10001</td> <td>Thomas</td> <td>M</td> <td>32</td> </tr> <tr> <td class = "geeks">10002</td> <td>Sally</td> <td>F</td> <td>28</td> </tr> <tr> <td class = "geeks">10003</td> <td>Anthony</td> <td>M</td> <td>24</td> </tr> </table> </center> </body> </html> |
Output:
leave a comment
0 Comments