When you use a paint program to create graphics, you can draw an outline of a shape and "flood" it with color, that is, fill the outline by clicking on a point within it with a tool that fills the shape with your chosen color or pattern. Tables do the same thing for you for simple square or rectangular shapes that you can flood with text, pictures, color, or a graphics background.

You can see the outline of the shape by using border=1 or higher to form a frame around the cells, or use border=0 to form an invisible boundary for your cell. You can push the cells next to each other with cellspacing=0, or separate them with cellspacing=1 or higher to see the structure of the table. You can let the contents of the cell determine its size and shape, as in our newsletter, or you can define the size and shape and force the chosen background to stay within its confines to form a geometric pattern.

Let's end this part of the tutorial with a small quilt puzzle.

Little Quilt

I used <TABLE BORDER=0 CELLSPACING=0> to hide the borders and push the cells together to create a smoothly connected quilt block pattern. Let me use CELLSPACING=2 to separate the cells so you can see them more clearly.

What you have is four cells in the center held open by a 20 x 20 pixel spacer graphic, two cells two blocks high at the sides, and two cells four blocks wide across the top. The basic cell is "outlined" with this code (I set border=1 so you can see it):

<table border=1> <tr> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> </tr> </table>

Put four together in two rows of two cells, and you have the center blocks.

<table border=1> <tr> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> </tr> <tr> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> </tr> </table>

Add a two row tall cell to the beginning and end of the first row to make the side strips of the puzzle. Just make two more copies of the basic cell and add rowspan=2 to the <td> tag. Note that the second row is unchanged. You don't have to add anything to it to continue the long side cells there; you just need the remaining cells of that row of the table in the correct order.

<table border=1> <tr> <td rowspan=2> <img src="../graphics/1x1.gif" width=20 height=20> </td> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> <td rowspan=2> <img src="../graphics/1x1.gif" width=20 height=20> </td> </tr> <tr> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> </tr> </table>

Now finish the outlines with the four cell wide cell above this group of cells and the four cell wide cell beneath them. You'll need to add another row for each new cell. Copy the basic cell again, add colspan=4 to the <td> tag, and put this cell in a row above and below the current set of rows. Note that you don't change the existing rows at all.

<table border=1> <tr> <td colspan=4> <img src="../graphics/1x1.gif" width=20 height=20> </td> </tr> <tr> <td rowspan=2> <img src="../graphics/1x1.gif" width=20 height=20> </td> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> <td rowspan=2> <img src="../graphics/1x1.gif" width=20 height=20> </td> </tr> <tr> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> <td> <img src="../graphics/1x1.gif" width=20 height=20> </td> </tr> <tr> <td colspan=4> <img src="../graphics/1x1.gif" width=20 height=20> </td> </tr> </table>

Now you're ready to flood the cells with their backgrounds, turn off the border with border=0, and push the cells together with cellspacing=0. The red calico print cells in the middle use background="../backgrounds/cloth027.jpg", the black cells use bgcolor="black", and the red outer strips use bgcolor="red". I didn't use a background color in the calico cells so they will be empty (white) if the browser can't find the graphics file to fill them in. Here's the code that produces the puzzle:

<CENTER>
<H3>Little Quilt</H3>
<TABLE BORDER=0 CELLSPACING=0>
<TR>
<TD COLSPAN=4 BGCOLOR="RED">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
</TR>
<TR>
<TD ROWSPAN=2 BGCOLOR="RED">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
<TD BACKGROUND="../backgrounds/cloth027.jpg">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
<TD BGCOLOR="BLACK">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
<TD ROWSPAN=2 BGCOLOR="RED">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
</TR>
<TR>
<TD BGCOLOR="BLACK">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
<TD BACKGROUND="../backgrounds/cloth027.jpg">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
</TR>
<TR>
<TD COLSPAN=4 BGCOLOR="RED">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
</TR>
</TABLE>
</CENTER>

The <CENTER> and </CENTER> tags just centered everything between them on the page. It looks neater than having the block on the left side of the page.

The <H3>Little Quilt</H3> line added the title line above the block. For puzzles that use a black background, you can use white letters by using <FONT COLOR="WHITE">Your-Puzzle-Title</FONT> with the title of that puzzle in the place of Your-Puzzle-Title.

The <TABLE BORDER=0 CELLSPACING=0> line marked the start of the table with the white border lines removed and the cells pushed together.

The code
<TR>
<TD COLSPAN=4 BGCOLOR="RED">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
</TR>
made the red strip four cells wide across the top of the block. I set the spacer graphic at 20 pixels by 20 pixels because this is a convenient size for the "regular" blocks in the center. I usually set them at 20 to 40 pixels so the quilt doesn't get too large, but you need to have them large enough to see the pattern of the graphic.

The code
<TR>
<TD ROWSPAN=2 BGCOLOR="RED">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
<TD BACKGROUND="../backgrounds/cloth027.jpg">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
<TD BGCOLOR="BLACK">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
<TD ROWSPAN=2 BGCOLOR="RED">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
</TR>
made a red side strip two rows tall on the left side, a calico block, a black block, and a second red side strip two rows tall on the right side.

The code
<TR>
<TD BGCOLOR="BLACK">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
<TD BACKGROUND="../backgrounds/cloth027.jpg">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
</TR>
made the black block and calico block on the next row. There was no need to specify anything about the side strips since we made them on the last row, so we just needed to fill in the two blocks remaining in this row.

The code
<TR>
<TD COLSPAN=4 BGCOLOR="RED">
<IMG SRC="../graphics/1x1.gif" width=20 height=20>
</TD>
</TR>
put another red strip four cells wide across the bottom.

The remaining lines ended the table and centering. Remember, your table goes between the <BODY> and </BODY> tags of puzzleform.html.

I could have simplified the puzzle by using red cells the same size as the calico and black cells in the center for the top, side, and bottom strips, but in a real quilt that would have been extra work to sew together and would have left extra ugly seams around the outside. That is why there is an expanded view for the quilt puzzles so that you can clearly see the cells that make it up. Part of the challenge is to use strips of color and pattern to make a quilt just like you were sewing it, and some blocks are more difficult than others to avoid making extra seams that would spoil the design.

Try studying the simpler puzzles first if you haven't done any HTML programming before. Look for hints on the expanded view page. It's okay if your puzzle isn't the same size as mine as long as the cells fit together properly to recreate the pattern shown on the page. Autumn Tints Quilt is a simple set of blocks with border strips like Little Quilt on a larger scale, as is Calico Quilt. Autumn Leaves Quilt is a little harder, with a large center block. Kitty Kitty is an amusing small table that uses an animated cat graphic for fun. Rainy Day Quilt uses another animated cat graphic.

The intermediate puzzles are Poppies Quilt, Four Crosses Quilt, Torocko Quilt, Hearts Afire Quilt, Leavenworth Quilt, and Woven Ribbons Quilt.

The challenging puzzles are Lucky Clover Quilt, Bargello (which is actually a stitch pattern, so it shows only one view), Plaid Quilt, Argyle Quilt, Log Cabin Pinwheel Quilt, Squares On Squares Quilt, and Eagle. Squares On Squares Quilt uses a graphic file which has a transparent background to show a background color underneath. Eagle is an example of what you can do with the judicious use of a background graphic.

Money Quilt and The Jewelbox are special challenge puzzles which require the use of align, hspace, and vspace. The Jewelbox uses nested tables (tables within tables) as well. Also, Money Quilt and The Jewelbox look quite different on MSIE compared to how the Netscape browser displays them, so you'll need a Netscape browser to do these ones properly. First, though, let's get started on the simpler puzzles to practice what you've already learned.