I guess I like table. Just a little bit.

I've never seen a working implementation of thead. So I just skip it.

Actually, girls like tables a lot for making lists. The basic table looks like this:

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

That's the beginning of it "table", a row in it "tr", and the end of it "/table". Nothing is in it. Now the girls like to say what they want, and it makes a pretty easy two-column table.

<tr><th>Eye shadow</th><td>Rose-a-crucians, $15.95</td></tr>
<tr><th>Toenail polish</th><td>Bonny-toe Bonito, $1.34</td></tr>

Naturally, you've got to have the "table" around it, but I assume you've already done it, and it really is a pain, so thanks for letting me not type it again.

My makeup--I am so pretty

The "th" stands for a "table header" which basically means the bold text like "Eye shadow," and the "td" stands for "table data" which means nothing at all but positioning the kind of "Eye shadow" with the words "Eye shadow" (actually, the computer thinks only about the th with the td, which goes in the tr "table row," but that means even less than I can say about it).

For the title I just did

<h3>My makeup--I am so pretty</h3>

You can see the table "cells" (they call them that) better when you make a table border.

<table border="1">
</table>

Or like this

<tr><th>and...</th><td>you</td><td>can</td><td>go on adding them
all you like!</td></tr>

Remember that you can have each row start on the left, but not on the right. Cool girls are always wanting to create a little cell up in the right corner where all that blank space is, except it doesn't work at first because

• that corner is the fourth column (and... is the first; you is the second; can is the third; and so "go on adding them all you like!" must be the fourth), and there are just two columns in the the first row "th" and "td"
• even if we put a fourth column in, it would be large and big, exactly as wide as the fourth column in the bottom row, not just a small box

The solution is that we can make the any cell pretend like two cells, or even three.

<td colspan="2">3rd and 4th column</td>

But see, that is still wide like I said, not a small box in the corner. I will have to try to make the bottom row have an extra column, which will leave a small empty spot on the top row.

<td colspan="2">go on adding them all you like!</td>

which supposedly leaves an empty space to fill

<td>5th</td>

However, as soon as we have filled it, we are introduced to "reflow," the enemy of all artistic web designers. The browser moves it around brute-force. It wasn't specifically told that the 5th column is supposed to be "little and small" for a cute girl, so most browsers decide the fourth column should be small, which leaves us with a large fifth, and since the small box is the 5th, it isn't really small anymore.

The only way we can fill it without making it be an extra column all by itself in the top row is with a style command.

<td style="width: 20px">5th</td>

which still messes everything up, because the browser still tries to decide for itself how wide the third column should be. This leaves an extra stand-alone cell the only option.

But that looks corny unless you match it up with something on the bottom.

Then there is the genius, smart, and wonderful way of doing it.

We delete all the stupid rows to get back our original white remainder that seemed to beg a little thing up in the corner. Then we put in

<td rowspan="2" colspan="2" style="border: none"></td>

Then we create a mini-table inside of it, and position it at the upper-right.