Tables are the most useful tool you will have in HTML to control where items are placed on a page. At first glance, the HTML code of a table is intimidating. Once you have time to create a few tables, you will understand what each part of the code does.

A table is a series of rows and columns. There are three main tags used in a table.

The original HTML specification called for all tables to automatically have a border as the table above. Since then, that rule has gone away. To get the border to show up in a modern browser, the border tag must be used. The border tag is added to the table tag as follows:

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

where the number equals the thickness of the border. A border set to zero will not appear on the page.

There are some simple rules about how table tags work.

1. The table row tags <tr></tr> can only be placed inside the main table tags <table></table>.
2. The table data tags <td></td> can only be placed inside the table row tags <tr></tr>.
3. The "message" placed in the table can only be placed between the table data tags <td></td>.
4. Within the same table, each row must have the same number of table data tags (columns).

Code for a 2x2 table will look like this (I have indented only to make it easier to read)

<table>
      <tr>
            <td>Row 1 Column 1</td>
            <td>Row 1 Column 2</td>
      </tr>
      <tr>
            <td>Row 2 Column 1</td>
            <td>Row 2 Column 2</td>
      </tr>
</table>

It will take you a little time to adjust to placing the second column under the first column, but you will get used to it. You can place them side by side, as they are displayed in the browser, but you will find that the long row of HTML is harder to read in your editor.

Just remember this--Nothing goes in between <table> and <td> except <tr>... No text... No Tags. All the data that you want displayed in the table must be between the table data tags <td>Data Goes Here</td>.

Just like other tags, tables can be nested inside of each other. In fact, this is a very useful formatting technique.

Academics

Sports

Band

Administrative

I have placed borders around all the above tables. This is only to make the tables easier to see. Most of the tables you will use for formatting will have the border set to zero. Below is the same table as above, with the borders removed, and some background colors added.

Academics

Sports

Band

Administrative