I am currently working on a 3x3 grid layout featuring image roll overs. Within this layout, the three images on the second row are linked to pages on the website. My goal is to incorporate a 4px padding around all columns and rows, centered at 1024x600 on the index page. As of now, the images are sized at 200x200, and I have yet to address the resizing before focusing on styling issues. This problem seems to be consistent on two pages, the second being my photo page which includes a lightbox2 gallery, leading me to believe the problem lies within the CSS. As a relatively new HTML coder, I have searched forums and books for a solution but have yet to find one, hoping to clean up my coding and fix any spacing issues.
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>
As well as the accompanying CSS:
.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;
}