Never wish them pain. That's not who you are. If they caused you pain, they must have pain inside. Wish
Idea Transcript
You are here: Home » Practice Exercises » Part 6
Exercises: Table Tutor Tables are one of the most useful tools for page layout that you will find. One of the most common questions I hear is "How can I put some text next to an image?" One simple solution is a table...
Fresh Fruits It has long been known that a diet that includes at least a few servings of fresh fruit every day will help keep you healthy, fit and trim. Here is the same table with the borders turned on...
Fresh Fruits It has long been known that a diet that includes at least a few servings of fresh fruit every day will help keep you healthy, fit and trim. VIEW THIS EXAMPLE ON A PAGE BY ITSELF
Exercise 1: Find an image. Write a description of that image. Building a table from scratch (don't just copy mine), put that image next to its description like the table above. Then, find a second image, write a description for it and expand your table to fit this second image & description. Another common question is "How do I make a page that has a list of links down one side of the page?" Here is a screen capture of my old home page. It uses a simple two-celled table to achieve this...
Exercise 2: Find a recipe for apple pie, chocolate cream pie and lemon meringue pie. Make a page for each. Each page should use a table layout as shown above with links to each recipe in the left column and the recipe in the right column. Use a vertically tiled two-color background image like the following (make one or find one).
Make the text in the left column a different color than the text in the right column. Keep in mind that when you wish to override the document's link colors you must place the font tag pair within the link... My Link -- correct My Link -- incorrect
Here's a tip... you might want to look at your page through a range of screen resolutions. You might be surprized. You might also find that the best arrangement is that the left cell be of a fixed size (say 150) and the right cell to have no size specification at all. When your pages are done, validate them. Use the HTML 4.01 Transitional doctype. If there are any errors, correct them so that your documents validate. Here is an example you can refer to if needed.
Exercise 3: Pick 5 corporations and hunt down their current stock prices. Place them in a neatly arranged table with their name, symbol, last price, 52wk high, 52wk low and PE ratio. The end result should look like the following. Notice that the first column is aligned left and the rest are centered.
My tech stock picks NAME
SYMBOL CURRENT 52WK HI 52WK LO P/E RATIO
Microsoft
MSFT
86-3/8
Cisco Systems
CSCO
72-1/8
America Online
AOL
63
Q
44-7/16
Qwest Communications Dell Computers
DELL
119-15/16 75-1/2 82
56.09
24-13/16
400.69
95-13/16 38-15/32
350.00
66
53-59/64 59-11/16
25-3/4
74.06
31-3/8
86.97
VIEW THIS EXAMPLE ON A PAGE BY ITSELF
> HTML Practice Exercises Intro · 1 · 2 · 3 · 4 · 5 · 6 · 7 · 8 · 9 · 10 HTML 4.0 Reference Barebones HTML Guide
QUICK SITE GUIDE HOME SITE MAP - a detailed listing of EVERYTHING here. CONTACT DOWNLOADS Basic HTML Tutor Table Tutor Form Tutor Frames Tutor ColorPicker Upload your page Practice exercises
Barebones HTML Guide Javascript Tutor - A solid beginner's javascript course Email Scrambler - Fight Spam! CSS/Stylesheet Tutor - Basic Style Sheets 101 Meta Tag Tutor - Learn about META tags and effective search engine ranking strategies
GateKeeper - cool password protection with javascript that anyone can use Magic Buttons - learn to make javascript mouseovers Web Resources - a listing of quality resources useful to any web author... graphics, javascripts, cgi, etc. How to keep an idiot busy