Lesson 6: Tables and Chairs

Finally! You're done with the Novice Tutorials! About time. In this tutorial, I assume you know all about the previous things talked about in the last five lessons. If you don't, just go there and learn it, it's really easy :-). You will learn how to create a table in this lesson.

Tables are really useful in web design and in HTML. You can use tables to create a layout for the site (Just like how I did for this site.) or you can use tables to do infinite things with putting stuff in rows and columns.

The Table Tag.

Now we get to the real important tag: the <TABLE> tag.

<TABLE width="5" bgcolor="white" height="300"></TABLE>

This tag has many many attributes that you can use with HTML. We will cover a few of the more relevant ones.

width - Tells how wide the table is.

bgcolor and background - You use these to specify either the Background Color or Background File in a table kind of like with the BODY tag.

align - Use left, center, or right to align the table horizontally.

border - Use 0 to specify no border or any other number to specify the width in pixels of the border.

bordercolorlight - A color that determines the lighter color of the border.

bordercolordark - A color that determines the dark color of the border.

cellpadding - Tells the amount of padding in pixels that the cells have between them.

cellspacing - Does the amount of space in pixels that the cells have between them.

In a minute, I will show you a picture of the type of spacings around cells and tables, so you can see how tables are put together in HTML. But for now, we will look at some of the table cell tags. Just let me get some water first and we'll begin.

Table Rows.

<TR></TR> This tag defines a table row.

You can use many arributes with this tags, including bgcolor, background, align and valign.

valign - Specifies if the text is align at the top, middle, or bottom of a table row.

Table Cells.

<TD></TD> This tag defines a table cell.

You can use all the same attributes that are listed for <TR> above, and you can use two more.

rowspan - Tells how many rows the cell may cross.

colspan - Tells how many columns the cell may cross.

Now we will put all this together and I will show you an example of a table.

This model of a table shows most of the areas on a table (That I could fit). Since learning basic table skills is such a necessity in HTML programming, I will guide you through the process of creating one.

Activity: See if you can make a table. Make a table like the one above, but make it two rows and three cells on each row.

This concludes this lesson. The next lesson will cover more advanced topics in table design, like layout and advanced table tags.