So you want to try something imaginative with HTML text formatting perhaps even make it bounce around a bit? As usual, tables came to the rescue.

Let’s take the word’Caterpillar.’ In its most ordinary form, the following code will give you simple results.

<center>
<b><font size=”+5”>CATERPILLAR</font></b>
</center>

The most basic example of a bounce is alternating the vertical alignment of every other letter.

Create a table and choose the first <td> tag to correspond with the first letter. So if you’d like the “C” in Caterpillar to be down use <td valign=bottom>
Alternate the vertical alignments for all the subsequent tags
You need to add spaces above and below the <td> tags. When your letter is down you must add a space above it:
<td valign=bottom><p>T</td>

And when it is up, add space below:

<td valign=top>E<p></td>

Follow all these instructions and you should get a code that looks like this:

<center>
<table>
<tr>
<td valign=bottom><p><b><font size=”+5”>C</font></b></td>
<td valign=top><p><b><font size=”+5”>A</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>T</font></b></td>
<td valign=top><p><b><font size=”+5”>E</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>R</font></b></td>
<td valign=top><b><font size=”+5”>P</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>I</font></b></td>
<td valign=top><p><b><font size=”+5”>L</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>L</font></b></td>
<td valign=top><p><b><font size=”+5”>A</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>R</font></b></td>

</tr>
</table>
</center>

Now, let’s suppose we don’t want the small sharp peaks of the previous example, and prefer smoother peaks and troughs.

1. Go ahead and select whether you want the first letter to be up or down.
2. Since the first letter was aligned bottom of the cell, the next letter is aligned to the center.
3. The third letter is now aligned to the top of the cell.
4. The descent is pretty much the same as the ascent.
5. Don’t forget to adjust the spacing as in the previous example
   

Here the caterpillar’s undulations are more controlled.

Here is what the resulting code could look like:

<center>
<table>
<tr>
<td valign=bottom><br><p><b><font size=”+5”>C</font></b></td>
<td valign=top><p><b><font size=”+5”>A</font></b></td>
<td valign=bottom><p><b><font size=”+5”>T</font></b><br><p></td>
<td valign=top><p><b><font size=”+5”>E</font></b></td>
<td valign=bottom><br><p><b><font size=”+5”>R</font></b></td>
<td valign=top><b><font size=”+5”>P</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>I</font></b><br><p></td>
<td valign=top><p><b><font size=”+5”>L</font></b></td>
<td valign=bottom><br><p><b><font size=”+5”>L</font></b></td>
<td valign=top><p><b><font size=”+5”>A</font></b></td>
<td valign=bottom><p><b><font size=”+5”>R</font></b><br><p></td>

</tr>
</table>
</center>

What if your caterpillar is not as undulating as the previous examples made it out to be? Well, it’s time to get subtle.

A more subtle form of the previous example

The trick is to remove the extra spacing for all table data except for the first, using this code:

<center>
<table>
<tr>
<td valign=bottom><br><p><b><font size=”+5”>C</font></b></td>
<td><b><font size=”+5”>A</font></b></td>
<td valign=top><b><font size=”+5”>T</font></b></td>
<td valign=top><b><font size=”+5”>E</font></b></td>
<td valign=bottom><b><font size=”+5”>R</font></b></td>
<td valign=top><b><font size=”+5”>P</font></b></td>
<td valign=bottom><p><b><font size=”+5”>I</font></b></td>
<td valign=top><b><font size=”+5”>L</font></b></td>
<td valign=bottom><b><font size=”+5”>L</font></b></td>
<td valign=top><b><font size=”+5”>A</font></b></td>
<td valign=bottom><b><font size=”+5”>R</font></td>

</tr>
</table>
</center>