Table displays 4 images (one blank) in each row when coded for 3


#1


I'm not stuck. It passed me but its displaying incorrectly.


There is no error. MY code is written to display 3 rows of images with 3 cells in each row as the exercise demanded. Though I passed the section, the site shows 3 rows with 4 cells each with the second image being a blank box. I don't understand why


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css" />
		<title>My Photo Page</title>
	</head>
	<body>
	    <table>
	        <thead>
	            <th>
	                The Magnificent Photo Gallery 
	            </th>
	        </thead>
	        <tbody>
	            <tr>
	                <td>
	                <a href="http://codecademy.com">
	                    <img src="https://content.halocdn.com/media/Default/games/halo-3/media/h3_010-68adc78167c54528b438982a40ff04a7.jpg" />
	                </td>
	                <td>
	                <a href="http://codecademy.com">
	                    <img src="http://assets.vg247.com/current//2014/09/halo_the_master_chief_collection_3.jpg" />
	                </a>
	                </td>
	                <td>
	                <a href="http://codecademy.com">
	                    <img src="http://xboxenthusiast.com/wp-content/uploads/2015/10/Halo-Banner.jpg" />
	                </a>
	                </td>
	            </tr>
	            <tr>
	                <td>
	                <a href="http://codecademy.com">
	                    <img src="http://xboxenthusiast.com/wp-content/uploads/2015/10/Halo-Banner.jpg" />
	                </a>
	                </td>
	                <td>
	                <a href="http://codecademy.com">
	                    <img src="http://xboxenthusiast.com/wp-content/uploads/2015/10/Halo-Banner.jpg" />
	                </a>
	                </td>
	                <td>
	                <a href="http://codecademy.com">
	                    <img src="http://xboxenthusiast.com/wp-content/uploads/2015/10/Halo-Banner.jpg" />
	                </a>
	                </td>
	            </tr>
	            <tr>
	                <td>
	                <a href="http://codecademy.com">
	                    <img src="http://xboxenthusiast.com/wp-content/uploads/2015/10/Halo-Banner.jpg" />
	                </a>
	                </td>
	                <td>
	                <a href="http://codecademy.com">
	                    <img src="http://xboxenthusiast.com/wp-content/uploads/2015/10/Halo-Banner.jpg" />
	                </a>
	                </td>
	                <td>
	                <a href="http://codecademy.com">
	                    <img src="http://xboxenthusiast.com/wp-content/uploads/2015/10/Halo-Banner.jpg" />
	                </a>
	                </td>
	            </tr>
	        </tbody>
	    </table>
	</body>
</html>


#2

all rows? i only have this problem in the first row, because the images in the second row (second column) is bigger, what if you add:

<style>img { max-width: 200px; }</style>

inside your <head><head>? this will make the images smaller.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.