Space tables evenly not even

Question

I have been looking up ways to add spaces between the <td> tags.

I grabbed the following image on what I am trying to do:

However I am not able to duplicate the same results. Any help would be appreciated.

#sidebarright {
  float: right;
  width: 30%;
  padding: 0;
  margin: 0;
  padding-top: 20px;
}
#sidebarright a {
  color: grey;
}
.rightbuttons {
  background-image: url(./img/Resources_Button.jpg);
  background-repeat: no-repeat;
  padding: 14px 0 20px 11px;
}

<div id="sidebarright">
  <a href="#"><img class="buttonUlti" src="img/Pro.jpg" alt="Pro" /></a>
  <table width="100%;">
    <tbody>
      <tr>
        <th class="resstyle">Resources</th>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Form.cfm"Forms</a></td>
        <td class="rightbuttons"><a href="Postings.cfm">Job Postings</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Locations.cfm">Locations</a></td>
        <td class="rightbuttons"><a href="Com.cfm">Comp</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Care.cfm">Care</a></td>
        <td class="rightbuttons"><a href="Photos.cfm">Photos</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Safety.cfm">Safety</a></td>
        <td class="rightbuttons"><a href="Directory.cfm">Directory</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Alerts.cfm">Alerts</a></td>
      </tr>
    </tbody>
  </table>
</div>

@David Those were removed in HTML5. It should be done with CSS — 4castle, Jun 24 '16 at 23:44

score 1 · Answer 1 · edited May 23 '17 at 11:52

The general concept of cellpadding and cellspacing in CSS has been answered before:
Set cellpadding and cellspacing in CSS?

In your specific case, some of the problems I see:
1) there is a missing closing angle bracket before the label 'Forms'
2) the spacing can be controlled by applying the border-spacing property to the table element (to closely mimic the example, use separate horizontal and vertical values
3) the problem described with the background image being cut off is due to the image not scaling with the size of the td cell. Apply the background:width 100% 100%
4) using the padding to set the cell width gets added to the length of the content of the cell, resulting in longer labels (Job Postings) getting more width than the longest label of the left column (Locations). Use width: 50% to set the column widths to be equal.
5) in order not to affect the th, add the colspan="2" (as Yasir answered) and set it to text-align: left with some padding-left:

I have pasted below only the modifications to the css

#sidebarright table {
  width: 100%;     /* moved from html  */
  border-spacing: 10px 15px;
}
.resstyle { padding-left: 10%; text-align: left; }
.rightbuttons {
  background-size: 100% 100%;
  width: 50%;
}

I have tried this but it creates to much space and the background image button is cut off on the right. I am trying to avoid affecting the th tag and just affect the td without it shifting to the right — Roberto Flores, Jun 27 '16 at 20:23
Thanks for the additional explanation, I have edited my answer. Also, Yasir provides the correct table structure with and . — rhill, Jun 28 '16 at 04:24
Can you be more specific - affect the th tag how? Move it left/right as the width of the sidebar is widened/narrowed? If so, change the padding-left: from 10% to a fixed amount (like your 11px left padding on the td elements). — rhill, Jun 28 '16 at 22:40

Yasir Khan · Answer 2 · 2016-06-27T00:05:16.127

Hope this might help.

#sidebarright{
    float: right;
    width: 50%;
    padding: 0; margin:0;
    padding-top: 20px;
    }
    .rightbuttons{
    background-image: url(./img/Resources_Button.jpg);
    background-repeat:no-repeat;
    padding:  0 20px 20px 0;
    }
    .rightbuttons a{
    color:grey;
 border: 1px solid #999;
 display: block;
 padding: 10px 20px;
 text-decoration: none;
    }
    .resstyle{
 text-align: left;
    }
    .alerts-btn a{
 color: #F00;
    }

<div id="sidebarright">
            <table width="100%">
             <thead>
                    <tr>
                        <th colspan="2" class="resstyle">Resources</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="rightbuttons"><a href="Form.cfm">Forms</a></td>
                        <td class="rightbuttons"><a href="Postings.cfm">Job Postings</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttons"><a href="Locations.cfm">Locations</a></td>
                        <td class="rightbuttons"><a href="Com.cfm">Comp</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttons"><a href="Care.cfm">Care</a></td>
                        <td class="rightbuttons"><a href="Photos.cfm">Photos</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttons"><a href="Safety.cfm">Safety</a></td>
                        <td class="rightbuttons"><a href="Directory.cfm">Directory</a></td>
                    </tr>
                    <tr>
                        <td class="rightbuttons alerts-btn"><a href="Alerts.cfm">Alerts</a></td>
                    </tr>
                </tbody>
            </table>
    </div>

Yes this works but when I try with the actual image, it cuts off the background image of the link — Roberto Flores, Jun 27 '16 at 16:15
please mention here your background image and try to decribe your issue more. — Yasir Khan, Jun 27 '16 at 22:13
Hello my the background image for the links is a button image that is 278 X 68 and another one that is bigger. When I use the following css: 'sidebarright table{ border-spacing:10px !important}' it shifts the button to the right and cuts off a piece of the button. Not only that, I am trying not to effect the th but only the td — Roberto Flores, Jun 27 '16 at 22:29
why are you using button image? you can use css for gredient — Yasir Khan, Jun 27 '16 at 22:57

Space tables evenly not even

2 Answers2