How to add space around table border in HTML?



We use the CSS property border-spacing, to set border spacing for an HTML table. It adds space around the table border between the adjacent cells in a table. We should specify the value in pixels for the border-spacing property to add.

Syntax

Following is the syntax for adding space around table border in HTML.

border-spacing: 10px;

Example 1

Given below is an example where we are creating a table and trying to add spaces around it.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table,tr,th,td { border:1px solid black; border-spacing: 10px; } </style> </head> <body> <table style="width: 50%"> <caption style="text-align: center; ">Employees</caption> <tr> <th>EmployeeName</th> <th>EmployeeId</th> </tr> <tr> <td>Yadav</td> <td>022</td> </tr> <tr> <td>Abdul</td> <td>025</td> </tr> <tr> <td>Jason</td> <td>208</td> </tr> </table> </body> </html>

On executing the above program, it will generate the following example −

We should override the pixel value of the border-spacing property, to change the border-spacing of the table cells in HTML.

Example 2

Following is an another example for this −

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table,tr,th,td { border:1px solid black; border-spacing: 20px; } </style> </head> <body> <table style="width: 50%"> <caption style="text-align: center; ">Employees</caption> <tr> <th>EmployeeName</th> <th>EmployeeId</th> </tr> <tr> <td>Yadav</td> <td>022</td> </tr> <tr> <td>Abdul</td> <td>025</td> </tr> <tr> <td>Jason</td> <td>208</td> </tr> </table> </body> </html>

Following is the output for the above example program.


Advertisements