NOTE: This lesson is best viewed with the Internet Explorer browser. Many of the techniques presented just aren't supported by Netscape. Please view this page with Internet Explorer to see the word wrapping effect. Netscape "workarounds" to get the same effect are discussed at the end of the lesson.

NOTE 2: This is not to insult Netscape. IE and Netscape just support different renderings of the same code. You could just as easily look at the situation from the Netscape point of view and discuss IE workarounds. The fact still remains that IE just flat out supports more HTML and CSS than Netscape does. Hopefully, Netscape will turn this situation around soon.

What Are Inset Boxes?

To the right is an example of an "inset box". It's just a one celled table that can be used to emphasize certain content. This content may be a warning, something very important, or something that just doesn't quite fit in with the rest of the page's content.

You'll notice that text flows around this table just like it would an image. This is the effect you get when you use the ALIGN attribute in the <table> tag. We'll go into more detail about this later.

Making The Box

The box itself is very easy to code. It is coded before any text you want wrapping around it. The code for the box above is:

<table width=150 height=100 align="right" cellspacing=0 cellpadding=5 border=5 bordercolor="orange">

<tr>
<td width="100%" align="left" valign="top" bgcolor="#009966">
<span style="color: #ffff99">This is an example of an "Inset Box".</span>
</td>
</tr>

</table>

<p>Some text you'd want to wrap around the box...</p>

This box is a single-celled table. Most inset boxes have only one cell that occupies the entire table. The box is sized in the <table> tag with WIDTH and HEIGHT. The cell is sized to go all the way across the table's width with width="100%". The yellow colored font comes from the <span> tag that's nested inside the cell. It does not come from a table tag.

Positioning The Box

The entire box at the top of this page is positioned with the align="right" attribute and value in the <table> tag. You must use an ALIGN attribute in the <table> tag to get text to wrap around the table. This applies even if you are aligning the table to the default left side.

If you do not add an ALIGN attribute, text will be presented below the table. Centered tables always present the text below the table. If you use ALIGN and still want the text below the table (as opposed to wrapping around it), just add a <br> tag or two after the closing </table> tag.

</table><br><br>

Making Gutters

With inset boxes, like with images, you may want to make a margin of whitespace around the box. Unfortunately, the <table> tag does not support HSPACE and VSPACE like the <img> tag does. Instead we have to be clever to make a margin between the box and the text wrapping around it.

One method for doing this is to use the table's BORDER the gutter we need. First you'd set the thickness of the border with the BORDER attribute and then color it to the same color as the background (BGCOLOR of the page) with BORDERCOLOR. This will work on all sides, top, and bottom of the inset box.

To do this on this page we'd code:

<table width=150 height=100 align="left" cellspacing=0 cellpadding=5 border=10 bordercolor="white">

<tr>
<td width="100%" align="left" valign="top" bgcolor="#009966">
<span style="color: #ffff99">This is an example of an "Inset Box".</span>
</td>
</tr>

</table>

Now there would be a white border 10 pixels thick around the table that would blend into the page's background color and provide some whitespace between the table and the text. An example is to the left. See how the text is spaced away from the box?

You can still get a border around the box by using BORDERCOLOR in the <td> tag. Sadly you cannot size the <td>'s border like you can the <table>'s border.

Another approach to adding whitespace around a table is to style the margins of the surrounding text with a special CSS class. Make a class for text that will wrap around the table and style its margins for the whitespace needed. Then apply this class to the <p> tags of the text surrounding the inset box. This comes in as a handy workaround to Netscape's inability to automatically wrap text around boxes. Just use two different margin styles.

In practice, you may find that you don't need to make gutters around your inset box tables like you did with images. This is because the table's BORDER, BORDERCOLOR, and CELLPADDING provide plenty of demarcation between the box and the surrounding text.

Image Captions

Coffee I drink a lot of coffee when coding these pages.

One of the most common uses of inset tables is to add a text caption, or description, to an image. Look at the box to the right to see how this works. I added a title at the top and a caption beneath the image. Everything is coded inside the single cell of an inset box.

It's generally a better idea to add captions in an image editor if you can. This makes the text part of the image and there's no need to "box" everything together. Just place the image. However, if you have an extensive caption, making an inset box is a better way to go. It will load quicker than text added as part of the image and this text is easier to edit than that added to the image itself.

The code for this is the same as for any other inset box. Some care must be exercised in placing the elements in the box. Here's the code I used to make the inset box to the right:

<table width=100 height=200 align="right" cellspacing=0 cellpadding=5 border=0>
<tr>
<td width="100%" align="center">

<!-- Inset Box Content -->
<h5>Coffee</h5>
<img src="coffee.gif"><br clear="all">
<h6>I drink a lot of coffee when coding these pages.</h6>

</td></tr></table>

Netscape Workarounds

This is the first time Netscape becomes a real problem. View this page in Netscape and you'll see what I mean. The text doesn't flow around the tables, it is presented to the side of the tables instead.

To get around this you must place <br> or <p> tags as necessary to break up the text. Put these breaks at the point in your text where you want it to start going below the table. This will give the same appearance as wrapping, but it's a lot more work and isn't as consistent as IE's rendering at all resolutions.

I did not use the line breaks for Netscape on this page so you could see the big difference between each browser's rendering.

Exercises

Make the following inset boxes for Internet Explorer before moving on.

The box to the left is 150 pixels wide and 50 pixels tall. It has a big red border of 10 pixels. The cell stretches across 100% of the table. The content is styled with a <span> tag. You could also style the content with a <div> tag. Inset boxes are handy for emphasized content.

This box is 250 pixels wide and 100 pixels tall. It is aligned to the right of the page. I used the BORDER to make a whitespace of 20 pixels. This is really noticeable as the space between the box and the scrollbar to the right. It's just a border colored white like the background of the page. You can barely notice the thin red border I put around the cell by using BORDERCOLOR in the <td> tag. When using such a thin border, it's best to use a contrasting color. These inset boxes can come in really handy for making a short list of text links separate from your main content.

Now view these exercises in Netscape. Pick places to put <br> and <p> tags to get the text to flow like you want it to. The trick is to put the break right before the text you want to go below the inset box.

To Next Advanced HTML Lesson

Back To Advanced HTML Index