February 7, 2012 - Exercise 1 and Exercise 2 are due on February 21 - Final Projects due on May 22, 2012

Table Basics

Tables are one of the most valuable tools for constructing web pages. In addition to holding the traditional rows and columns of data, tables are great for layouts. As with lists, you may nest tables within tables. Tables have disadvantages as well; they don't always act the same on each browser. Simpler tables usually display more consistently. Several simple tables can often do the job of one complex table with less construction headaches.

Tables have been replaced by CSS (Cascading Style Sheet) positioning for page layout in the main. However, a combination layout using tables and CSS for formatting is a useful for the utmost of compatibility with older browers.

Table Tags

Tables are constructed just like everything on a web page; left to right and top to bottom. Tables are comprised of rows of data cells.

Table code always begins with an opening table tag (<table>) and ends with a closing table tag (</table>). The closing tag is very important; Netscape 4.x shows no part of a table without the closing tag.

Each table will have at least one row. The table row tags look like this: <tr> and </tr>. All table cells are between table row tags.

The cells of the table hold the visible content (data) of the table. Table cells may contain text, images, lists, paragraphs, forms, and other tables (and more...). The contents of a table cell are surrounded by the table cell tags: <td> and </td>. These are also referred to as table data tags.

Bellow is the code to make a one rowed, three celled table. The rows and cells are indented for clarity.

<table> <tr> <td>Contents of row 1, cell 1.</td> <td>Contents of row 1, cell 2.</td> <td>Contents of row 1, cell 3.</td> </tr> </table>

The table code is used below.

Contents of row 1, cell 1.

Contents of row 1, cell 2.

Contents of row 1, cell 3.

The structure of the table is hard to see in this case; it looks like three sentences. Add the border attribute to make the table visible. The code looks like this (and the results just below): <table border="3">

Contents of row 1, cell 1.

Contents of row 1, cell 2.

Contents of row 1, cell 3.

Tip: It can be very useful to make the table border visible when constructing your table; then turn it off when done troubleshooting.

In Summary

Tables build from the top down in rows of cells.

Table cells hold the content of the table.

Tables may be nested inside of the cells of other tables.

All tables must have an opening and a closing table tag (<table> </table>).

Each table must have at least one row (<tr> </tr>>).

Each table row must have at least one cell (<td> </td>).

The minimum set of tags to make a table (in proper order).

<table> <tr> <td>Content of the table is held in the cell(s).</td> </tr> </table>

Tables have many attributes; find out more here.