As it was shown in Example 3, a simple box surrounding text or images, with custom border and background colors, can be made up of two nested single-cell tables. The cellpadding and bgcolor attributes of the outer table specify box border's width and color respectively. Those attributes for the inner one define the gap between the border and contents, and the background color of the box. However, since the box is a really useful template, I'd like to write separate functions for it. All the functions below reside in templates.js.

The jstBoxOpen() function appears to be really heavy due to the enormous number of parameters: the total box width (percentage values or the number of pixels, if empty string - slim box comes up), border width, border color, background color, inner gap (the cellpadding attribute of the inner table), a CSS class associated with th element of the inner table (hdCss should not conflict with brdCol), the content alignement ('left' by default), and the header. If the header exists (not empty), its properties are defined by CSS class for th element specified through boxCss. The background color of the header is the same as the border color and should not be overridden in CSS (no idea if it works). No style for the content is defined since normally the box will contain other HTML elements rather than pure text.

Note: If you don't specify the box background color, you get the border color instead of the parent element's background. If you really need a transparent box, see "framebox" templates on the next page.

In the real world, to avoid a big mess, you may want to define your own custom boxes on the base of the generic one.

Here's a simple box that can be used as a container for whatever web stuff.

The brdW and brdC parameters are border's width and color respectively. For some particular reason I replaced the total box width with the inner width (innerW), which must be specified (if not empty) in pixels only (because the total width is calculated from this one). Since the width parameter might be of either integer or string type, the parseInt function is used to to make sure that string concatenation doesn't happen instead of math addition. Originally I designed this box as global or intermediate level web stuff container, that normally have more tables inside. Therefore the inner cellpadding here is zero, and the align attribute is 'center'. The closing boxClose() function returns the generic one jstBoxClose() 'as is' with no alteration. This is done for the name matching sake only.

This template is shown in Example 4 below.

The next JST pair derived from the generic box template I would like to show here is a custom box with header. Actually this template is similar to that used for the presentation of code examples on these pages.

This template differs from the previous one by two extra parameters: header text aHdr and header style hdrStyle. The latter should be defined elsewhere before being used. The closing function remains the same.

The following example includes 3 files: templates.js where the templates belong, external style sheet ex04.css, and HTML page where the show happens.

This is the style sheet:

And here is the HTML front page: