WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
SPONSORED LINKS
Advertisements

How to set table cellpadding and cellspacing in CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS padding & border-spacing property

As we know the table's cellpadding and cellspacing attributes are removed in HTML5.

But, you can still set padding inside the table cells easily using the CSS padding property. This is a valid way to produce the same effect as table's cellpadding attribute.

The style rules in the following example will add 10 pixels of padding to the table cells.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Set Cellpadding in CSS</title>
  • <style>
  •     table, th, td{
  •         border: 1px solid #666;
  •     }
  •     table th, table td{
  •         padding: 10px; /* Apply cell padding */
  •     }
  • </style>
  • </head>
  • <body>
  •     <table>
  •         <thead>
  •             <tr>
  •                 <th>Row</th>
  •                 <th>First Name</th>
  •                 <th>Last Name</th>
  •                 <th>Email</th>
  •             </tr>
  •         </thead>
  •         <tbody>
  •             <tr>
  •                 <td>1</td>
  •                 <td>Clark</td>
  •                 <td>Kent</td>
  •                 <td>clarkkent@mail.com</td>
  •             </tr>
  •             <tr>
  •                 <td>2</td>
  •                 <td>Peter</td>
  •                 <td>Parker</td>
  •                 <td>peterparker@mail.com</td>
  •             </tr>
  •             <tr>
  •                 <td>3</td>
  •                 <td>John</td>
  •                 <td>Rambo</td>
  •                 <td>johnrambo@mail.com</td>
  •             </tr>
  •         </tbody>
  •     </table>
  • </body>
  • </html>

Similarly, you can use the CSS border-spacing property to apply the spacing between the adjacent table cell borders, like cellspacing attribute. However, in order to work border-spacing the value of the border-collapse property must be separate, which is default.

Let's take a look at the following example to understand how it basically works:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Set Cellspacing in CSS</title>
  • <style>
  •     table{
  •         border-collapse: separate;
  •         border-spacing: 10px; /* Apply cell spacing */
  •     }
  •     table, th, td{
  •         border: 1px solid #666;
  •     }
  •     table th, table td{
  •         padding: 5px; /* Apply cell padding */
  •     }
  • </style>
  • </head>
  • <body>
  •     <table>
  •         <thead>
  •             <tr>
  •                 <th>Row</th>
  •                 <th>First Name</th>
  •                 <th>Last Name</th>
  •                 <th>Email</th>
  •             </tr>
  •         </thead>
  •         <tbody>
  •             <tr>
  •                 <td>1</td>
  •                 <td>Clark</td>
  •                 <td>Kent</td>
  •                 <td>clarkkent@mail.com</td>
  •             </tr>
  •             <tr>
  •                 <td>2</td>
  •                 <td>Peter</td>
  •                 <td>Parker</td>
  •                 <td>peterparker@mail.com</td>
  •             </tr>
  •             <tr>
  •                 <td>3</td>
  •                 <td>John</td>
  •                 <td>Rambo</td>
  •                 <td>johnrambo@mail.com</td>
  •             </tr>
  •         </tbody>
  •     </table>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.