Tables are used in HTML pages to present information in a well-organized manner. The logical organization of a table is in columns and rows, along with headers of one sort or another. Take a look at the example below & it's corresponding HTML code:

This is the table header
This is the first element This is the first element's definition
This is the second element This is the second element's definition

<center>
<table bgcolor="#F0F0F0" border=2>
<TH colspan = 2>This is the table header</TH>
<TR>
  <TD>This is the first element</TD>
  <TD>This is the first element's definition</TD>
</TR>
<TR>
  <TD>This is the second element</TD>
  <TD>This is the second element's definition</TD>
</TR>
</table>
</center>

    In the HTML code above, the bgcolor="#F0F0F0" of the "table" tag sets the background color of the table to a light gray. border=2 sets the border thickness of the table to a relative size of 2. In the TH tag, colspan=2 ensures that the table header itself will span the 2 columns of the table. Let's take a closer look at the tags that make up the cells of the table...

The <TH>, <TR>, & <TD> Tags

  • The <TH> tag encapsulates the title of the table. One important thing to remember about this tag is that the default column width is 1. So, if you have a table w/ 2 columns, and you don't specify a "colspan" of 2, you end up with an odd-looking header...something like this:

    Note: Omitting the colspan attribute from the TH tag.

    This is the header
    First element Second element

  • The <TR> tag denotes a table row. That means that everything encapsulated between the TR tags will be on a single row. The total number of TR entries equals the number of rows in the table(excluding the header).
  • The <TD> tag encapsulates a single cell of table data. It should also be noted that the number of TD entries you have in each TR equals the number of columns for that row.

        So...if you wanted to have a table w/ a header, 3 rows, and 5 columns per row. You would need 5 TD entries per TR and 3 TR entries in the TH. Simple, huh?

    Table Attributes

        Each of the table elements (TR, TH, TD, etc.) have their own attributes. For example, you could set the background color of each cell in the table to a different color. This would be accomplished by setting the bgcolor attribute of the TD tag for each cell. There are a lot of attributes for each tag associated with table, so please see the Tag Index for more info.

    Click here to return to the previous page.