html - Images Not Displaying In Table -

i working on assignment , need place images in table, isn't problem me. today when added images table displays square border alt text written in it. pretty sure pointing right directory.

my folder structure is:

website   css   fonts   html (page table in here)   js   images (images table in here) 

@font-face{ font-family:customfont; src: url('../fonts/balkeno.ttf'); }    * {  	margin: 0;  	border: 0;  	padding: 0;  	font-size: 12px;  	font-family: arial, sans-serif;  }    body {  	width: 100%;  	height: 300%;  	background-color: #d8d8d8;  }    nav {  	font-family: customfont;  	font-size: 30px;  	width: 100%;  	height: 40px;  	position: fixed;  	z-index: 50;  }    .nav-background {  	width: 100%;  	height: 100%;  	background: #12a7cb;  	opacity: 0;  	position: absolute;  }    .nav-content {    position: relative;    top: 50%;    transform: translatey(-50%);  }    header {  	width: 100%;  	height: 320px;  }    #slideshow {      position:relative;      height:320px;  	width: 100%;  }    #slideshow img {      position:absolute;      top:0;      left:0;      z-index:8;  	width: 100%;  	height: 320px;  	box-shadow: 0px 5px 10px #5e5e5e;  }    #slideshow img.active {      z-index:10;  }    #slideshow img.last-active {      z-index:9;  }    #logo {   	float: left;   	padding-left: 100px;  	padding-right: 200px;  }    #nav {  	background: url(http://4.bp.blogspot.com/-dvtgikk-koy/uprtswp0ygi/aaaaaaaadag/og0dtz8t_oq/s1600/header+base.png) no-repeat scroll top left;     background-color: transparent;  	width:100%;  	height:50px;  	box-shadow: 0px 1px 10px #5e5e5e;  	position:fixed;  	top:0px;  }    .title {  	display:none;  	color:#ededed;  	font-size:25px;  	width:350px;  	margin-top:6px;  	margin-left:150px;  	font-weight:bold;  	float:left;  }    .navigation li{  	list-style-image: url('navicon.png');   	float: left;  	padding-right:45px;  	margin-bottom: 25px;  	color: black;  }    li {  	  }    .navigation {  	font-size: 19px;  	font-family: customfont;  	text-decoration:none;  	color: #01ebfe;  }     .navigation a:hover {  	  }    .wrapper {  	width: 900px;  	height: 1000%;  	margin-top: 25px;  	margin-left: auto;  	margin-right: auto;  	padding: 20px;  	background-color: white;  	padding-top: 100px;  	box-shadow: 10px 10px 5px #888888;  }    p{  	font-size: 14px;  	padding-bottom: 32px;  }    p:first-letter {  	font-size: 32px;  	color: #71cae0;  }    h1 {  	font-family: customfont;  	font-size: 32px;  	font-weight: bolder;  	color: #12a7cb;  	text-align: center;  }    h2 {  	font-family: customfont;  	font-size: 22px;  	font-weight: bold;  	color: #12a7cb;  	text-align: left;  	text-decoration: underline;  }    section {  	width: 100%;  	height: 100%;  	background-color: #d8d8d8;  }    img.logo {  	text-align: center;  	margin: auto;  	display: block;  }    img.slideshow {  	width: 100%;  	height: 480px;  }    footer {  	width: 900px;  	margin: 25px auto 0 auto;  	padding-top: 20px;  	padding-left: 20px;  	padding-right: 20px;  	background-color: white;  	text-align: center;  	box-shadow: 10px 10px 5px #888888;  }    .members {  	padding: 10px;  	display: inline-block;  	background-color: #e4f4f8;  	margin-top: 15px;  	margin-left: 15px;  	border: 1px solid #12a7cb;  	float: right;  }    ol.test {  	list-style-type: lower-alpha;  }    .members ol {  	list-style-type: lower-alpha;  }    .members li {  	display: list-item;  	color: #6c6c6c;  	list-style-type: lower-alpha;  	padding: 5px;  	margin-bottom: 5px;  	margin-left: 10px;  }    /* table stuff */    table, tr, th, td {  	border: 1px solid black;  	border-collapse: collapse;  }    th {  	padding: 5px;  	color: #12a7cb;  	background-color: #e4f4f8;  }    td {  	background-color: #f2eded;  	width: 150px;  	height: 150px;  }    /* end table stuff */    .video-wrapper {  	width: 100%;  	text-align: center;  }    .video-wrapper {  	color: blue;  	text-decoration: none;  	font-size: 12px;  	font-family: arial, sans-serif;  }    .social img {  	padding-top: 32px;  	padding-right: 8px;  	width: 48px;  	height: 48px;  	border: none;  }

<!doctype html>  <html>  	<!--   	author: #####  	date: 11/08/2014  	-->    	<head>  		<meta charset="utf-8" />  		<title>home - 3 doors down</title>  		  		<link rel="stylesheet" type="text/css" href="../css/style.css" />   		<link href='http://fonts.googleapis.com/css?family=ubuntu' rel='stylesheet' type='text/css'>  		  		<script src="../js/jquery.js"></script>  		<script type="text/javascript" src="../js/scroll.js"></script>  		<script type="text/javascript" src="../js/header.js"></script>  		  	</head>  	  	<body>  		<nav class="nav">  			<div class="nav-background">  			</div>  			  			<div class="nav-content">  				<img src="../images/navtitle.png" alt="three doors down" id="logo" width=250 />  				<ul class='navigation'>  					<li><a href="../index.html">home</a></li>  					<li><a href="biography.html">biography</a></li>  					<li><a href="discography.html">discography</a></li>  					<li><a href="video.html">video</a></li>  				</ul>  			</div>  		</nav>  		  		<header class="header">  			<div id="slideshow">  				<img src="../images/header1.jpg" alt="three doors down" class="active" />  				<img src="../images/header2.jpg" alt="three doors down" />  				<img src="../images/header3.jpg" alt="three doors down" />  			</div>  		</header>  		  		<section>  			<div class="wrapper">  				<h1>discography</h1>  				  				<div class="disco" >  					<table >  						<tr>  							<th>  								album  							</th>  							<th>  								year  							</th>  							<th>  								record label  							</th>  							<th>  								cd cover  							</th>  						</tr>  						<tr>  							<td >  								the better life  							</td>  							<td>  							   2000  							</td>  							<td>  								universal republic  							</td>  							<td>  								<img href="../images/thebetterlifecover.jpg" alt="the better life" width="100" height="100" />  							</td>  						</tr>  						<tr>  							<td >  								away sun  							</td>  							<td>  								2002  							</td>  							<td>  								universal republic  							</td>  							<td>  							   <image href="../images/awayfromthesuncover.jpg" alt="test" width="100" height="100" />  							</td>						  						</tr>  						<tr>  							<td >  								seventeen days  							</td>  							<td>  							   2005  							</td>  							<td>  								universal republic  							</td>  							<td>  								cover  							</td>  						</tr>  						<tr>  							<td >  								3 doors down  							</td>  							<td>  							   2008  							</td>  							<td>  								universal republic  							</td>  							<td>  								<image />  							</td>  						</tr>  						<tr>  							<td >  								time of life  							</td>  							<td>  							   2011  							</td>  							<td>  								universal republic  							</td>  							<td>  								cover  							</td>  						</tr>					  					</table>  				</div>			  			</div>  		</section>  		  		<footer>			  			<div class="nav-content">  				<ul class='navigation'>  					<li><a href="../index.html">home</a></li>  					<li><a href="biography.html">biography</a></li>  					<li><a href="discography.html">discography</a></li>  					<li><a href="video.html">video</a></li>  				</ul>  			</div>  		</footer>  	</body>  </html>

changed href="../images/imagename.png" src="../images/imagename.png"