<img /> between each set of<td></td> tags. Make sure to set eachsrc attribute to the image URL you want the picture to be of<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table>
<thead>
<th colespan = "3">
j pics
</th>
</thead>
<tr><td><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></td><td><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></td><td><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></td></tr>
<tr><td><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></td><td><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></td><td><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></td></tr>
<tr><td><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/td><td><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></td><td><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></td></tr>
</table>
</body>
</html>™™
linking the image to a website when clicked
Put
<a></a> tags around each <img>tag. There's no need to make your<img> src attributes and <a> hrefattributes point to the same web address
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table>
<thead>
<th colespan = "3">
j pics
</th>
</thead>
<tr><td><a href="www.techcrunch.com"><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></a></td><td><a href="www.techcrunch.com"><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></a></td><td><a href="www.techcrunch.com"><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></a></td></tr>
<tr><td><a href="www.techcrunch.com"><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></a></td><td><a href="www.techcrunch.com"><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></a></td><td><a href="www.techcrunch.com"><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></a></td></tr>
<tr><td><a href="www.techcrunch.com"><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></a></td><td><a href="www.techcrunch.com"><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></a></td><td><a href="www.techcrunch.com"><img src="http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/></a></td></tr>
</table>
</body>
</html>
CSS:
img {
width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
No comments:
Post a Comment