Extra white space on table cells

Question

enter image description here

I am creating a table with 5 images across, one in each cell. I want it to span 920px, with 10px gap between each cell. Which equals 176 for each cell, so I made my images 176px wide.

This is my html and CSS:

    <table>
    <tr>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Two"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Two"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_01.jpeg" title="New Home Number Three"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Four"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
        <td><a class="fancybox-effects-c" rel="group" href="images/newhomes_01.jpeg" title="New Home Number Five"><img src="images/thumb_newhomes_01.gif" class="fade" alt="" /></a></td>
</table>



table {
    width:100%;
    cell-padding:"0";
    cell-spacing:"0";
    margin:0;
    border:none;
}

td {
    width:176px;
}

You can see in my attached image. that there is this white space on right side inside each cell. I thought cell-padding and cell-spacing would fix it, but it didn't. Even doing td a set witdth of 176px didn't work. What am I doing wrong? Is there a better method?

score 6 · Answer 1 · answered Apr 12 '13 at 10:47

6

You need cellpadding and cellspacing in table tag

<table cellpadding="0" cellspacing="0">

DEMO

answered Apr 12 '13 at 10:47

Sowmya

26,684
21
96
136

Cheers buddy! Another questions to solve my problem of evenly spacing the images. There is still an extra few pixels on the far right img. I think its because i need img 4 and img 5 to be aligning right. Then perhaps the middle img (img3) to be aligning center. Does that make sense? Is there an easy way to fix this? Sorry!!! – Adam G Apr 12 '13 at 10:57
@AdamG I am not able to see the spaces between images coz we dont have image link or width of the image. Provide either image link or dimension – Sowmya Apr 12 '13 at 10:59
3

Just to note, both `cellspacing` and `cellpadding` are obsolete in [HTML5](http://www.w3.org/TR/html-markup/table.html). – Town Apr 12 '13 at 11:08
http://postimg.org/image/85jzezwdf/ - <-- here is image. the light grey are images. the dark grey is the table background. – Adam G Apr 12 '13 at 11:15

score 4 · Accepted Answer · edited Jan 23 '19 at 02:08

You need to set the values for padding, margin and border explicitly. Take a look at the corrected code below:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      table {
        width: 100%;
        padding: 0;
        margin: 0;
        border: 0;
        border-collapse: collapse;
      }

      td {
        width: 176px;
        padding: 0 10px 0 0;
        margin: 0;
        border: 0;
      }
      td.last {
        padding: 0;
        margin: 0;
        border: 0;
      }
    </style>
  </head>
  <body>
    <div id="imageContainer" style="width: 920px; margin: 0; padding: 0; border: 0;">
      <table>
        <tr>
          <td>
            <a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Two"
              ><img src="testImage176.jpg" class="fade" alt=""
            /></a>
          </td>
          <td>
            <a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Two"
              ><img src="testImage176.jpg" class="fade" alt=""
            /></a>
          </td>
          <td>
            <a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Three"
              ><img src="testImage176.jpg" class="fade" alt=""
            /></a>
          </td>
          <td>
            <a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Four"
              ><img src="testImage176.jpg" class="fade" alt=""
            /></a>
          </td>
          <td class="last">
            <a class="fancybox-effects-c" rel="group" href="#" title="New Home Number Five"
              ><img src="testImage176.jpg" class="fade" alt=""
            /></a>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

So why does this work - Ticked as the answer, no explanation as to why? — Ricky, Jan 21 '19 at 10:34
@Ricky: Because the table cells (td) are explicitely assigned padding, margin and border. — Michael Besteck, Jan 22 '19 at 13:33
I'm aware, it was more of a prod for you to update your answer to explain this, rather than just doing someone elses job for them, albeit discretely — Ricky, Jan 23 '19 at 00:13

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

1

cell-spacing and cell-padding don't exist in CSS.

For what you're trying to achieve, you can use:

border-spacing: 10px;

Here's a demo: http://jsfiddle.net/Town/7Gkxr/

and

padding: 0 // applied to your td elements, gives you the equivalent of cellpadding="0"

There's an existing question on SO about this: Set cellpadding and cellspacing in CSS?

Also, as your table contains images, I'd remove the width settings for table and td, as the table will be as wide as the sum of the images anyway.

edited May 23 '17 at 11:52

Community

1
1

answered Apr 12 '13 at 10:54

Town

14,706
3
48
72

Yeah but i need spacing between my images. I want the left image to be right against the left wall. and the right image right againgst the right wall. With 10x spacing inbetween every img – Adam G Apr 12 '13 at 11:16
Ah, apologies - I've updated it to use [`border-spacing`](http://reference.sitepoint.com/css/border-spacing) instead. – Town Apr 12 '13 at 11:22

Extra white space on table cells

3 Answers3

Linked