[HTML] Forms and frames Task 4 With Image

Create the following HTML Page
Hint: Use Fieldsets and Nested tables

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta charset=”utf-8″ />
<title>04.Nested Tables Computers</title>
</head>
<body>
<table border=”1″>
<tr>
<td>
<a href=”#”>Apple</a>
<a href=”#”>Toshiba</a>
<a href=”#”>Lenovo</a>
<a href=”#”>Dell</a>
<a href=”#”>Asus</a>
<a href=”#”>Acer</a>
<a href=”#”>HP</a>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table border=”1″>
<tr>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table>
<tr>
<td rowspan=”2″><img src=”1352735800_MacBook.png” alt=”com1″ /></td>
<td>64GB SSD</td>
</tr>
<tr><td>2GB DDR</td></tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table>
<tr>
<td rowspan=”2″><img src=”1352735800_MacBook.png” alt=”com2″ /></td>
<td>64GB SSD</td>
</tr>
<tr><td>2GB DDR</td></tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table>
<tr>
<td rowspan=”2″><img src=”1352735800_MacBook.png” alt=”com3″ /></td>
<td>64GB SSD</td>
</tr>
<tr><td>2GB DDR</td></tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table>
<tr>
<td rowspan=”2″><img src=”1352735800_MacBook.png” alt=”com4″ /></td>
<td>64GB SSD</td>
</tr>
<tr><td>2GB DDR</td></tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table>
<tr>
<td rowspan=”2″><img src=”1352735800_MacBook.png” alt=”com5″ /></td>
<td>64GB SSD</td>
</tr>
<tr><td>2GB DDR</td></tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
<td>
<fieldset>
<legend>Apple MacBook Air</legend>
<table>
<tr>
<td rowspan=”2″><img src=”1352735800_MacBook.png” alt=”com6″ /></td>
<td>64GB SSD</td>
</tr>
<tr><td>2GB DDR</td></tr>
<tr>
<td>1300USD</td>
<td>Intel Core i5</td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
</td>
<td>
<label>Min Price: 500 USD</label><br />
<input id=”range1″ type=”range” min=”0″ max=”255″ value=”123″ /><br /><br />
<label>Mx Price: 500 USD</label><br />
<input id=”range2″ type=”range” min=”0″ max=”255″ value=”123″ /><br /><br />
<label>Min RAM: 500 USD</label><br />
<input id=”range3″ type=”range” min=”0″ max=”255″ value=”123″ /><br /><br />
<label>Max Ram: 500 USD</label><br />
<input id=”range4″ type=”range” min=”0″ max=”255″ value=”123″ /><br />
</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s