Internet Explorer As A Development Platform?
META tags: What they are and how they work
Stop! Is Your HTML Document Valid?
HTML #5 - Using feedback forms
You are here: irt.org | Articles | HTML | HTML #4 - Advanced Page Layout [ previous next ]
Published on: Tuesday 4th September 1998 By: Michael Bednarek
Hello and welcome to part four of my HTML mini-series. If you're a regular reader you'll be glad to know that you're nearly at the end of the road - there's just one more article to go after this one, and then you're on your own. Seeing as you're now basically competent in areas such as images, text, hyperlinks and sound, it's time to introduce to you to two more main areas of HTML, both dealing with page layout - tables and frames.
Tables are probably one of the most versatile features available in HTML. You should be familiar with the traditional use of tables in other media to display information in an effective and easy to understand way, for example to summarise business figures or match results. With HTML, you can create tables to display your data as well, making it look very attractive.
A more interesting use of HTML tables is to control the layout of the Web page itself. Using a table to encapsulate all your page content, you can align everything together and make it look neat and professional. It's also possible to achieve certain things using tables that just aren't possible otherwise.
For example, let's say you wanted your page's layout to be a set of navigation buttons (images) on the left of the screen, and any content (e.g. text, pictures, etc.) on the right hand side of the screen. Excluding frames (which we will come to later on in this article), it would be very difficult to achieve such an effect without tables. The buttons would most likely not line up properly underneath each other, the text would be too close to them, and would overflow underneath the buttons to make the page look ugly.
With a table, you split the whole page up into two small sections. The left section is quite narrow and contains only your images - one automatically fits beneath the other and lines up perfectly. The right section is for the rest of your content. The text automatically aligns itself to the left margin of the section, doesn't overspill into the left hand side of the page (where the buttons are) and everything looks hunky-dory.
Okay, I've now preached to you about how great tables are and everything, so it's time to look at how they actually work. A table is defined in rows. Each row is then split up into further sections, called cells. Each cell can be either a heading or a data cell - one is bold and the other isn't. You can create some quite complicated table layouts because cells can span more than one row or more than one column.
We'll look at this all in more detail in a moment. For now, let's concentrate on the TABLE command, which encloses everything and starts it all off. The TABLE command has a number of optional attributes. First off comes the familiar ALIGN parameter, which controls whether the table appears to the left, right or centre of the page (with LEFT,RIGHT or CENTER respectively). Next up, WIDTH defines the width of the entire table in pixels or as a percentage of the available screen width. For example, WIDTH="300" would make a table 300 pixels wide, but WIDTH="50%" would make it half the size of the screen. Similarly, HEIGHT can be used to control the height of the table.
The BGCOLOR attribute specifies the background colour of the entire table, using either a colour name or hexadecimal triplet, and the BACKGROUND attribute (IE only) allows you to add a picture as a background. The BORDER attribute specifies whether the table has borders and if so, how thick they should be (in pixels). Finally, the CELLSPACING attribute controls how far the individual cells are from one another, and the CELLPADDING attribute controls how far the contents of the cells are from the cell wall (both in pixels).
To help you digest that bombardment of information, here's an example line which I might use to start a table:
<TABLE ALIGN="CENTER" WIDTH="100%" HEIGHT="100" BGCOLOR="BLUE" BORDER="1" CELLPADDING="0" CELLSPACING="2">
Assuming the table only had one cell (more about that in a moment), it would look like this:
After you've done the opening TABLE command, you can add a CAPTION command to provide a title for the table. This is useful when you're presenting data. For example:
<CAPTION>A study of the lengths of caterpillars</CAPTION>
The CAPTION tag can include the ALIGN attribute, either TOP,LEFT,RIGHT or BOTTOM, to specify the location of the title with respect to the rest of the table. The contents of the CAPTION tag can be formatted just like any other text.
Once you've done that, you can get to the real meat of the table. First of all, open up a new row using the table row TR tag. Then inside that row, you define each individual cell with either a table heading TH tag or a table data TD tag. As I mentioned before, table headings differ only from table data cells in that they are bold and are aligned to the centre.
Both TH and TD tags have a range of attributes to control the way they look. The ROWSPAN and COLSPAN attributes control the size of the cell. For example, you may want a certain cell to take up its row and the row below it as well, in which case you would set ROWSPAN to 2. Or, you might want it to be twice as wide as other cells, so you would use COLSPAN="2". Other attributes which control the cell size are WIDTH and HEIGHT, taking the usual pixel or percentage values.
There's also the BGCOLOR attribute to control the background colour of the individual cell, and in Internet Explorer the BACKGROUND attribute to add a picture to it. The ALIGN attribute specifies how the text or contents of the cell should be aligned within it, either LEFT, RIGHT or CENTER, while the VALIGN attribute specifies the vertical alignment, either TOP, MIDDLE or BOTTOM.
As an example of all this, take a look at the following HTML:
<TABLE ALIGN="CENTER" BORDER="1">
<CAPTION><B>An example of a table</B></CAPTION>
<TR>
<TD WIDTH="200" BGCOLOR="TURQUOISE">
This cell here is 200 pixels wide and has a turquoise background
colour.
</TD>
<TD ROWSPAN="2" BGCOLOR="YELLOW" VALIGN="BOTTOM">
This cell has no defined width, and has a yellow background colour.
It spans two rows and has vertical alignment set to bottom.
</TD>
</TR>
<TR>
<TH WIDTH="200" BGCOLOR="ORANGE">
This cell is a heading cell, with an orange background.
</TH>
</TR>
</TABLE>Which would produce this:
| This cell here is 200 pixels wide and has a turquoise background colour. | This cell has no defined width, and has a yellow background colour. It spans two rows and has vertical alignment set to bottom. |
| This cell is a heading cell, with an orange background. |
|---|
You've just learned the traditional way of building tables. The bad news is, it doesn't stop there. One of the biggest changes in HTML 4.0 has been to the structure and formatting of tables. On the whole, HTML 4.0 has shunted the old formatting tags like BGCOLOR and ALIGN, and now recommends the use of cascading style sheets to control the appearance of tables. This means that instead of using TD BGCOLOR="red" or TD BACKGROUND="picture.gif", you would use:
<TD STYLE="background-color:red">
or
<TD STYLE="background-image: url('picture.gif')">The advantage of this is that CSS is compatible with a wider range of browsers (for example, the BACKGROUND attribute for tables worked only on Internet Explorer).
More important is the introduction of incremental tables. In the past, tables have been loaded up completely before they were displayed. This meant that on a slow connection with a large table, you'd have to wait until the whole table loaded up before you could see anything. On a page where the layout was controlled completely by a table, this was not a good thing.
In HTML 4.0 some new tags have been introduced to enable the incremental loading of tables - where the content is displayed as it arrives. These new tags are the COLGROUP and COL elements. COLGROUP refers to a group of columns. With COLGROUP, you can group columns together and set the width of each column in the group with one attribute - or you can use the COL element inside COLGROUP to single out certain columns in the group for special widths or for formatting purposes. For example, you could single out a certain column and then, using CSS, specify that the whole column should have a blue background.
This can be quite a complicated concept to grasp, so let's take a look at an example.
<COLGROUP SPAN="40" WIDTH="20"> </COLGROUP>
In the above code, we are specifying a group of columns consisting of the first forty columns. We have told the browser that each column in the group should have a width of 20 pixels. This now enables the table to be rendered incrementally, which is really quite handy. The WIDTH attribute can also be a percentage of the screen width. We can also use the COL element to single out certain columns in the group:
<COLGROUP WIDTH="20"> <COL SPAN="39"> <COL ID="format-me-specially"> </COLGROUP>
Here, we've said that all columns in the group should have a width of 20 pixels. Then we've defined thirty nine columns using the COL element and its SPAN attribute. The remaining column is defined with a separate COL element, and this one is given an ID so that it can be referred to by a style sheet or even by script.
The COLGROUP and COL elements have several attributes. We've already seen WIDTH and SPAN, but there's also CELLHALIGN, for the horizontal alignment of all cells in the column or column group, and CELLVALIGN (bet you can't guess what that does).
There are yet more new tags in HTML 4.0. This time, they're concerned with a table's header and footer cells. You see, when printing out large tables, it can be quite annoying to find that on the second and subsequent pages you can't tell what the headings of the columns were, so you have to refer back to the very start of the table.
With the new tags, you can specify table header and table footer sections, which appear at the top and bottom of every page when the table is printed. An advantage to users viewing the table on screen is that the sections can scroll independently of each other, so for example the main body of the table can be scrolled down, while the header and footer stay in the same place. You can also have multiple bodies, so one section of the table scrolls independently of another.
This is achieved by using the THEAD, TFOOT and TBODY elements. In all the previous tables we've looked at, you can imagine them as having an empty THEAD and TFOOT, and the TBODY enclosing all the rows and cells we defined.
If you have a table where the first row consists exclusively of TH tags, this might be better placed in the table header. For example, the following table:
<TABLE> <TR> <TH>Heading 1</TH> <TH>Heading 2</TH> <TH>Heading 3</TH> </TR> <TR> <TD>Information</TD> <TD>Information</TD> <TD>Information</TD> </TR> </TABLE>
Might become:
<TABLE>
<THEAD>
<TR>
<TH>Heading 1</TH>
<TH>Heading 2</TH>
<TH>Heading 3</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Information</TD>
<TD>Information</TD>
<TD>Information</TD>
</TR>
</TBODY>
</TABLE>That's about all there is to learn about tables. In general, most seasoned Web designers use tables when laying out their pages. However, in some cases, it may be appropriate to use....
Frames, if you don't already know, enable you to display more than one Web page on the screen at the same time, by splitting the screen into two or more independent sections. They are most commonly used in site navigation systems, where you have a small menu frame at the side of the screen, and a larger content frame making up the rest of the browser window. The menu frame stays on the screen all the time, regardless of what page is in the content frame.
This of course has the advantage that you only need to code your site's navigation system once, because that one menu page stays on the screen the whole time. Frames also bring other advantages, such as the ability to transfer JavaScript variables from one page to the next.
Unfortunately, as the title of this section suggests, there are also some disadvantages to frames. It may surprise you to know that frames have only just become part of the HTML standard in HTML 4.0 - they were originally a Netscape innovation, but became so popular that many browsers supported them. Nevertheless, there are still some browsers out there which cannot support frames, and though you can specify alternate content for them, they may find it difficult to browse your site if your pages are lacking a navigation system.
If a visitor reaches a certain page in your frames-based site and decides they will bookmark it, they'll have problems. The browser will bookmark the index page which sets the frames, not the current contents of the frame, so they'll most likely end up back at your home page. It also works the other way round: if someone wants to go to a particular page on your frames site, and types in the URL, the page will come up but not the frames that should go with it (this can be remedied using script - see Redirecting Access Within Frames).
What all this means is that you should think carefully about using frames on your site. If you have a large site where the menu often changes, you're catering for an audience with reasonably modern browsers, you need frames for a script, or you just have a good looking frames navigation system, then go ahead and use them - otherwise, ask yourself if they are really necessary.
Assuming I haven't scared you off with all that depressing talk, then let's get down to making some frames. First of all, let me explain how they're done. We start off with an ordinary HTML file, except there's no BODY tags. Instead of a BODY section, we have a FRAMESET section. Inside the FRAMESET section we define the size and orientation of our frames. We also specify a unique name for each frame, and the address of the pages that will initially load up inside each one. Finally, we can also specify some alternate content for browsers which don't support frames.
| menu | content |
Let's take a look at an example. Above is a representation of a frameset which we will create; very simply, it consists of two frames, a small left-hand menu frame, and a larger right-hand content frame. These two columns take up 15% and 85% of the screen width respectively. Knowing this, we can write our first FRAMESET line:
<FRAMESET COLS="15%,85%">
A few things to note here. Firstly, if our frames had been rows (i.e. a small menu frame on the top, and a larger content frame at the bottom), we could have used FRAMESET ROWS="15%,85%" to get a similar sort of effect. Secondly, the frame sizes don't actually have to be percentages.
Percentages are good because they are relative, so they keep the same proportions no matter what the size of the browser window or the screen resolution. However, sometimes you might not want to keep the same proportions. For example, your menu system might consist of an image map which is exactly 100 pixels wide. You would therefore want the size of your frame to be about 105 pixels wide (leaving a few pixels for leeway) all the time, no matter what the state of the window. You would then want the content frame to occupy the rest of the screen (but you don't know exactly how many pixels wide that will be). This can be achieved with a line such as:
<FRAMESET COLS="105,*">
The asterisk (*) means "the remaining space".
Another permutation you might want is multiple rows or columns. For example, you might want two small rows, one at the top and one at the bottom of the screen, with a larger content frame between the two. If each small row was 5% of the total screen height, then you could use a FRAMESET command like this:
<FRAMESET ROWS="5%,*,5%">
Once you've defined your FRAMESET structure, you need to specify the details of each individual frame. You do this using the FRAME tag. The FRAME tag has several attributes:
NAME - gives the frame a unique name so it can be referred to in links (see later).
SRC - specifies the location of the HTML file which will load into the frame.
FRAMEBORDER - (HTML 4.0) specifies if the frame should have a border.
NORESIZE - if included, specifies that the frame cannot be resized.
SCROLLING - specifies whether the frame should include scrollbars all the time, none of the time, or only when needed.
If you cast your mind back to our original menu and content frames, then here's the FRAMESET again, this time with the appropriate FRAME tags too:
<FRAMESET COLS="15%,85%">
<FRAME NAME="menu" SRC="menu.htm"
FRAMEBORDER="0" NORESIZE SCROLLING="NO">
<FRAME NAME="content" SRC="home.htm"
FRAMEBORDER="0" SCROLLING="AUTO">
</FRAMESET>That's okay for simple frames, but what if you'd like a set-up a bit like this:
| menu | content |
| newsflash |
We still have our menu and content frames, but this time we also have a smaller frame which might, for example, contain a scrolling newsflash. The benefit of having it in a frame is that it's always visible, wherever you are in the site.
You would accomplish this by using nested framesets. First of all, we split the screen into two columns, like before, with proportions 15% and 85%. We use a FRAME tag for the menu frame, like before, but then instead of a FRAME tag for the content frame we use another FRAMESET. This second frameset defines two rows, one big (the content frame) and one small (the newsflash frame). Here's what it would look like:
<FRAMESET COLS="15%,85%">
<FRAME NAME="menu" SRC="menu.htm"
FRAMEBORDER="0" NORESIZE SCROLLING="NO">
<FRAMESET ROWS="80%,20%">
<FRAME NAME="content" SRC="home.htm"
FRAMEBORDER="0" SCROLLING="AUTO">
<FRAME NAME="newsflash" SRC="flash.htm"
FRAMEBORDER="0" NORESIZE SCROLLING="NO">
</FRAMESET>
</FRAMESET>There's one last thing to add, and that's content for older browsers. Browsers which don't support frames will end up looking at a blank page unless you cater for them too. You do this by putting alternate content inside the NOFRAMES tag. Any HTML here will be ignored by frames-capable browsers but will be displayed by everyone else. Good ideas for content here might be a link to frames-enabled browsers; a link to a no-frames version of your site if you have one; or a link to the home page of your site (i.e. the one that would have been displayed in the content frame of your frameset). So our final FRAMESET document would look like this:
<HTML>
<HEAD>
<TITLE>My frames page</TITLE>
</HEAD>
<FRAMESET COLS="15%,85%">
<FRAME NAME="menu" SRC="menu.htm"
FRAMEBORDER="0" NORESIZE SCROLLING="NO">
<FRAMESET ROWS="80%,20%">
<FRAME NAME="content" SRC="home.htm"
FRAMEBORDER="0" SCROLLING="AUTO">
<FRAME NAME="newsflash" SRC="flash.htm"
FRAMEBORDER="0" NORESIZE SCROLLING="NO">
</FRAMESET>
<NOFRAMES>
Unfortunately, this site uses frames, which are not supported by your
browser. For best results, please use
<A HREF="http://www.netscape.com">Netscape 2.0+</A> or
<A HREF="http://www.microsoft.com/ie/">MS Internet Explorer 3.0+</A>.
In the meantime, you can <A HREF="home.htm">view the home page</A>.
</NOFRAMES>
</FRAMESET>
</HTML>It's not all that simple. Once you've got your frameset up and running, you have to check over all your hyperlinks too. Unless you say so, all hyperlinks will load up the document in the frame they originated from. Obviously, this is not good - you want links on your menu frame to load up in the content frame. It's also unfortunate when you want to link to an external site. Poorly designed frames sites can leave you trapped in their frames when you leave to go off somewhere else.
It's quite easy to make sure you don't make these mistakes, however. You simply need to add the TARGET parameter to all of your A (hyperlink) tags. Remember the frame names you defined in your FRAMESET? Well here's where they come in handy. As an example, let's say you had a link in your menu page which takes the visitor to an Awards page (awards.htm). You want the Awards page to be displayed in your content frame, which you named "content", so your hyperlink would be:
<A HREF="awards.htm" TARGET="content">Awards</A>
If you have a link to an external site, say irt.org, then you obviously want your frames to disappear completely so that the other site appears in its full glory. To do this, you specify your target as "_top" (case sensitive):
<A HREF="http://www.irt.org/" TARGET="_top">Awards</A>
Floating frames allow you to insert HTML pages inside other HTML pages. Until recently they were a Microsoft innovation, supported only in Internet Explorer, but they're now part of the HTML 4.0 standard so expect to see them supported in future versions of Netscape as well.
Floating frames are created using the IFRAME (inline frame) tag. The IFRAME tag has several attributes in common with FRAME - it has NAME (for targets in links), SRC, FRAMEBORDER and SCROLLING. It also has a few in common with IMG (the image tag) - ALIGN, HEIGHT and WIDTH.
You can provide alternate content for browsers which don't support floating frames by inserting HTML between the opening and closing IFRAME tags. This will be ignored by supported browsers.
For example, to create a borderless floating frame with a size of 300 x 200 pixels you would use the following code:
<IFRAME NAME="floater" SRC="mypage.htm" WIDTH="300" HEIGHT="200" FRAMEBORDER="0"> Sorry, this is a floating frame which is not supported by your browser. </IFRAME>
Here's an example:
I expect you to be creating an absolutely brilliant site now with your newly acquired skills. It should have the works - attractive text, great images, maybe the odd sound effect, and now an effective layout and structure.
The only thing that's missing is a way for your visitors to talk back to you. Yes, you probably already have a link to your e-mail address, but it's more convenient for them and probably more efficient for you if you use a feedback form on your site. In the final part of the HTML series, I'll give you the lowdown on the tags you need to know to build up a good HTML form.
Information and example code in the Tables in HTML 4.0 section taken from the official HTML 4.0 specification at the W3 Consortium. Copyright © World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved.
Internet Explorer As A Development Platform?
META tags: What they are and how they work
Stop! Is Your HTML Document Valid?
HTML #5 - Using feedback forms
HTML #3 - Making your Web pages more exciting