Tables

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.

Table Construction

• A TABLE starts with the tag <table> and ends with the tag </table>. - its principal ATTRIBUTES are: width= in pixels or percentage, border="0" (no border) or border="1" in pixels (may be larger number), cellpadding="n pixels" (Space between contents and border), cellspacing="n pixels" (space between cells, default="1")
• There must be at least one ROW which starts with <tr> and ends with </tr>
• Each ROW must have at least one CELL, each CELL starts with <td> and ends with </td>, the number of cells in each row must be the same, they constitute COLUMNS
• Optionally there may be a HEADER row which starts with <th> and ends with </th>
• Optionally there may be a Caption above the Table, which starts with <caption> and ends with </caption>
• ATTRIBUTES - in rows or cells - (horizontal) align= (left, center, right) - (vertical) valign= (top, middle, bottom) - row attributes apply to all cells in row, but an individual cell's attributes take precedence.
  bold are default values, exception: align="center is default in HEADER cells.
• CELLS, additional attributes: width= pixels or percentage of available space; colspan= for cell spanning more than 1 column, rowspan= for cell spanning more than 1 row.

Using Tables to Format a Page.

Table Example

<table width="270" border="1" cellpadding="5" cellspacing="0">
<caption><b>SHOPPING LIST</b></caption>
<tr>
<th width="40%">Store</th><th width="40%">Item</th><th width="20%">Qty</th>
</tr>
<tr>
<td rowspan="3" align="center">Groceries</td> <td>coffee</td> <td>2lbs.</td>
</tr>
<tr>
<td>sugar</td><td>1lb.</td>
</tr>
<tr>
<td>tomato soup</td><td>2 cans</td>
</tr>
<tr>
<td>Staples</td> <td>printer paper</td ><td>1 pack - 500sh.</td>
</tr>
<tr align="center">
<td>Bus station</td> <td colspan="2" >buy monthly ticket</td
</tr>
</table>
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.

This is how this code is interpreted by your Browser:

MORE NOTES: 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".

MORE STUDIES

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.

META TAGS

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.

TROUBLE SHOOTING

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:

• Overlapping tags - like this example:
  

      <b>This is an example of <i>overlapping</b>
      HTML tags.</i>
  

• Forgetting an end tag - you started coding a table, a few hours later you finished, but forgot to place   </table>! -
  or you bold-faced some text and forgot the   </b>. Now half your page is all bold face!

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.

SOME TIPS

Here are a couple of little tips that you might find useful:

Opening link in a separate window

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

Return to Top of page,        or to Web Design Table of Contents.

Return to Home Page.
Copyright © 2002 B. C. Biega. All rights reserved.

Last update November 2003