• Forgive me if this is a basic question – I’d like to adjust the cellspacing and padding for tables I use on different pages of my site, but my html edit <table cellpadding=”10″;>, for example doesn’t work. Do I need a CSS edit too? https://www.shospace.co.uk/crash/

Viewing 3 replies - 1 through 3 (of 3 total)
  • The theme does have padding set for table cells, yes.

    Try adding the following CSS to apply 10px padding on all sides of your cells:

    td {
      padding: 10px;
    }

    A good way to add CSS is to use the Additional CSS panel in the Customizer (assuming you’re running at least WordPress 4.7) or with something like the Jetpack Plugin using the Custom CSS Module

    Let me know how it looks!

    Thread Starter Sheona

    (@sheona)

    Hi Chad

    Thanks so much, that works great across the board. But is there a way to adjust this for individual cells? For example – https://www.shospace.co.uk/library – my greyed-out cells underneath the column headings, I’d prefer to have 0 padding. Also, can I specify the cell height for cells with no text like this?

    Incidentally, is the CSS set to give the table itself a big top margin? On both the above page, and https://www.shospace.co.uk/crash, the margin above my text (below the menu line) is bigger than I would like.

    Thanks again,
    Sheona

    Hi @sheona!

    If you wanted special padding on certain cells, the best thing to do would be to edit your HTML and add a class to the cells in question.

    That would mean <td> would become <td class"my-cell-class">

    Then you can style just those cells with CSS, like this:

    
    td.my-cell-class {
        padding: none
    }

    Another approach would be to put your class on the row, instead of each cell. In this method, <tr> would become <tr class="my-row-class">

    Then you could use a snippet like this – targeting cells in the specified row.

    tr.my-row-class td {
    	padding: 0;
    }
    

    Incidentally, is the CSS set to give the table itself a big top margin?

    Nope!

    When I use my browser inspector I can see that there’s an empty table just above your main table on both of those pages. That’s what’s causing the spacing you’ve noticed.

    Those tools are also handy for identifying the elements you want to target your CSS with ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Html for table cellpadding and cellspacing’ is closed to new replies.