Tables are very useful for presentation of all kinds of data and information. An example of such a table is the listing of Character Entities in Part 2. They are also very useful for organizing the structure of Web pages. This page is actually constructed as a table. This use of tables is covered in great detail in Using Tables to Format a Page.
Using Tables to Format a Page.
<table width="270" border="1" cellpadding="5" cellspacing="0">
<th width="40%">Store</th><th width="40%">Item</th><th width="20%">Qty</th>
<td rowspan="3" align="center">Groceries</td> <td>coffee</td> <td>2lbs.</td>
<td>tomato soup</td><td>2 cans</td>
<td>Staples</td> <td>printer paper</td ><td>1 pack - 500sh.</td>
<td>Bus station</td> <td colspan="2" >buy monthly ticket</td
Be careful to enclose values of all attributes with quotation marks ".
NOTES: This table has been given the attribute width="270" (pixels). If we had specified "100%", the table whould have spread out to fill available space.
We have given it a border, 1 pixel wide, and 5 pixel "cellpadding", so that text does not run into the borders.
There is a header row in which the font is bold and centered by default. See the width="x%" attribute which establishes the width of the 3 columns as 40%, 40% and 20% (percentage of the total table width).
Then there are 5 rows with various items. The vertical alignment of all cells is "middle" by default, but you only notice this in cells that are more than 1 line high.
|tomato soup||2 cans|
|Staples||printer paper||1 pack 500sh.|
|Bus station||buy monthly ticket|
In the first row. The first cell is given the attribute rowspan="3", it is also given the attribute align="center", the other cells in this row have the default horizontal alignment of left. Also note that in the remaining 2 "groceries" rows, only center and right cells need to be defined.
In the "Staples" row, note that all cells are higher, because the text in the last cell wraps into two lines. If the contents of any cell make it higher than others in the row, all the other cells in that row automatically adjust. Should any cell in a column contain some object (for example an illustration) that doesnt't fit into the specified width, it will adjust its width (and that of all other cells in the column) automatically.
In the last row, we have set the horizontal alignment to align="center". This applies to all cells in that row, although you still have the option to change it for any specific cell. The next cell in the row has the attribute colspan="2", and thus becomes the only remaining cell in the row.
Play around with the parameters to see how they effect the appearnace of the table. For example go to the bottom of test.html to see what happens when you make cellspacing="1".
This Guide covers only the most important and most frequently used elements and tags, ones that even older Browsers interpret correctly. There are many more tags and more possible attributes even for the tags that have been discussed. Any one who wishes to delve into this further should study some of the suggested materials listed in the right column.
The use of Cascading Style Sheets is recommended by most tutorials, but this is a much more complicated matter. I stay away from them, because they are often not interpreted correctly by older Browsers, ones that some of my readers still use.
Most young Web-designers love Java script and Applets. They give wonderful flexibility to achieve all kinds of visual effects. Unfortunately some of these Web pages take forever to load particularly for those who still use telephone lines to get on the Internet, in addition they cause many older Browsers to crash. Of course, commercial web sites have to use them to generate forms for placing orders, etc. but commercial web-masters take great care to ensure compatibility with their potential customers.
Unless you are thinking of setting up a web-site for which you want to get a lot of exposure, for example to sell a product or service, META tags are of little interest to you.
These are tags within the head section at the beginning of your file aand are hidden from the reader's view. They pass on information to Browsers and Search engines.
If you take a look at the source code of this page (the next section explains how to do that) you will see the <meta tags near the top of the page. If you have a Netscape or Mozilla Browser they will be colored blue.
It is inevitable that the first time you try to design your own personal Web page it won't look like you expected, if it works at all!
A small typing error can cause immense problems, for example forgetting to tap the shift key when placing > so that you end up with a period . instead of >.
Here are some common errors:
<b>This is an example of <i>overlapping</b> HTML tags.</i>
In a long document I always place comments or reminders which are hidden from the Browser, thus:
<!-- reminder -->. The key character is the "exclamation mark" !
Take a look at the source code of this page and you will see such comments in many places. They help me when making changes and revisions as well as in trouble-shooting.
Right click anywhere on the page, then left click on "View Source". (Unfortunately MS Explorer shows it with Notepad which isn't very good. If you are one of the smart people who use Netscape or Mozilla, you will see the source code neatly formatted in color, the comments show up in green so you can see them easily!). If you want to study how I wrote this page, you can print out the source code.
Dave Raggett's "More Advanced Features"
Dave is a member of the W3C Committee, but he also writes well and explains clearly.
Jennifer Kyrnin's great Web Site has all kinds of tutorials and lesson series.
Here are a couple of little tips that you might find useful:
Normally a link will open up in the same window as the page you linked from. The reader has to click on the Browser's "Back Arrow" to get back to the original text.
If you add the attribute target="_blank" you will open the linked iyem in a new window, as in this example:
<a href="HTMLQuick3.html#LI1" target="_blank"> Links </a>
Thank you for your patience in reading these pages. I hope you have found them helpful.
I will gladly answer any questions, send me an email.
I might add the answer to these tips if it seems to be of general interest.
Return to 1 ; 2 ; 3 ; 4 ; You may also check out how your exercise page test.html should look
Last update November 2003