Tables Course

 

What Are Tables ?

Tables are a form of HTML that are very handy for the following purposes.

  • Lining Up Items Vertically & Horizontally
  • Making Creative Layouts
  • Placing Text Next To Graphics

The Basic Table Tags

These tags and attributes are used to create tables.

HTML Tag Or Attribute
Effect

<TABLE> and </TABLE>
Indicates table format

BORDER=number
Controls table border width in pixels.
0 specifies no border

<TD> and </TD>
Indicates table data cell

<TH> and </TH>
Indicates table heading text is bold and
centered by default

<TR> and </TR>
Indicates table row

The Basic Table Tags

In the following lesson we will create a table using all the basic tags and attributes shown above. This first lesson will be a table with one table heading two table rows and four table data cells. We will use text as the cell contents but images can be used as well. We will get to images later in the lessons.

Here is the table we will be building.

Team City
Red Sox Boston
Yankees New York

The table contains the following infomation.

Team
City

Red Sox
Boston

Type your text, row by row, using a space or two between row elements. These spaces will be used to input our table tags.

Team City
Red Sox Boston
Yankees New York

Insert <TABLE> tags before and after the text.

<TABLE>
Team   City
Red Sox   Boston
Yankees   New York
</TABLE>

Add pairs of <TR> tags to show where the table rows go. (Remember: rows go across the page.)

<TABLE>
<TR>Team   City</TR>
<TR> Red Sox   Boston </TR>
<TR> Yankees   New York </TR>
</TABLE>

Add pairs of <TH> tags to show where the table heading cells go.

<TABLE>
<TR>
<TH>Team</TH>
<TH>City</TH>
</TR>
<TR>Red Sox   Boston</TR>
<TR>Yankees   New York</TR>
</TABLE>

Add pairs of <TD> tags to indicate the individual table cells.

<TABLE>
<TR>
<TH>Team</TH>
<TH>City</TH>
</TR>
<TR>
<TD>Red Sox</TD>
<TD>Boston</TD>
</TR>
<TR>
<TD>Yankees</TD>
<TD>New York</TD>
</TR>
</TABLE>

Add theborder attribute to the table tag to create lines around each table cell. Note to make an invisible border around your table use BORDER=0

<TABLE BORDER=1>
<TR>
<TH>Team</TH>
<TH>City</TH>
</TR>
<TR>
<TD>Red Sox</TD>
<TD>Boston</TD>
</TR>
<TR>
<TD>Yankees</TD>
<TD>New York</TD>
</TR>
</TABLE>

There you have it, we have created our first table shown here again. There is more to learn, so when your ready click onto page 2.

Team City
Red Sox Boston
Yankees New York