Basic HTML Formatting

Home
HTML Cheatsheet
Basic HTML Formatting
Hagan Heller's Tutorial
Front Page Webs

HTML Workshop, from ZDTV, original here.
By Marina Chotzinoff
(also includes basic tables from Hagan Heller Tutorial)

Essential Tags

Tags are commands held between < and > brackets. Most of the time you need a beginning tag and an ending tag, though a few tags can stand alone. Anything you place between the beginning and ending tags will take on the attributes described by the tag. For example, <b>anything between these bold tags</b> will be bold. Many tags have their own attributes and can be modified to suit you.

But before you begin formatting your text, you need a few bare minimum tags to make your page even work. The following are the most common tags you should know to start:

<HTML>

<HEAD>
<TITLE>

</TITLE>
</HEAD>

<BODY>

</BODY>

</HTML>

Notice that each of these tags has an end tag as well. The <HTML> tag tells the browser that the page should be interpreted as HTML. The <HEAD> tag defines the place where you insert other tags that won't appear on the page but need attention from the browser. The <TITLE> tags, for example, contain text that you wish to display at the top of the browser window. This is also the text that will appear when someone bookmarks your page.

<BODY> tags contain everything that will actually appear on the page. Anything you want people to see needs to be within these tags. The BODY tag has several attributes you can use to customize your page. Adding BGCOLOR=#FFFFFF within the first BODY tag tells the browser to display the background color of your page in white. Most browsers understand plain English commands for color so you can easily write BGCOLOR=white. Other attributes include BACKGROUND which will assign a background image, LINK for link color, TEXT for text color, and VLINK for visited link color. These are the most common attributes.

If you don't specify background and link colors, the browser will display its defaults-- a gray background with blue, purple, and red links. Also, people can customize their browsers to override the settings you have chosen. So even though most people will see what you see, some may not.

Now that you know what a webpage absolutely needs to have, you can practice with some text. Know this: The paragraphs you know and love will run together in a big wad unless you separate them with a paragraph tag-- <P>. If you want to make a break, but don't want the space of a paragraph, use the break tag-- <BR>. Neither of these tags need an end tag, though you may see a </P> here and there.

So go ahead and put your page together with some text in between the BODY tags. Once you have finished, save your page with the extension .html. You can then open a browser and choose Open File. Locate the file you just made and it should appear in the browser window.

Hints

You can see the code for any webpage by choosing View Source from the View menu. A lot of professional sites will have all sorts of scary- looking script at the beginning, but you should be able to find the basic tags discussed earlier in this article.

As you scroll down, you will eventually see the BODY tags and will be able to decipher the contents for the page. Looking at other programmer's code has always been the best way to learn for yourself. Find a page you like and try to create what you see in your own HTML. You can then check your code against the programmer's code.

Good housekeeping is very important when designing webpages. This means that keeping space around tags will make your code easier to read. Once you get into formatting the style of your text, you may have more than one tag for certain text. This is known as nesting. Begin your good habits now by making sure that when you have a starting tag, the browser will see its ending tag before you start with another-- <B>>I>bold and italicized text</B></I>.

Now that you know how to start your webpage, you should learn some basic formatting. After all, a bunch of plain text all in a wad will be hard to read and won't appeal to anyone. Before we even tell you how to make your text look all pretty, you should know some basic rules of writing for the Web.

  • Shrink your paragraphs dramatically. Reading text on a computer screen can be tiring and trying to decipher the meaning of a huge paragraph makes it worse. Keep your sentences and paragraphs short.
  • Don't overdo the styles, colors, and fancy fonts. Not only will your effects lose meaning, but your webpage might take on the look of an obnoxious Hawaiian shirt.
  • Break up your text with bulleted lists or indented text. It's easier to read and better to look at.

Now with all that in mind, let's get to some coding.

Basic Text Attributes

Most HTML tags that modify text need an opening and ending tag. Any text that you place between these tags will show up according to the attributes you select.

Try these tags:

<B></B>-- Bolds

<I></I>-- Italicizes

<U></U>-- Underlines Warning, this can confuse your reader, as links often appear underlined as well.

<strike></stike>-- Strikes through text

The <FONT> tag lets you change the color, size, and font face of your text. Before you get all excited thinking you can have brilliant fonts appear to all your readers, know this. Without offering a downloadable font, the only fonts you can control are fonts that already exist on your viewer's computer.

Although this might seem like a hindrance in some ways, it can actually be a blessing for viewers of potentially font-happy sites. Imagine trying to read a whole page of text that has been presented to you in a gazillion different type faces. It isn't pretty.

But if you do need a little emphasis on your page, so be it. This is the perfect time to realize that less is more.

You place the attributes of the <FONT> tag inside the tag itself, with spaces separating each attribute. <FONT COLOR=#000000 SIZE=+1 FACE=ARIAL> will display text one size larger than the base font, in black, in the font arial. You can be fairly certain that most computers will recognize common fonts such as Arial, Helvetica, and Times. Sans-serif fonts are usually easier to read on the Web.

Format Your Text

You can format your text in numerous ways. The more creative you are, the more you can do with the tags you have available.

Indent with blockquote

The <BLOCKQUOTE> tag indents text. It creates a break and a space, then shortens the margins on each side of the enclosed text. You can nest blockquotes, which means you can use several in a row to achieve the amount of indentation you need. Just be sure to use an ending blockquote for each starting blockquote.

Lists are another way to format your text. They can be bulleted (unordered) or numbered (ordered). Use numbered lists in lieu of typing in the numbers yourself. The ordered and unordered list tags will wrap long text under the text rather than the number and will make your site look a lot cleaner.

How to create lists

For an ordered list:

<OL>
<LI>First item in list
<LI>Second item in list
</OL>

The results:

  1. First item in list
  2. Second item in list

For an unordered list:

The <UL> tag will insert bullets instead of numbers in front of each list item. The <LI> tag will start a new line for the next item on the list, but if you want a space between items, you will need to add a <P> tag in between.

Get centered

The <CENTER> tag will, obviously, center your text. Don't center your entire site. It becomes tedious.

A newer version of the center tag is <DIV>. The DIV tag's attributes include ALIGN, which allow you to center, align right or left, or justify your text.

Draw the line

<HR> creates a horizontal rule, or line, across the screen. These help divide a page.

The horizontal rule tag has the following attributes: size, width, noshade, and align. Size refers to the amount of pixels a line is high.

You can set the width as a plain number, which refers to pixels, or as a percentage of the screen's width. For example, you can create a 200-pixel line by adding WIDTH=200 inside the <HR> tags. Or you can make the line take up half the page by writing WIDTH=50%.

Noshade will provide you with a plain line without shading. Align lets you choose left or right. The default position for this tag is center.

<HR WIDTH=350 SIZE=4 ALIGN=LEFT> will display this line:

Keep your formatting

The <PRE> tag will present your text as you typed it. That is, if you use returns and spaces, the PRE tag will display this formatting without the use of paragraph or break tags.

Headers

Header tags bold and increase the size of your text according to their hierarchy. Ranging from H1 to H6, header tags allow you choose the style of header you wish to use.

This is a <> tag

This is a <> tag

This is a <> tag

and so on.

Odds and ends

Here are some odd text effects you might need one day.

<sup>-- Superscript lets you make exponents2
<sub>-- Subscript lets you make dropped text3

HTML Help on the Web

We have only provided you some basic tags for playing with your text. These tags will work on older browsers, but newer tags have since been created. If you would like to find out about the latest HTML tags and specifications, visit the World Wide Web Consortium, also know as the W3C.

Here you will find all the information you need about the latest browser support, useful links for coders, as well as discussion forums and related topics.

(If you aspire to be a Web developer, bookmark the W3C and return often. It sets the standards for HTML and other Web protocols.)

If you would like to easily pick out some nice colors for your site, Brain Hall's Java ColorServe is a great tool. Not only does it allow you to pick out colors for your background, text, and links, but provides you with the codes to insert into your body tag.

Devhead has put together a Tag Library that is as up to date as you can get. You can look at tags by searching with the first letter-- which might not help if you don't know the name of the tag-- but once you find what you're looking for the information is thorough and well-planned.

The <IMG> Tag

Adding an image to your page is relatively easy. First you tell the browser there will be an image. You then explain where the image is located. Finally, attributes such as alignment and borders can be assigned.

The basic tag looks like this:

<IMG SRC="file_location.gif">

The IMG explains that this tag will call up an image. SRC defines the source-- or location-- of the image. The location is placed between quotes and should include the exact path of the image. For example, if the file you are working on is located in the main (or root) directory, and the image you want is in a folder called images, the SRC would equal "images/filename.gif."

Tip: The organization of your website is important. Create separate folders for each section as well as one for your graphics.

Let's say you have a site devoted to ZDTV. Each show would have its own folder and you would most likely have an images folder as well.

Picture the letter Y. The bottom of the Y is the root directory and each arm represents a folder. One arm is the Call for Help folder and the other is the image folder. In order to reference an image from the Call for Help arm, you have to come down to the stem of the Y before you can reach the other arm. Likewise, you need to come out of the folder you are in to go into the folder you want.

The html code must reflect this. In order to reference that folder, you precede the folder and file name you are looking for with a ../. Each layer of folders can be accessed with an additional ../, so if you have to go up two directories, your code would look like this:

<IMG SRC="../../images/filename.gif">

An alternate method to reference this image would be to include the entire URL:

<IMG SRC="http://www.yoursite.com/images/filename.gif">

<IMG> Attributes

Alignment

The IMG tag can be aligned left, right, center, bottom, top, middle. This refers to the image in relation to other things on the page. If you only have an image and you set it to align=right, the image will appear on the right side of the page. If you place this tag in front of a paragraph, the image will appear to the right of the paragraph.

You can place the align attribute before or after the file name. Just be sure to separate it with a space:

<IMG SRC="filename.gif" ALIGN=LEFT>

You can also add a border to your image. Just as you add the align attribute, you would add BORDER=# (0-99) within the image tag. This places a black border of that width around your image. When an image is linked, it will have a border by default. To override this, add BORDER=0 to the IMG tag.

Image size

Add size attributes to your image to alert the browser to the layout of your page. Size is determined by HEIGHT and WIDTH, which are set to equal the pixel dimensions of your image:

<IMG SRC="filename.gif" WIDTH=50 HEIGHT=100>

Tip: You can tweak an image's size by changing the WIDTH and HEIGHT values. For example, if you create a red square that is only one pixel by one pixel, the file size will be small, but you can make the image as large as you want. Set the square's size to HEIGHT=1 and WIDTH=400. Voila-- an instant line.

Alternate Text for an Image

Now that you've mastered adding images to your site, here is some sad news. Not everyone will be able to see your images. Some people browse the Internet with images turned off and some have text-only browsers. Some disabled people rely on software that can read the contents of a page to them. This software cannot read an image and the image titles are often not intuitive enough.

The ALT tag comes to the rescue. This attribute is placed within the IMG tag just as ALIGN and BORDER are. ALT="some text" will not only display the text in the place where the image loads, but will display the text when the mouse hovers over the image. This way, even though the image is not seen, a description is.

Once you have mastered the IMG tag, you're probably itching to make something happen. The next workshop is devoted to linking, but here is a snippet of code to quench your thirst:

<A HREF="file_to_link_to.html"><IMG SRC="image_you_want_linked.gif"></A>

Linking

The first HTML book I read looked as if it was written in a foreign language-- which it was. Imagine the thrill I felt when I made my first successful hyperlink. Previously I had taken websites for granted, assuming that anything I clicked on would magically deliver me to a new place. Now I knew what made links work. This new communication with my computer was equally as exciting as successfully ordering a meal in French.

I hope this lesson will spark the same excitement in you.

What to link

You can link any text or image on your site. This is achieved by surrounding the text, or the image tag, with an anchor tag.

Here are two sample tags:

<A HREF="page_to_link_to.html">Linked Text</A>

<A HREF="page_to_link_to.html"><IMG SRC="image_to_link.gif"></A>

What the code means

The first A in the anchor tag tells the browser that this will be a link. HREF tells the browser to reference a hyperlink-- or a clickable item. The destination of the link is placed between the quotes in the form of a URL. Your text, or image tag, follows and the link is completed with an ending anchor tag. You will notice that omitting the ending tag will cause everything following this link to be linked as well so don't forget it.

If you would like to know more about the image tag, read this article.

Proper code

URLs need to be written correctly for them to work. Many websites have levels of folders. That means your main page might point to a folder that houses your products. The images might live in another folder. Simply using the file name as the URL might not work if you need to link to a separate folder.

In order to reference a page in a folder other than the folder your document is in, add two periods and a forward slash (../) in front of the folder name, then add another slash and the file name you are referencing. Add a new ../ for each folder out of which you must climb.

<A HREF="../../pants/long_pants.html">Click here to look at some pants.</A>

If your site sells socks, you might have a folder called socks, then a folder within socks called blue_socks. If you want to link from a blue_sock page to a page in the pants folder, your code would look like this:

Each ../ takes you up a level, the /pants tells the browser to go into the folder called pants and choose the file name long_pants.html.

To avoid this confusion entirely, use the full URL: (http://www.yoursite.com/folder/page.html)

Linking within the same level does not require anything other than the file name.

If you would like to know how to change the color of your links, read this article on essential tags.

Link Within the Same Page

If your document is very long, you might want to create links within your page. Let's say you have a glossary. Instead of forcing your viewers to scroll through the alphabet, you can offer an A-to-Z list at the top of the page. Click on the letter Q and the browser would jump to the Qs. You can then add links every so often that, when clicked, will take the viewer back to the index at the top of the page.

The first step is to name the place in the page to which you wish to jump. Scroll to the place in your document that first mentions Quinelles. Then wrap the anchor tag around the Q as follows:

<A NAME="name_of_anchor">Q</A>

Now that the jumping point is named, you can refer to it from anywhere in your document. Go to the letter Q at the top of your document and add this tag:

<A HREF=#name_of_anchor>Q</A>

Now when the viewer clicks on the top letter Q, the paragraph about Quinelles will appear at the top of the screen.

If you would like to link to a specific spot on another page, follow the first step to name the spot on the other page. Then create a normal anchor link and add #name_of_spot to the end of the URL:

<A HREF="../pants/pants_page.html#name_of_spot">

Email Links

You may have clicked on a link that takes you directly to your email program, or a browser email form. This is the mailto tag that also takes the form of an anchor link. Here is the format:

<A HREF="mailto:email_address"> Contact Us</A>

Substitute email_address with the address to which you wish to send mail. You can also specify the subject line of the email by adding ?subject= directly after the email address. This line,

<A HREF="mailto:bob@zdtv.com?subject=web workshop"> Contact Us</A>

would send an email to bob@zdtv.com with the subject line "web workshop."

 

The Table Sampler (From Hagan Heller Tutorial)

This is intended to be a tutorial by example of Tables. This covers most of the new tags in tables, though it doesn't necessarily show some of the really creative capabilities available in tables.

A basic 3x2 table

A B C
D E F 
<table border>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>

Two demonstrations of rowspan

Item 1 Item 2 Item 3
Item 4 Item 5 
<table border>
        <tr>
                <td>Item 1</td>
                <td rowspan=2>Item 2</td>
                <td>Item 3</td>
        </tr>
        <tr>
                <td>Item 4</td> <td>Item 5</td>
        </tr>
</table>
Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 
<table border>
        <tr>
                <td rowspan=2>Item 1</td>
                <td>Item 2</td> <td>Item 3</td> <td>Item 4</td>
        </tr>
        <tr>
                <td>Item 5</td> <td>Item 6</td> <td>Item 7</td>
        </tr>
</table>

Demonstration of colspan

Item 1 Item 2
Item 3 Item 4 Item 5 
<table border>
        <tr>
                <td>Item 1</td>
                <td colspan=2>Item 2</td>
        </tr>
        <tr>
                <td>Item 3</td> <td>Item 4</td> <td>Item 5</td>
        </tr>
</table>

Demonstration of headers, <th>

Head1 Head2 Head3
A B C
D E F 
<table border>
        <tr>
                <th>Head1</th> <th>Head2</th> <th>Head3</th>
        </tr>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>

Demonstration of colspan and Headers

Head1 Head2
A B C D
E F G H 
<table border>
        <tr>
                <th colspan=2>Head1</th>
                <th colspan=2>Head2</th>
        </tr>
        <tr>
                <td>A</td> <td>B</td> <td>C</td> <td>D</td> 
        </tr>
        <tr>      
                <td>E</td> <td>F</td> <td>G</td> <td>H</td> 
        </tr>
</table>

Demonstration of multiple headers, colspan

Head1 Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H 
<table border>
        <tr>
                <th colspan=2>Head1</th>
                <th colspan=2>Head2</th>
        </tr>
        <tr>
                <th>Head 3</th> <th>Head 4</th> 
                <th>Head 5</th> <th>Head 6</th> 
        </tr>
        <tr>
                <td>A</td> <td>B</td> <td>C</td> <td>D</td> 
        </tr>
        <tr>
                <td>E</td> <td>F</td> <td>G</td> <td>H</td> 
        </tr>
</table>

Demonstration of side headers

Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9 
<table border>
        <tr><th>Head1</th>
                <td>Item 1</td> <td>Item 2</td> <td>Item 3</td></tr>
        <tr><th>Head2</th>
                <td>Item 4</td> <td>Item 5</td> <td>Item 6</td></tr>
        <tr><th>Head3</th>
                <td>Item 7</td> <td>Item 8</td> <td>Item 9</td></tr>
</table>

Demonstration of side headers, rowspan

Head1 Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11 
<table border>
        <tr><th rowspan=2>Head1</th>
            <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> <td>Item 4</td>
        </tr>
        <tr><td>Item 5</td> <td>Item 6</td> <td>Item 7</td> <td>Item 8</td>
        </tr>
        <tr><th>Head2</th>
            <td>Item 9</td> <td>Item 10</td> <td>Item 3</td> <td>Item 11</td>
        </tr>
</table>

Sample table, using all of these

    Average
  Height Weight
Gender Males 1.9 0.003
Females 1.7 0.002 
<table border>
        <tr>      <td><th rowspan=2></th>
                <th colspan=2>Average</th></td>
        </tr>
        <tr>      <td><th>Height</th><th>Weight</th></td>
        </tr>
        <tr>      <th rowspan=2>Gender</th>
                <th>Males</th><td>1.9</td><td>0.003</td>
        </tr>
        <tr>      <th>Females</th><td>1.7</td><td>0.002</td>
        </tr>
</table>

Clever uses of rowspan/colspan

A 1 2
3 4
C D 
<table border>
        <tr>
                <td align=center rowspan=2 colspan=2>A</td>
                <td>1</td>
                <td>2</td>
        </tr>
        <tr>
                <td>3</td>
                <td>4</td>
        </tr>
        <tr>
                <td align=center rowspan=2 colspan=2>C</td>
                <td align=center rowspan=2 colspan=2>D</td>
        </tr>
        <tr>
        </tr>
</table>

Adjusting margins and borders

A table without borders

Item 1 Item 2 Item 3
Item 4 Item 5 
<table>
        <tr>      <td>Item 1</td> <td rowspan=2>Item 2</td> <td>Item 3</td> 
        </tr>
        <tr>      <td>Item 4</td> <td>Item 5</td> 
        </tr>
</table>

A table with a border of 10

Item 1 Item 2
Item 3 Item 4 
<table border=10>
        <tr>      <td>Item 1</td> <td> Item 2</td>
        </tr>
        <tr>      <td>Item 3</td> <td>Item 4</td> 
        </tr>
</table>

cellpadding and cellspacing

A B C
D E F 
<table border cellpadding=10 cellspacing=0>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>
A B C
D E F 
<table border cellpadding=0 cellspacing=10>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>
A B C
D E F 
<table border cellpadding=10 cellspacing=10>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>
A B C
D E F 
<table border=5 cellpadding=10 cellspacing=10>
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>

Alignments, Captions, Subtables

Demonstration of multiple lines in a table

January February March
This is cell 1 Cell 2 Another cell,
cell 3
Cell 4 and now this
is cell 5		 Cell 6 
<table border>
        <tr>
                <th>January</th>
                <th>February</th>
                <th>March</th>
        </tr>
        <tr>
                <td>This is cell 1</td>
                <td>Cell 2</td>
                <td>Another cell,<br> cell 3</td>
        </tr>
        <tr>
                <td>Cell 4</td>
                <td>and now this<br>is cell 5</td>
                <td>Cell 6</td>
        </tr>
</table>

align=left|right|center

can be applied to individual cells or whole rows

January February March
all aligned center Cell 2 Another cell,
cell 3
aligned right aligned to center default,
aligned left		 
<table border>
        <tr>
            <th>January</th>
            <th>February</th>
            <th>March</th>
        </tr>
        <tr align=center>
            <td>all aligned center</td>
            <td>Cell 2</td>
            <td>Another cell,<br> cell 3</td>
        </tr>
        <tr>
            <td align=right>aligned right</td>
            <td align=center>aligned to center</td>
            <td>default,<br>aligned left</td>
        </tr>
</table>

valign=top|bottom|middle

can be applied to individual cells or whole rows

January February March
all aligned to top and now this
is cell 2		 Cell 3
aligned to the top aligned to the bottom default alignment,
center		 
<table border>
        <tr>
                <th>January</th>
                <th>February</th>
                <th>March</th>
        </tr>
        <tr valign=top>
            <td>all aligned to top</td>
            <td>and now this<br>is cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td valign=top>aligned to the top</td>
            <td valign=bottom>aligned to the bottom</td>
            <td>default alignment,<br>center</td>
        </tr>
</table>

caption=top|bottom

A top caption
January February March
This is cell 1 Cell 2 Another cell,
cell 3		 
<table border>
<caption align=top>A top caption</caption>
        <tr>
                <th>January</th>
                <th>February</th>
                <th>March</th>
        </tr>
        <tr>
                <td>This is cell 1</td>
                <td>Cell 2</td>
                <td>Another cell,<br> cell 3</td>
        </tr>
</table>
January February March
This is cell 1 Cell 2 Another cell,
cell 3
A bottom caption 
<table border>
<caption align=bottom>A bottom caption</caption>
        <tr>
                <th>January</th>
                <th>February</th>
                <th>March</th>
        </tr>
        <tr>
                <td>This is cell 1</td>
                <td>Cell 2</td>
                <td>Another cell,<br> cell 3</td>
        </tr>
</table>

Nested Tables: Table ABCD is inside Table 123456

1 2 3
A B
C D
4 5 6 
<table border>
        <tr> <!-- row 1, table 1 -->
                <td>1</td>
                <td>2</td>
                <td>3
                <table border>
                        <tr> <!-- row 1, table 2 -->
                                <td>A</td>
                                <td>B</td>
                        </tr>
                        <tr> <!-- row 2, table 2 -->
                                <td>C</td>
                                <td>D</td>
                        </tr>
                </table>
                </td>
        </tr>
        <tr> <!-- row 2, table 1 -->
                <td>4</td>
                <td>5</td>
                <td>6</td>
        </tr>
</table>

Table Widths

Basic 50% width

Width=50% Width=50%
3 4 
<table border width="50%">
        <tr><td>Width=50%</td><td>Width=50%</td>
        </tr>
        <tr><td>3</td><td>4</td>
        </tr>
</table>
Item width affects cell size 2
3 4 
<table border width="50%">
        <tr><td>Item width affects cell size</td><td>2</td>
        </tr>
        <tr><td>3</td><td>4</td>
        </tr>
</table>
width=100% This is item 2
3 4 
<table border width="100%">
        <tr><td>width=100%</td><td>This is item 2</td>
        </tr>
        <tr><td>3</td><td>4</td>
        </tr>
</table>

Centering a table on a page

A B C
D E F 
<center>
<table border width="50%">
        <tr>
                <td>A</td> <td>B</td> <td>C</td>
        </tr>
        <tr>
                <td>D</td> <td>E</td> <td>F</td>
        </tr>
</table>
</center>

Table Width & Nested Tables

Item 1 Item 2
Item A Item B
Item 4 
<table border width="50%">
        <tr><td>Item 1</td><td>Item 2</td>
        </tr>
        <tr><td>
            <table border width=100%>
                <tr><td>Item A</td><td>Item B</td>
                </tr>
            </table>
            </td>
            <td>Item 4</td>
        </tr>
</table>

height=15%

height=5% Item 2
3 4 
<table border width="50%" height="15%">
        <tr><td>height=5%</td> <td>Item 2</td>
        </tr>
        <tr><td>3</td><td>4</td>
        </tr>
</table>

Copyright © 1995 Hagan Heller. The information on these pages may be freely copied, so long as they are not sold and this copyright information is included.