Intermediate HTML
Lesson 2: Intermediate Page Design
Getting fancy with Tables
Ok. Remember, in the last section, we had a page with a nested table, that is, a table within a table? Let's play with that a little. Let's change the nested table part from this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t..."> <html> <head> <title>My Cats</title> <link href="/class.css" type="text/css" rel="stylesheet" /> <meta content="cats" name="keywords" /> <meta content="A personal account of my cats." name="Description" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <table width="98%" summary="table formatting the appearance of this page" border="0"> <tbody> <tr> <td valign="top" align="center" colspan="2"> <img height="100" alt="My Cats" src="images/myCatTitle.gif" width="750" /> </td> </tr> <tr> <td class="menulinks" valign="top" width="33%"> Home <br /> <a href="amtrak.htm">My first cat, Amtrak </a> <br /> <a href="rocky.htm">Rocket J. Pussycat</a> <br /> <a href="Kateycat.htm">Katey Catt</a> <br /> <a href="mel.htm">Mel Tormew</a> <br /> <a href="metro.htm">Metro</a> <br /> <a href="kaye.htm">Sir Kaye, Knight of the Roundtable</a> <br /> <a href="beebe.htm">Beebe</a> <br /> <a href="clawed.htm">Clawed Raines, the Invisible Cat</a> <br /> </td> <td width="66%"> <table class="text" cellspacing="6" width="80%" border="0"> <tbody> <tr> <td valign="top" colspan="2" rowspan="2"> <img src="images/beebe.jpg" alt="beebe"/> </td> <td valign="top" colspan="3"> Cats in general are a joy to have around the house. They're always doing something funny. And on a cold winter's night while you're watching TV, there's nothing better than a warm cat in your lap. <br /> <br /> Of course, cats sleep a lot. In fact, cats sleep, on average, 16 hours a day. To the left is a picture of Beebe doing what cats do best. </td> </tr> <tr><td><img src="images/spacer.gif" alt="spacer" width="10" height="20" /></td> <td style="FONT-SIZE: 70%; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: center" width="40%" colspan="2" rowspan="2"> <b>An interesting cat fact</b> <br /> <br /> Did you know that calico cats are almost all female? </td> </tr> <tr> <td width="20%"> <img src="images/kaye.jpeg" alt="kaye" /> </td> <td width="40%" colspan="2"> Kaye is one of the twins. He's best friends with Metro, but is also close to his brother. </td> </tr><tr> <td colspan="4"> Here's Mel. He's the king of the household. Handsome fellow, isn't he? He's all black except for one tiny tuft of white on his neck, and he's built like a wrestler. </td> <td width="20%"> <img src="images/mel.jpeg" alt="mel tormew" /> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html>
Check out my version of the result at http://www.havingmyownwebsite.net/htmlcl...
Hmmmm. This section is getting kind of long. Let's go to the next section for a discussion of this code.
Print this page
Latest Articles