|
Working with Constraint Tables
Premise: One of the biggest
headaches a Web Designer faces, is insuring that a page will render in the
same manner no matter what the size of a viewer's browser window. This is
above and beyond the differences which are introduced by how any given
browser interprets and renders the HTML code.
Skill Development: There is a
simple solution to forcing a specific width on a Web Page. This lesson
teaches how to implement this solution. through the use of constraint
tables.
Rationale: By forcing a page to
not surpass a predefined width, it is possible to retain its intended
aspect.
Requisites: Familiarity with
basic HTML tags is required.
STEP 1: Creating the base structure
The creation of a fixed width page starts with a blank HTML document which
contains the minimum, basic tag sets a Web document requires
(<html>, <head>, <body>). The
<title> tag as well as all of the desired
<meta> tags are also added to the document,
as well as the <!doctype> declaration (see
Listing 1).
<!doctype html public "-//W3C//DTD HTML 4.0 Final//EN">
<html>
<head>
<meta http-equiv="author" content="Your Name Here">
<title>Sample Page</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</html>
|
Although the <basefont> tag is deprecated
in HTML 4, if applied, its governance will only apply outside tables in
certain browsers and platforms. See the Tips and Pitfalls section at
the end of this lesson for details.
STEP 2: Adding a constraint
The easiest way to forcibly set the width of a page is through the use of a
Constraint Table. Its purpose is to act as a delimiting placeholder for the
entire Web Page. At its very least, this constraint table should consist of
a single row and column, and contain all the data that will appear in the
document. It is also possible to split the content up into sections, each
of which resides in their own, identical Constraint Tables.
The width of the Constraint Table is determined in part by the space in
which the page layout is to fit, keeping in mind that site visitors may or
may not have their screen resolution set to at least that width. A good
rule of thumb is to aim for a 640 x 480 pixel resolution whenever possible.
Though we're all used to scrolling on long pages, documents constrained at
higher dimensions may force some visitors to "pan" the browser
window in order to view the document (which is unnatural).
Further accounting must be made for roughly 40 pixels of screen area that
are lost to window frames and scroll bars, not to mention window margins
(the width of which varies from browser to browser). Additional adjustments
are required if a document will include, or is part of a frameset. Fig.
1 contains a guide to optimal Constraint Table widths:
| Resolution |
Optimal |
Comments |
After selecting the desired Constraint width, the necessary code can be
added to the HTML document.
<!doctype html public "-//W3C//DTD HTML 4.0 Final//EN">
<html>
<head>
<meta http-equiv="author" content="Your Name Here">
<title>Sample Page</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center">
<table width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
</td>
</tr>
</table>
</div>
</body>
</html>
|
Listing 2 shows the modified HTML code, which contains a the
Constraint Table. It is possible to either apply the align=
attribute here in order to center the Constraint Table in the window, or to
nest the entire table within a standard alignment tag (<div>
or <center>).
The use of the cellpadding= and cellspacing=
attributes in the <table> tag, both with a
value of zero, id deliberate. Doing this will maximize the useful space
within the Constraint Table by eliminating all padding within it —The
default value for both attributes is 1 (one).
Although it will ultimately be set to zero as well, the border=
attribute has also been deliberately set to 1 so that there can be a visual
frame of reference as the HTML document takes shape. Background and other
appearance modifying attributes should not always be defined in the Constraint
Table as a rule, as doing this could have an adverse effect on the final
appearance of the page.
As with the <table> tag, the defined row
should only contain the width= attribute, and
this should be set to the same value as the table width. The only
acceptable attribute that may be used here is the valign=
attribute. The use of any other positional or dimensional declarations is
not advisable as a rule, as these can produce some rather unexpected
results in certain browsers. The same applies to appearance controlling
attributes. These too may override (or be overridden by) settings declared
within the page content in certain situations.
STEP 3: Adding Content
With the Constraint table defined, it is now possible to add the displayed
content to the document. All content resides within the table row that was
defined above. Because certain browsers do not inherit attributes from
outside a table, all such definitions should be made here. Likewise, if a
table will be embedded in the content, its attributes should be declared
within its own cells. Overlooking this critical point can lead to some
serious and unexpected adverse results. If positional attributes have been
assigned in the Constraint Table's <td>
tag, it is quite possible that subsequent positional attributes will be
negated, possibly even reversed. Listing 3 illustrates the inclusion
of content in a "safe" manner:
<!doctype html public "-//W3C//DTD HTML 4.0 Final//EN">
<html>
<head>
<meta http-equiv="author" content="Your Name Here">
<title>Sample Page</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center">
<table width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<font face="Arial, Helvetica" size="3">
<div align="center"><h1>A Sample Page</h1></div>
<img src="image.gif" border="0" width="161" height="46" alt="image"><br>
<br>
Here is some sample content to show what the master table will look
like when it is done. Both an image and a table are included for demo
purposes.<br>
<br>
<div align="center">
<table width="400" border="1" cellspacing="0" cellpadding="5">
<tr>
<td width="200" align="center"><b>Cell</b></td>
<td width="200" align="center"><b>Cell</b></td>
</tr>
</table>
</div>
</font>
<br>
</td>
</tr>
</table>
</div>
</body>
</html>
|
The end result (using the sample code, above) produces results similar to
those in this screen shot.
STEP 4: Wrapping Up
When done properly, the content will render exactly like it would without
the Constraint Table, but with the fixed page width that it forces. By
retaining the border on the table while working, it is possible to see what
the HTML code is doing, and to rapidly identify any parts that are not
behaving as expected. Once everything checks out. This is, of course all
part of a battery of tests that should be performed on the completed page.
Other tests include checking how the page renders with different font sizes
(most browsers allow base and size ratio adjustments), how it renders in
different browsers, and how the various elements that make up the page
interact with each other. For more information, please see the Tips and
Pitfalls section at the end of this lesson.
Only after these tests have been performed, and the final results are to
satisfaction, should the border on the Constraint Table be turned off. This
is done by setting its border= attribute to zero.
The end result is a page that looks totally seamless, as this
screen shot of the same code shows. Listing 4 contains the final
version of the sample code used in this lesson:
<!doctype html public "-//W3C//DTD HTML 4.0 Final//EN">
<html>
<head>
<meta http-equiv="author" content="Your Name Here">
<title>Sample Page</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<font face="Arial, Helvetica" size="3">
<div align="center"><h1>A Sample Page</h1></div>
<img src="image.gif" border="0" width="161" height="46" alt="image"><br>
<br>
Here is some sample content to show what the master table will look
like when it is done. Both an image and a table are included for demo
purposes.<br>
<br>
<div align="center">
<table width="400" border="1" cellspacing="0" cellpadding="5">
<tr>
<td width="200" align="center"><b>Cell</b></td>
<td width="200" align="center"><b>Cell</b></td>
</tr>
</table>
</div>
</font>
<br>
</td>
</tr>
</table>
</div>
</body>
</html>
|
Tips and Pitfalls
Mind image widths carefully! If they're wider than the cell they're in,
unexpected results will occur.
Mind the widths of nested tables! Tables that are wider than their parents
can produce unexpected results.
Appearance and positional attributes should always be used with care.
Always test with more than one Web Browser platform, as each renders pages
in its own way!
Borderless tables should be checked with borders turned on to insure they
render as intended.
HTML should always be checked for syntax errors.
Some browsers override (or even cancel) the effect of some tag attributes,
especially within tables.
The <basefont> tag is not only depercated
in HTML 4, but also has no effect within tables in certain browsers.
Not all browsers carry font settings into tables, so always set <font>
attributes within table cells. Better yet, use Style Sheets, because <font>
is also deprecated in HTML 4.
Positional attributes set on the Constraint Table could produce unexpected
results. Use them with care.
"Override Settings" mode and Font Scaling options found in most
Browsers may alter the intended appearance of your page.
HTML Syntax errors can cause unexpected results. The most common errors are
incorrectly nested or missing tags.
|