Long Rows and Columns

You can make some cells larger than others to cover more than one row with ROWSPAN=height-in-rows. A long cell that stretches three rows down should have ROWSPAN=3 in its <TD> tag. You also must have three rows for the cell to stretch down that far; otherwise, it will stop at the last row if there are fewer rows in the design.

The first row of the table will contain the long left column cell and the cell with the first topic of the right column. The second row will contain only the cell with the second topic of the right column, since the left cell will stretch down to fill the space in the left side. The third row will contain only the cell with the third topic of the right column, since the left cell will stretch down to fill the space in the left side there, too.

Let's replace those <p><hr><p> tags separating the right column topics by </td></tr><tr><td> tags to make three cells in three rows and add ROWSPAN=3 to the <td> tag for the left column. I'll add bgcolor="#CCFFCC" to the <td> tag for the Crafting Tip topic to give it a light green background, bgcolor="#FFCCCC" to the Quote of the Feast topic <td> tag to give it a light pink background, and bgcolor="#CCCCFF" to the Most Original Christmas Present topic <td> tag to give it a light blue background. I'll also need to remember to add <font> and </font> tags to surround the text in each cell.

Louella's Tattle and Tips

Ruthann gets arrested!

Ruthann got into big trouble this year! She was building up her usual head of Christmas cheer right on schedule for the feast, when her cheap husband Sam decided to save a few pennies by buying presents from unorthodox sources.

Ruthann started making her fancy fruitcakes for Christmas presents and soaking them in extra rum as usual. The smell soon brought their cat Fluffy to investigate. What happened next isn't clear. Sam claims that the cat knocked a cake off the counter next to the floor heater. Ruthann suspects it was Sam getting an early start on his cake.

Whoever was responsible for it, the flaming fruitcake set off the kitchen fire alarm and brought the neighbors and the volunteer fire department on the run. The police naturally showed up to investigate the commotion. When a neighbor opened the broom closet to help clean up the mess, a police officer saw (continued on page 2)

Crafting Tip

Got a lot of green tomatoes snatched off the vine before frost hit? Cover them with a festive assortment of left-over house paint and heap them high in a pretty bowl like Christmas ornaments. Eat your heart out, Martha!

Quote of the Feast

The biggest turkeys do their gobbling on Christmas.

Said by Grandma Willa to Uncle Roy after he spilled giblet gravy on her best crocheted tablecloth. He's rightly ashamed of himself.

Most Original Christmas Present

Little Will's giant windchimes, made from recycled CD's which proved to have some naughty pictures on them. His mother is discreetly investigating the source of his creativity.

Similarly, you can make a wide cell that covers more than one cell space in the row with COLSPAN=width-in-cells. A cell that is four "regular" cells wide should have COLSPAN=4 in its <TD> tag. You need to be sure that the WIDTH and spacer graphic are set wide enough for this cell if there aren't four cells above or below it for the browser to use as a reference to set the size of this "oversized" cell as you work on your table. Tip: If you use "oversized" cells in your puzzle and display your puzzle before you have filled in all the small cells to use that space in another row or column, the browser may stretch the cells to fill the space. Just complete the puzzle with the rest of the cells to stop this.

The line "Louella's Tattle and Tips" is the title of the whole newsletter, not just the left column. It would look better centered over both columns in a wide cell across the top. Let's make a new row with a cell for the title and move it there. We can center it with <center> </center> tags. The code looks like this:

<tr>
<td colspan=2>
<font face="Arial" size=3>
<center>Louella's Tattle and Tips</center>
</font>
</td>
</tr>

Louella's Tattle and Tips
Ruthann gets arrested!

Ruthann got into big trouble this year! She was building up her usual head of Christmas cheer right on schedule for the feast, when her cheap husband Sam decided to save a few pennies by buying presents from unorthodox sources.

Ruthann started making her fancy fruitcakes for Christmas presents and soaking them in extra rum as usual. The smell soon brought their cat Fluffy to investigate. What happened next isn't clear. Sam claims that the cat knocked a cake off the counter next to the floor heater. Ruthann suspects it was Sam getting an early start on his cake.

Whoever was responsible for it, the flaming fruitcake set off the kitchen fire alarm and brought the neighbors and the volunteer fire department on the run. The police naturally showed up to investigate the commotion. When a neighbor opened the broom closet to help clean up the mess, a police officer saw (continued on page 2)

Crafting Tip

Got a lot of green tomatoes snatched off the vine before frost hit? Cover them with a festive assortment of left-over house paint and heap them high in a pretty bowl like Christmas ornaments. Eat your heart out, Martha!

Quote of the Feast

The biggest turkeys do their gobbling on Christmas.

Said by Grandma Willa to Uncle Roy after he spilled giblet gravy on her best crocheted tablecloth. He's rightly ashamed of himself.

Most Original Christmas Present

Little Will's giant windchimes, made from recycled CD's which proved to have some naughty pictures on them. His mother is discreetly investigating the source of his creativity.

Finally, titles are usually bigger than the text that follows and often in bold (extra dark) type. You can use a <th> tag instead of the <td> to automatically use bold type. If you want to change the size as well as using bold type, you can use <h1> </h1> through <h5> </h5> tags to surround your title. These header tags go from the largest font size in <h1> to the smallest in <h5>. An <h1> tag to an <h3> tag is good for the main title for the page with subheadings a size or two smaller. Let's use <h3> for the newsletter title and <h5> for the subheadings and center the subheadings as well.

Louella's Tattle and Tips

Ruthann gets arrested!

Ruthann got into big trouble this year! She was building up her usual head of Christmas cheer right on schedule for the feast, when her cheap husband Sam decided to save a few pennies by buying presents from unorthodox sources.

Ruthann started making her fancy fruitcakes for Christmas presents and soaking them in extra rum as usual. The smell soon brought their cat Fluffy to investigate. What happened next isn't clear. Sam claims that the cat knocked a cake off the counter next to the floor heater. Ruthann suspects it was Sam getting an early start on his cake.

Whoever was responsible for it, the flaming fruitcake set off the kitchen fire alarm and brought the neighbors and the volunteer fire department on the run. The police naturally showed up to investigate the commotion. When a neighbor opened the broom closet to help clean up the mess, a police officer saw (continued on page 2)

Crafting Tip

Got a lot of green tomatoes snatched off the vine before frost hit? Cover them with a festive assortment of left-over house paint and heap them high in a pretty bowl like Christmas ornaments. Eat your heart out, Martha!

Quote of the Feast

The biggest turkeys do their gobbling on Christmas.

Said by Grandma Willa to Uncle Roy after he spilled giblet gravy on her best crocheted tablecloth. He's rightly ashamed of himself.

Most Original Christmas Present

Little Will's giant windchimes, made from recycled CD's which proved to have some naughty pictures on them. His mother is discreetly investigating the source of his creativity.

Here's the code for our newsletter so far. Study the changes I've described above.

<table width=100% border=1 cellpadding=10>
<tr>
<td colspan=2>
<font face="Arial" size=3>
<center><h3>Louella's Tattle and Tips</h3></center>
</font>
</td>
</tr>
<tr>
<td rowspan=3>
<font face="Arial" size=3>
<center><h5>Ruthann gets arrested!</h5></center>
<p>
Ruthann got into big trouble this year! She was building up her usual head of Christmas cheer right on schedule for the feast, when her cheap husband Sam decided to save a few pennies by buying presents from unorthodox sources.
<p>
Ruthann started making her fancy fruitcakes for Christmas presents and soaking them in extra rum as usual. The smell soon brought their cat Fluffy to investigate. What happened next isn't clear. Sam claims that the cat knocked a cake off the counter next to the floor heater. Ruthann suspects it was Sam getting an early start on his cake.
<p>
Whoever was responsible for it, the flaming fruitcake set off the kitchen fire alarm and brought the neighbors and the volunteer fire department on the run. The police naturally showed up to investigate the commotion. When a neighbor opened the broom closet to help clean up the mess, a police officer saw (continued on page 2)
<p></font>
</td>
<td bgcolor="#CCFFCC">
<font face="Arial" size=3>
<center><h5>Crafting Tip</h5></center>
<p>
Got a lot of green tomatoes snatched off the vine before frost hit? Cover them with a festive assortment of left-over house paint and heap them high in a pretty bowl like Christmas ornaments. Eat your heart out, Martha!</font>
</td>
</tr>
<tr>
<td bgcolor="#FFCCCC">
<font face="Arial" size=3>
<center><h5>Quote of the Feast</h5></center>
<p>
The biggest turkeys do their gobbling on Christmas.
<p>
Said by Grandma Willa to Uncle Roy after he spilled giblet gravy on her best crocheted tablecloth. He's rightly ashamed of himself.</font>
</td>
</tr>
<tr>
<td bgcolor="#CCCCFF">
<font face="Arial" size=3>
<center><h5>Most Original Christmas Present</h5></center>
<p>
Little Will's giant windchimes, made from recycled CD's which proved to have some naughty pictures on them. His mother is discreetly investigating the source of his creativity.</font>
</td>
</tr>
</table>

Let's add a few pictures to finish up the newsletter in our next chapter, Adding Images.

HTML Puzzles

Last update: August 12, 2001

Hosted by www.Geocities.ws

1