Which table property specifies the width that should appear between table cells in CSS ?
In this article, we will see how to specify the width that should appear between table cells. CSS provides the border-spacing property that can be used to set the distance between the borders of neighboring cells in the Table. This property works only when the border-collapse property is set to no-collapse separate.
Syntax:
border-spacing: length|initial|inherit;
Property values:
- length-length: This value is used to set the distance between the borders of adjacent cells. It does not allow negative values.
- initial: This value is used to sets the property to its default value.
Example: This example describes the border-spacing property by specifying the width that appears in between the table cell.
HTML
<!DOCTYPE html> <html> <head> <title>GeekforGeeks</title> <style> table, th, td { border: 1px solid green; text-align: center; } .geeks { border-collapse: separate; background-color: none; border-spacing: 30px; } h1 { color: green; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h2> The border-spacing Property</h2> <table style="width:70%" class="geeks"> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Anil</td> <td>Kumar</td> </tr> <tr> <td>Vikas</td> <td>Kumar</td> </tr> <tr> <td>Vishal</td> <td>Yadav</td> </tr> </table> </center> </body> </html> |
Output:
Example 2: This example describes the border-spacing property.
HTML
<!DOCTYPE html> <html> <head> <title>GeekforGeeks</title> <style> table { border-spacing: 10px; border: 1px solid green; } td { width: 22px; height: 25px; background: #1d9138; color: white; text-align: center; font-family:sans-serif; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h2>Border-spacing Property</h2> <table> <tr> <td>Geeks</td> <td>for</td> <td>Geeks</td> </tr> <tr> <td>Geeks</td> <td>for</td> <td>Geeks</td> </tr> <tr> <td>Geeks</td> <td>for</td> <td>Geeks</td> </tr> </table> </center> </body> </html> |
Output:
Please Login to comment...