Config Router

  • Google Sheets
  • CCNA Online training
    • CCNA
  • CISCO Lab Guides
    • CCNA Security Lab Manual With Solutions
    • CCNP Route Lab Manual with Solutions
    • CCNP Switch Lab Manual with Solutions
  • Juniper
  • Linux
  • DevOps Tutorials
  • Python Array
You are here: Home / Set cellpadding and cellspacing in CSS?

Set cellpadding and cellspacing in CSS?

October 8, 2021 by James Palmer

Basics
For controlling “cellpadding” in CSS, you can simply use padding on table cells. E.g. for 10px of “cellpadding”:
td {
padding: 10px;
}

For “cellspacing”, you can apply the border-spacing CSS property to your table. E.g. for 10px of “cellspacing”:
table {
border-spacing: 10px;
border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn’t do with old-school “cellspacing”.
Issues in IE ≤ 7
This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you’re almost out of luck. I say “almost” because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you’re trying to eliminate cellspacing (that is, cellspacing=”0″) then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.
In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn’t have it defined already), you can use border-collapse:collapse.
table {
border-spacing: 0;
border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Default
The default behavior of the browser is equivalent to:
table {border-collapse: collapse;}
td {padding: 0px;}

         
Cellpadding
Sets the amount of space between the contents of the cell and the cell wall
table {border-collapse: collapse;}
td {padding: 6px;}

        
Cellspacing
Controls the space between table cells
table {border-spacing: 2px;}
td {padding: 0px;}

        
Both
table {border-spacing: 2px;}
td {padding: 6px;}

        
Both (special)
table {border-spacing: 8px 2px;}
td {padding: 6px;}

        

Note: If there is border-spacing set, it indicates border-collapse property of the table is separate.

Try it yourself!
Here you can find the old HTML way of achieving this.

Related

Filed Under: Uncategorized

Recent Posts

  • How do I give user access to Jenkins?
  • What is docker volume command?
  • What is the date format in Unix?
  • What is the difference between ARG and ENV Docker?
  • What is rsync command Linux?
  • How to Add Music to Snapchat 2021 Android? | How to Search, Add, Share Songs on Snapchat Story?
  • How to Enable Snapchat Notifications for Android & iPhone? | Steps to Turn on Snapchat Bitmoji Notification
  • Easy Methods to Fix Snapchat Camera Not Working Black Screen Issue | Reasons & Troubleshooting Tips to Solve Snapchat Camera Problems
  • Detailed Procedure for How to Update Snapchat on iOS 14 for Free
  • What is Snapchat Spotlight Feature? How to Make a Spotlight on Snapchat?
  • Snapchat Hack Tutorial 2021: Can I hack a Snapchat Account without them knowing?

Copyright © 2022 · News Pro Theme on Genesis Framework · WordPress · Log in