Frames & Tables Tutorial

**AQUARIAN** · 27-Feb-2007, 12:34 AM

Frames & Tables Tutorial
Part 1 - Introduction

Why Do I Need Them?

Frames and tables are extremely important in web design. It is impossible to create a navigation bar on a website without using frames or tables in one form or another.

An example of this is that this page is completely enclosed in a giant invisible table. It has a column down the side to put the navigation in and a giant cell for all the page text. I could also have got the same effect using frames.

What Is The Difference?

There is one major difference between frames and tables.

Frames divide up your browser window into separate areas. In each of these a page is loaded. Links in different pages can be made to change the pages in other frames and frames can stay the same when another page changes. This means that you can have one page which has the navigation bar for a whole site on it and it never changes.

Tables divide up a web page into separate cells (like in a spreadsheet). This means that you have a lot more control over where text and pictures can be placed. By using the method I described earlier (having a column for a navigation bar and a cell for the page text) you can create complex page structures. A page looking the same could be created with frames and tables.

Frames: Good and Bad

The best feature of using frames is, of course, the ability to update every page on your site using one file. For example: if I used frames on Free Webmaster Help I could add another link to the navigation bar on one page. When the frames loaded on the web you would see this change, whatever page you are on.

Frames also make very consistent pages. As you are only changing the text for each page of the site, the actual look of the page will not change much in the user's browser.

When used properly frames can make a very good design feature and, once each frame has loaded, the loading times of a site are a lot less (as, usually, only one frame is ever changed throughout the whole site).

Frames do have their bad points, though. One of the major ones is that, even though frames have been around for a long time, they are still not fully supported. Some people who are still using older browsers cannot view frames sites. Even worse, some search engines will not index pages using frames! This could mean a great loss of traffic for your website

Another problem with frames is that if someone arrives at an internal page on your site the frames will not appear. This could mean that someone might read a page and not actually know they are on your site.

The final problem is that it is very difficult to bookmark an internal page in your site and if someone bookmarks a page on your site (using most browsers) and return later, they will see your first page, not the one they bookmarked.

Tables: Good and Bad

Like frames tables also have good and bad points. Their best feature is that they fix all the problems with frames. As all the parts are on each page, if you load an internal page of the site everything will appear and it is possible to bookmark these pages.

All search engines support tables so you do not need to worry about them not indexing your site. Although, some browsers do not support tables, nearly all the browsers in use do so you should not have any problems with compatibility.

Like frames, tables also have some bad points. The main one of these is that, all the parts making the page are stored on each page (not on separate ones like in frames), updating something on the whole site is more difficult. For example: adding a new link to my navigation bar in frames would mean changing one page. Doing it in tables would mean changing every page on the site. This can be overcome by using a search and replace program, though.

Keeping a consistent design is also more difficult using tables because, as I explained earlier, everything is on each page. This means that each item on yo
ur page which is supposed to remain consistent must be placed in exactly the same place on each page.

The final problem with tables is that, because everything is on every page, the individual pages take longer to load. This is not much of a problem if you are keeping quite consistent with images, but it you are not it can increase loading times greatly. Also, the whole table must load before it is displayed on the screen so users will be left with a blank screen while the page is loading (instead of seeing the text appear as it is downloaded).

Which Is Better?

I cannot really say which is better! I personally use tables, a template and a search and replace program to make Free Webmaster Help but it is really a matter of what features are most important to you.

How Do I Use Them?

Simple! Read on. In this tutorial you can learn how to create tables and frames using a WYSIWYG program or in HTML code.

**AQUARIAN** · 27-Feb-2007, 12:34 AM

Frames & Tables Tutorial
Part 2 - Frames
How Do Frames Pages Work?

Frames pages are basically an HTML file which breaks the browser window up into separate parts or frames. In each frame a different HTML file can be loaded. Links in one frame can then be used to change the content in any frame on the page. If a frame is not re-loaded, changes to the others do not affect it.

Frames In A WYSIWYG Program

The free WYSIWYG HTML editors are not particularly good at creating frames but you can do it using some of the more expensive ones. If your program does not have a frames option you will need to do the coding in HTML.

To create a frames page in FrontPage 97/98/2000 all you need to do is choose 'Frames Pages' in the new page dialog box (File, New, Page). It will really do the rest. You can change the size of the frames and set the target (the frame that is reloaded when a hyperlink is clicked) from the normal menus.

The two things you are likely to need to change are the frame borders and the option to resize them in the browser. These can be changed from the frame properties dialog box. To open this right-click on the frame you want to edit and choose frame properties. Turn off the option resizable in browser then click Frames Page Properties... and turn off the Show Frame Borders option.

FrontPage is actually very good at coping with frames and, if you are quite used to the program, youshould be able to use frames very easily.

Frames In HTML

To explain how to create frames in HTML code I will give you some sample code and then explain it. This code creates a page with a left frame for contents.

<html>
<head>
<title>My Frames Page</title>
</head>
<frameset border="0" cols="150,*" frameborder="0">
<frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize>
<frame name="main" src="main.htm" scrolling="auto" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

I will now explain this code:

<html>
<head>
<title>My Frames Page</title>
</head>

This is the standard start for an HTML document. The title will appear in the browser's title bar for every page on the site as it is contained in frames.

<frameset border="0" cols="150,*" frameborder="0">

This declares a frames page. It sets the border as none and the frames borders as none. The part:

cols="150,*"

Says that the frames should be columns. One should be 150 pixels wide and the other should fill up the rest of the screen. This is a very versatile tag. You can use percentages instead of the values and any number of frames can be added by just adding another comma.

You can also change this to rows= to make the frames rows instead.

<frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize>

This is the tag for the first frame. It tells you the frame should be referred to as contents, links in it will open in the frame called main, the page to be loaded in the frame is contents.htm and that scrollbars should be used if needed. It also tells the browser not to allow the user to resize the frame. Other values which could have been used for scrolling could be yes and no. These would set the browser to always display scollbars or never display them respectively.

<frame name="main" src="main.htm" scrolling="auto" noresize>

This is the tag for the second frame.

<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>

This is the area where you can put the information to be displayed by browsers which don't support frames. It is a normal HTML page between the <body></body> tags.

</frameset>
</html>

This text c
loses the frames and HTML tags.

The final thing you need to know to use the a tag to make hyperlinks refer to another frame. To do this you add target="framename" to the hyperlink tag. For example to make a page load in the main frame you would use:

<a href="page.htm" target="main">Click Here</a>

You can also use:

_self - Opens in same frame
_top and _parent - Opens over the top of the frames page, removing the frames
_blank - A new window (not necessarily for frames pages).

**AQUARIAN** · 27-Feb-2007, 12:35 AM

Frames & Tables Tutorial
Part 3 - WYSIWYG Tables
What Are Tables?

Tables are the same as a table in any other application. They are like a spreadsheet. They have rows, columns and cells. They are quite complex to make in HTML but can be very effective (this page is made up of many big and small tables). If you are going to create one in HTML read the section below first as it will explain how the table works.

Tables In A WYSIWYG Program And Table Terms

I would strongly suggest that you use a WYSIWYG (What You See Is What You Get) program to create tables even if you don't normally use one. This is because it is difficult to create a table in HTML as it is difficult to visualize it.

You will be able to either insert a table by choosing Table, Insert Table... or Insert, Table... depending on the program you are using. You will probably now get a dialog box.

You can specify the number of rows and columns here (although you can add or delete them later). You can also specify the width and height of the table. If you do not it will resize with the things you put in it. You can either specify these as a percentage of the browser screen or as a size in pixels.

Next you can specify the border size, cell padding and cell spacing. The border size is how thick the border around the cell is. It will be invisible (like on this page) if you set it at 0. Cell spacing is the space between each individual cell. A value of 1 or 2 is usually common here. A value of 0 will leave no space between cells. Cell padding is the space between the edge of the cell and the content inside. The values in here are the same as for cell spacing (1 or 2 is common, 0 is none).

Once you have inserted the table you can put text, images or anything else in it. Two more things you may need are merging cells, splitting cells and changing the background color.

Merging and splitting cells can usually be done by highlighting the cell(s) and right clicking to get a menu. If you select 2 (or more) cells and choose to merge them they will become one cell. This will not effect any of the other cells so you can have cells spanning more than one row or column in your table.

If you choose to split a cell it will split in two (or more). This allows you to have multiple cells where there would normally be one.

Finally changing the cell background can be done from the cell properties (usually in the right-click menu). You can either select a color or an image (like with a page background) and it will be applied to the cell. An example of this is the cells at the top this page which have a background color.

Tables are an excellent design tool and if you use them properly you can create complex designs, far beyond the normal HTML limitations.

**AQUARIAN** · 27-Feb-2007, 12:37 AM

Frames & Tables Tutorial
Part 4 - HTML Tables
Before You Start

Before you start learning how to create a table in HTML code you must make sure that you are familiar with with the terms used when referring to tables. If you have not done this then go back to part 3 and read about them.

Tables In HTML

Tables are quite difficult to do in HTML. This is not because the code is particularly hard to remember but because it is difficult to get the table you want by using it. It is extremely difficult to visualize what you are creating when you are using HTML code.

The first thing you must do is declare the table. This is done using the <table> tag:

<table border="1" cellspacing="2" cellpadding="2" width="500" height="100">

This basically means to create a table with a border of size 1 with cell spacing of 2 and cell padding of 2. If you do not know what these terms mean click here. The table should be 500 pixels wide and 100 pixels high. You could also use percentage values here by adding a % sign. If you leave out the width and height tags the table will resize itself depending on the data in it (but will never be wider than the browser window).

The next tag declares a row in the table:

<tr>

This tag does have some variables but I will deal with them later. The next thing you have to do is declare the first column:

<td width="100" height="100">

This creates a cell 100 pixels wide and 100 pixels high. Like with a table you can use percentages (of the total table width and height) or leave out the width and height and the cell will resize itself.

Next you include the standard HTML you want in the cell (you can use anything, even tables) before closing the column tag:

</td>

You can now add as many columns you like before ending the row using:

</tr>

You can add as many rows and cells as you like before closing the table:

</table>

That may have been a little bit confusing so I will give you an example:

MonthSalesProfitJanuary$10,000$2,000February$15,000$5,000March$5,0 00$1,000

<table width="75%" border="1" cellspacing="2" cellpadding="2">
<tr>
<td>
<center><b>Month</b></center>
</td>
<td>
<center><b>Sales</b></center>
</td>
<td>
<center><b>Profit</b></center>
</td>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$2,000</td>
</tr>
<tr>
<td>February</td>
<td>$15,000</td>
<td>$5,000</td>
</tr>
<tr>
<td>March</td>
<td>$5,000</td>
<td>$1,000</td>
</tr>
</table>

This information should have helped you to create a simple table. There are some more complex tags to make cells span several rows or columns but when you are creating these sort of tables it is much easier to use a WYSIWYG program. There are just a few more pieces of information you will need to know:

These are the background and bgcolor attributes. These can be used in the <table> <td> and <tr> tags to apply a background color or image to that part of the table (or the whole table if used with <table>). The background attribute is used to specify a background image:

<td background="http://www.gowansnet.com/cellbg.gif">

and the bgcolor is used to specify a color using an HTML color word or an RGB code:
[co
de]
<td bgcolor="#FF0000">

Summary

In this final part you have learned the basics of creating a table in HTML. Tables are a very good navigation feature but in my opinion they are best created by WYSIWYG programs as they can soon become quite complex.

27-Feb-2007, 12:34 AM	#1 (permalink)
AQUARIAN Fixed Error! Posts: 803 Join Date: Feb 2007 Rep Power: 2 IM:	Frames & Tables Tutorial Frames & Tables Tutorial Part 1 - Introduction Why Do I Need Them? Frames and tables are extremely important in web design. It is impossible to create a navigation bar on a website without using frames or tables in one form or another. An example of this is that this page is completely enclosed in a giant invisible table. It has a column down the side to put the navigation in and a giant cell for all the page text. I could also have got the same effect using frames. What Is The Difference? There is one major difference between frames and tables. Frames divide up your browser window into separate areas. In each of these a page is loaded. Links in different pages can be made to change the pages in other frames and frames can stay the same when another page changes. This means that you can have one page which has the navigation bar for a whole site on it and it never changes. Tables divide up a web page into separate cells (like in a spreadsheet). This means that you have a lot more control over where text and pictures can be placed. By using the method I described earlier (having a column for a navigation bar and a cell for the page text) you can create complex page structures. A page looking the same could be created with frames and tables. Frames: Good and Bad The best feature of using frames is, of course, the ability to update every page on your site using one file. For example: if I used frames on Free Webmaster Help I could add another link to the navigation bar on one page. When the frames loaded on the web you would see this change, whatever page you are on. Frames also make very consistent pages. As you are only changing the text for each page of the site, the actual look of the page will not change much in the user's browser. When used properly frames can make a very good design feature and, once each frame has loaded, the loading times of a site are a lot less (as, usually, only one frame is ever changed throughout the whole site). Frames do have their bad points, though. One of the major ones is that, even though frames have been around for a long time, they are still not fully supported. Some people who are still using older browsers cannot view frames sites. Even worse, some search engines will not index pages using frames! This could mean a great loss of traffic for your website Another problem with frames is that if someone arrives at an internal page on your site the frames will not appear. This could mean that someone might read a page and not actually know they are on your site. The final problem is that it is very difficult to bookmark an internal page in your site and if someone bookmarks a page on your site (using most browsers) and return later, they will see your first page, not the one they bookmarked. Tables: Good and Bad Like frames tables also have good and bad points. Their best feature is that they fix all the problems with frames. As all the parts are on each page, if you load an internal page of the site everything will appear and it is possible to bookmark these pages. All search engines support tables so you do not need to worry about them not indexing your site. Although, some browsers do not support tables, nearly all the browsers in use do so you should not have any problems with compatibility. Like frames, tables also have some bad points. The main one of these is that, all the parts making the page are stored on each page (not on separate ones like in frames), updating something on the whole site is more difficult. For example: adding a new link to my navigation bar in frames would mean changing one page. Doing it in tables would mean changing every page on the site. This can be overcome by using a search and replace program, though. Keeping a consistent design is also more difficult using tables because, as I explained earlier, everything is on each page. This means that each item on yo ur page which is supposed to remain consistent must be placed in exactly the same place on each page. The final problem with tables is that, because everything is on every page, the individual pages take longer to load. This is not much of a problem if you are keeping quite consistent with images, but it you are not it can increase loading times greatly. Also, the whole table must load before it is displayed on the screen so users will be left with a blank screen while the page is loading (instead of seeing the text appear as it is downloaded). Which Is Better? I cannot really say which is better! I personally use tables, a template and a search and replace program to make Free Webmaster Help but it is really a matter of what features are most important to you. How Do I Use Them? Simple! Read on. In this tutorial you can learn how to create tables and frames using a WYSIWYG program or in HTML code.

27-Feb-2007, 12:34 AM	#2 (permalink)
AQUARIAN Fixed Error! Posts: 803 Join Date: Feb 2007 Rep Power: 2 IM:	Re: Frames & Tables Tutorial Frames & Tables Tutorial Part 2 - Frames How Do Frames Pages Work? Frames pages are basically an HTML file which breaks the browser window up into separate parts or frames. In each frame a different HTML file can be loaded. Links in one frame can then be used to change the content in any frame on the page. If a frame is not re-loaded, changes to the others do not affect it. Frames In A WYSIWYG Program The free WYSIWYG HTML editors are not particularly good at creating frames but you can do it using some of the more expensive ones. If your program does not have a frames option you will need to do the coding in HTML. To create a frames page in FrontPage 97/98/2000 all you need to do is choose 'Frames Pages' in the new page dialog box (File, New, Page). It will really do the rest. You can change the size of the frames and set the target (the frame that is reloaded when a hyperlink is clicked) from the normal menus. The two things you are likely to need to change are the frame borders and the option to resize them in the browser. These can be changed from the frame properties dialog box. To open this right-click on the frame you want to edit and choose frame properties. Turn off the option resizable in browser then click Frames Page Properties... and turn off the Show Frame Borders option. FrontPage is actually very good at coping with frames and, if you are quite used to the program, youshould be able to use frames very easily. Frames In HTML To explain how to create frames in HTML code I will give you some sample code and then explain it. This code creates a page with a left frame for contents. <html> <head> <title>My Frames Page</title> </head> <frameset border="0" cols="150," frameborder="0"> <frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize> <frame name="main" src="main.htm" scrolling="auto" noresize> <noframes> <body> <p>This page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html> I will now explain this code: <html> <head> <title>My Frames Page</title> </head> This is the standard start for an HTML document. The title will appear in the browser's title bar for every page on the site as it is contained in frames. <frameset border="0" cols="150," frameborder="0"> This declares a frames page. It sets the border as none and the frames borders as none. The part: cols="150,*" Says that the frames should be columns. One should be 150 pixels wide and the other should fill up the rest of the screen. This is a very versatile tag. You can use percentages instead of the values and any number of frames can be added by just adding another comma. You can also change this to rows= to make the frames rows instead. <frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize> This is the tag for the first frame. It tells you the frame should be referred to as contents, links in it will open in the frame called main, the page to be loaded in the frame is contents.htm and that scrollbars should be used if needed. It also tells the browser not to allow the user to resize the frame. Other values which could have been used for scrolling could be yes and no. These would set the browser to always display scollbars or never display them respectively. <frame name="main" src="main.htm" scrolling="auto" noresize> This is the tag for the second frame. <noframes> <body> <p>This page uses frames, but your browser doesn't support them.</p> </body> </noframes> This is the area where you can put the information to be displayed by browsers which don't support frames. It is a normal HTML page between the <body></body> tags. </frameset> </html> This text c loses the frames and HTML tags. The final thing you need to know to use the a tag to make hyperlinks refer to another frame. To do this you add target="framename" to the hyperlink tag. For example to make a page load in the main frame you would use: <a href="page.htm" target="main">Click Here</a> You can also use: _self - Opens in same frame _top and _parent - Opens over the top of the frames page, removing the frames _blank - A new window (not necessarily for frames pages).

27-Feb-2007, 12:35 AM	#3 (permalink)
AQUARIAN Fixed Error! Posts: 803 Join Date: Feb 2007 Rep Power: 2 IM:	Re: Frames & Tables Tutorial Frames & Tables Tutorial Part 3 - WYSIWYG Tables What Are Tables? Tables are the same as a table in any other application. They are like a spreadsheet. They have rows, columns and cells. They are quite complex to make in HTML but can be very effective (this page is made up of many big and small tables). If you are going to create one in HTML read the section below first as it will explain how the table works. Tables In A WYSIWYG Program And Table Terms I would strongly suggest that you use a WYSIWYG (What You See Is What You Get) program to create tables even if you don't normally use one. This is because it is difficult to create a table in HTML as it is difficult to visualize it. You will be able to either insert a table by choosing Table, Insert Table... or Insert, Table... depending on the program you are using. You will probably now get a dialog box. You can specify the number of rows and columns here (although you can add or delete them later). You can also specify the width and height of the table. If you do not it will resize with the things you put in it. You can either specify these as a percentage of the browser screen or as a size in pixels. Next you can specify the border size, cell padding and cell spacing. The border size is how thick the border around the cell is. It will be invisible (like on this page) if you set it at 0. Cell spacing is the space between each individual cell. A value of 1 or 2 is usually common here. A value of 0 will leave no space between cells. Cell padding is the space between the edge of the cell and the content inside. The values in here are the same as for cell spacing (1 or 2 is common, 0 is none). Once you have inserted the table you can put text, images or anything else in it. Two more things you may need are merging cells, splitting cells and changing the background color. Merging and splitting cells can usually be done by highlighting the cell(s) and right clicking to get a menu. If you select 2 (or more) cells and choose to merge them they will become one cell. This will not effect any of the other cells so you can have cells spanning more than one row or column in your table. If you choose to split a cell it will split in two (or more). This allows you to have multiple cells where there would normally be one. Finally changing the cell background can be done from the cell properties (usually in the right-click menu). You can either select a color or an image (like with a page background) and it will be applied to the cell. An example of this is the cells at the top this page which have a background color. Tables are an excellent design tool and if you use them properly you can create complex designs, far beyond the normal HTML limitations.

27-Feb-2007, 12:37 AM	#4 (permalink)
AQUARIAN Fixed Error! Posts: 803 Join Date: Feb 2007 Rep Power: 2 IM:	Re: Frames & Tables Tutorial Frames & Tables Tutorial Part 4 - HTML Tables Before You Start Before you start learning how to create a table in HTML code you must make sure that you are familiar with with the terms used when referring to tables. If you have not done this then go back to part 3 and read about them. Tables In HTML Tables are quite difficult to do in HTML. This is not because the code is particularly hard to remember but because it is difficult to get the table you want by using it. It is extremely difficult to visualize what you are creating when you are using HTML code. The first thing you must do is declare the table. This is done using the <table> tag: <table border="1" cellspacing="2" cellpadding="2" width="500" height="100"> This basically means to create a table with a border of size 1 with cell spacing of 2 and cell padding of 2. If you do not know what these terms mean click here. The table should be 500 pixels wide and 100 pixels high. You could also use percentage values here by adding a % sign. If you leave out the width and height tags the table will resize itself depending on the data in it (but will never be wider than the browser window). The next tag declares a row in the table: <tr> This tag does have some variables but I will deal with them later. The next thing you have to do is declare the first column: <td width="100" height="100"> This creates a cell 100 pixels wide and 100 pixels high. Like with a table you can use percentages (of the total table width and height) or leave out the width and height and the cell will resize itself. Next you include the standard HTML you want in the cell (you can use anything, even tables) before closing the column tag: </td> You can now add as many columns you like before ending the row using: </tr> You can add as many rows and cells as you like before closing the table: </table> That may have been a little bit confusing so I will give you an example: MonthSalesProfitJanuary$10,000$2,000February$15,000$5,000March$5,0 00$1,000 <table width="75%" border="1" cellspacing="2" cellpadding="2"> <tr> <td> <center><b>Month</b></center> </td> <td> <center><b>Sales</b></center> </td> <td> <center><b>Profit</b></center> </td> </tr> <tr> <td>January</td> <td>$10,000</td> <td>$2,000</td> </tr> <tr> <td>February</td> <td>$15,000</td> <td>$5,000</td> </tr> <tr> <td>March</td> <td>$5,000</td> <td>$1,000</td> </tr> </table> This information should have helped you to create a simple table. There are some more complex tags to make cells span several rows or columns but when you are creating these sort of tables it is much easier to use a WYSIWYG program. There are just a few more pieces of information you will need to know: These are the background and bgcolor attributes. These can be used in the <table> <td> and <tr> tags to apply a background color or image to that part of the table (or the whole table if used with <table>). The background attribute is used to specify a background image: <td background="http://www.gowansnet.com/cellbg.gif"> and the bgcolor is used to specify a color using an HTML color word or an RGB code: [co de] <td bgcolor="#FF0000"> Summary In this final part you have learned the basics of creating a table in HTML. Tables are a very good navigation feature but in my opinion they are best created by WYSIWYG programs as they can soon become quite complex.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)