3x3 photo rollover cell spacing issue

Question

I am using a 3x3 grid of photos with roll overs. The 3 images on second row are href's to pages on site. I would like a 4px padding to all columns and rows in a centered format at 1024x600 on the index(I have not made it to the new image resize so the images do currently sit at 200x200, I wanted to take care of the styling issues first). This issue is consistent on two pages, the second is my photo page which has a lightbox2 gallery so I have to assume it is in the CSS. I am relatively new to HTML and troubleshooting I have scrubbed forums, books, etc to no avail. I came into this hoping to clean up my coding and get the cell spacing correct but seem to create more issues than not.

HTML for index:

<html>
<head>
<title>McKay Pruitt Home</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="UTF-8">
<script type="text/javascript">
<!---Rollover script here--->
</script>
</head>

<div class=".phototable">
<table width="1020px">
  <tr>
    <th width="1020" class=".bigname" scope="col"><a href="index.html">McKay Pruitt</a></th>
  </tr>
</table>
<table>
  <tr>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img/index/sm/McKayPruitt_index-1.jpg',1)"><img src="img/index/lg/McKayPruitt_index-1.jpg" width="200" height="200" id="Image1"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','img/index/sm/McKayPruitt_index-2.jpg',1)"><img src="img/index/lg/McKayPruitt_index-2.jpg" width="200" height="200" id="Image2"></a></td>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','img/index/sm/McKayPruitt_index-3.jpg',1)"><img src="img/index/lg/McKayPruitt_index-3.jpg" width="200" height="200" id="Image3"></a></td>
  </tr>
  <tr>
    <td><a href="photos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','img/index/sm/McKayPruitt_index-4.jpg',1)"><img src="img/index/lg/McKayPruitt_index-4.jpg" width="200" height="200" id="Image4"></a></td>
    <td><a href="multimedia.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','img/index/sm/McKayPruitt_index-5.jpg',1)"><img src="img/index/lg/McKayPruitt_index-5.jpg" width="200" height="200" id="Image5"></a></td>
    <td><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','img/index/sm/McKayPruitt_index-6.jpg',1)"><img src="img/index/lg/McKayPruitt_index-6.jpg" width="200" height="200" id="Image6"></a></td>
  </tr>
  <tr>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','img/index/sm/McKayPruitt_index-7.jpg',1)"><img src="img/index/lg/McKayPruitt_index-7.jpg" width="200" height="200" id="Image7"></a></td>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','img/index/sm/McKayPruitt_index-8.jpg',1)"><img src="img/index/lg/McKayPruitt_index-8.jpg" width="200" height="200" id="Image8"></a></td>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','img/index/sm/McKayPruitt_index-9.jpg',1)"><img src="img/index/lg/McKayPruitt_index-9.jpg" width="200" height="200" id="Image9"></a></td>
  </tr>
</table>
</div>
</body>

Also the CSS to accompany:

.bigname {
font-family: 'Source Sans Pro', sans-serif;
width: 1000px
font-size: 50px;
font-weight: bold;
}

.phototable {
font-family: 'Source Sans Pro', sans-serif;
display: inline-block;
align: center;
width: 1020;
margin:0 auto;
border: 0;
cellpadding: 0;
cellspacing: 100px;
}

is located under. I am sorry. I took some of the excess meta and preload script out to keep it straight to the point. — McKay, Jul 28 '13 at 17:22
`align: center;`, `cellpadding: 0;`, `cellspacing: 100px;`, `width: 1020;` these are invalid CSS — Sourabh, Jul 28 '13 at 17:45
Please elaborate a little more. When I do a W3 validation it tells me that this code is obsolete when added directly to the element on the index. If I put this on my CSS will it not apply this div class attribute to the table element? — McKay, Jul 28 '13 at 17:55
It looks like `td` get a slightly extra height somehow (I can see extra `2px` which are there for no reason, I tried everything I know but I cant get rid of them) I think You should use `div`s and float them to the left — Sourabh, Jul 28 '13 at 17:55

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

You can add spacing to table cells using cellspacing and cellpadding, which you have defined in your css for .phototable. However, your .phototable is actually a div element not a table. In order to add spacing to your table cells, you should add the cellpadding rule to the required table element, like so:

<table cellpadding="4px">

If you want to control this from CSS, take a look at the top reply on Set cellpadding and cellspacing in CSS?

Having said this, using tables for layouting anything that is not tabular data is considered bad practice, and the code will get more and more confusing to manage as you add stuff. Instead, you should use the css float property to position your items on the page. See example for your menu layout here http://jsfiddle.net/2PANV/

EDIT

Why 630px?

This isn't the most reusable way of specifying three images per row, yes, but assuming that your images always have a known width of 200px, I believe it is the simplest way to grasp for a beginner.

If you want a certain number of images per row, you need some way of specifying that the row has to break at some point and begin a new line. The float: left property on the a tags basically says that they should come continuously one after the other for as long as there is room. Because there is plenty of room in 1020px for more than three 200px images, the row will not break after the third image. This is why I have wrapped the images inside a centred 630px container, which makes sure that no more than three fit inside a row.

You get the 630px by calculating the exact amount of horizontal space you need to fit three images. Truthfully it should be something like 3 * 200px + 6 * 4px (where 6 * 4px is the horizontal padding for each image), so 630 is 6px off from the exact center, but I added it to be safe (you never know how different browsers might behave).

If you don't want to spend time doing hacky calculations, more elegant solutions to floating elements in rows are discussed, for example, here Best Practice for CSS Clear or Overflow

`cellspacing` and `cellpadding` are not CSS properties. `border-spacing` replaced `cellspacing` and `padding` for `cellpadding`. `cellspacing` and `cellpadding` are HTML attributes — Sourabh, Jul 28 '13 at 18:09
Which is why I added it directly as an attribute to the table element, linking to a relevant question explaining the use of `border-spacing` :) — Elise, Jul 28 '13 at 18:18
Nice, didn't notice that. I must read carefully before commenting. `+1`. And We both came up with nearly same solutions to OP's problem :) well, yours is better so I might as well remove mine — Sourabh, Jul 28 '13 at 18:24
Very clear and concise. Thank you both very much for your time. I changed to the nav format that you listed and it works much more fluently. The has a width of 630px, why is that? On my photos page I applied the div and instead of being 4 columns wide with 3 rows it is now 3 columns at 4 rows. I am looking to expand to 1020px after I change the sizes on the index page but they are no longer centered when I do change from 630px to 1020px. — McKay, Jul 28 '13 at 23:32

3x3 photo rollover cell spacing issue

1 Answers1