CODEWITHSUNDEEP
htmlcsshtml-tablespace
Adam G
Adam G

Reputation: 357

Extra white space on table cells

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?

Upvotes: 5

Views: 67162

Answers (3)

Michael Besteck
Michael Besteck

Reputation: 2423

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>

Upvotes: 4

Town
Town

Reputation: 14906

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.

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

You need cellpadding and cellspacing in table tag

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

DEMO

Upvotes: 6

Related Questions