- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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