HTML Is EASY - Lesson 2: Lists and Tables

GeoCities.us » EnchantedForest » Fort

LESSON 2
Lists and Tables

Did you do Lesson 1? Good. Open your test.html in Notepad. Put the new stuff between the BODY tags, like before. Then save and reload.

1. A List With Dots

UL makes a list with dots. UL means Unordered List. That means it isn't in order, so it gets dots and not numbers. Each thing in the list gets an LI. LI means List Item.

TYPE THIS:

My favorite Pokemon:
<UL>
<LI>Pikachu
<LI>Squirtle
<LI>Snorlax
</UL>

YOU GET THIS:
My favorite Pokemon:

Pikachu
Squirtle
Snorlax

My dad says you don't have to put </LI> at the end of each one. So I don't. But you DO have to put </UL> at the end of the whole list, or everything after it gets pushed over.

2. A List With Numbers

OL means Ordered List. That means numbers. The best part is the computer counts for you! If you put a new thing in the middle, all the numbers fix themselves.

TYPE THIS:

How to make a sandwich:
<OL>
<LI>Get two pieces of bread
<LI>Peanut butter on one
<LI>Jelly on the other
<LI>Smush them together
</OL>

YOU GET THIS:
How to make a sandwich:

Get two pieces of bread
Peanut butter on one
Jelly on the other
Smush them together

3. My First Table

A table is boxes in rows, like a tic-tac-toe board. It has three kinds of tags:

TABLE starts and stops the whole thing.
TR is a row. It goes across. TR means Table Row.
TD is one box. TD means Table Data. I think it should mean Table Doohickey.

Here's a tic-tac-toe game. X wins!

TYPE THIS:

<TABLE BORDER="1">
<TR>
<TD>X</TD><TD>O</TD><TD>O</TD>
</TR>
<TR>
<TD>O</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD>X</TD><TD>O</TD><TD>X</TD>
</TR>
</TABLE>

YOU GET THIS:

X	O	O
O	X	X
X	O	X

Every TR needs a </TR> and every TD needs a </TD>. Count them. I count them with my finger on the screen. (My mom says not to touch the screen.)

4. FAT Borders and Puffy Boxes

BORDER is how thick the lines are. BORDER="0" is no lines. BORDER="1" is skinny. BORDER="5" is FAT. CELLPADDING puts room inside each box so it's puffy. Here's my sister and me. First names only! (See the rules on Lesson 1.)

TYPE THIS:

<TABLE BORDER="5"
CELLPADDING="10">
<TR>
<TD>Martin</TD><TD>9</TD>
<TD>lime</TD>
</TR>
<TR>
<TD>Ashley</TD><TD>6</TD>
<TD>pink</TD>
</TR>
</TABLE>

YOU GET THIS:

Martin	9	lime
Ashley	6	pink

Pink is not one of the 16 colors either. Ashley was sad too.

My Best Mistake This Time

I forgot the </TABLE> at the end. On my mom's computer (Internet Explorer) my page looked fine. On my dad's computer (Netscape) the table was GONE, and everything after it too. My dad says Netscape waits until the table is finished before it shows it, and mine was never finished.

So ALWAYS close your table. And look at your page in both kinds if you can.

Homework

Make a table of everybody in your family and their favorite color. First names only! Make the border FAT. If you have a dog, the dog counts.

COMING SOON: Lesson 3! It's going to be MARQUEE, which makes words go across the screen. But my dad says it only works in Internet Explorer and not in Netscape, so I have to explain that part first.

My dad checked this lesson too.
Back to Lesson 1 | E-mail me: [email protected]
Last updated Saturday, September 11, 1999