Tables Tutorial

What are tables? Tables surround us and bind us. No wait, that’s the Force. But tables are similar because they surround our content, and bind the whole web page together.

Tables are a set of HTML tags that can be used to define the structure of a web page. They are the ultimate layout mechanism because they are more definite than any other method.

The tags are <TABLE> <TR> and <TD>

Like other HTML tags, each table tag has an opening and a closing. Open the table with <TABLE> and close it with </TABLE>. The closing tag is exactly the same as the open tag with a slash in it.

The table is not complete until you add rows and columns. A row is a horizontal area, the column is vertical. An easy way to remember the difference is to think about columns as they pertain to construction. Rows are like seats in a theater. Columns are always up-and-down. Rows go the other way, side-to-side.

Rows are specified with the <TR> tag. Columns are specified with the <TD> tag

So the minimal HTML definition of a table is:

And it looks likes this:

Tags that fit inside of other tags are said to be “nested”. We have indented nested tags by two spaces to make it easy to see. Inside the <TABLE> tag is a set of <TR> tags. Inside the set of <TR> tags is a set of <TD> tags. This HTML above defines a table with one row and one column.

The td is also called a cell. The next example shows a table with two rows and two columns. It is a table with four cells.

And it looks like this:

Looking in the HTML view, we can see some things are starting to repeat. For each row, we add a set of <TR>…</TR> tags. For each cell, we add a set of <TD>…</TD> tags Content goes in between <TD> tags as shown, and can be anything you want.

For each row of table cells, there must be the same number of cells. In the example above each row has two cells.