This page contains lessons on how to use tables effectively. Tables are meant for tabular data, that is, things like a schedule, a roster, and anything else that could conceivably fit in a spreadsheet type of layout. They have been used as a layout tool for design, but this is not what they were intended for, and should not be used for layout. <div> elements are meant for layout, and are discussed more in-depth in the Divs section.

Let's start at the beginning. Here are the basic tags for tables.

• <table> : The main tag which tells the browser that this is a table and defines the table's attributes.
• <tr> : Stands for Table Row. Indicates the beginning of new row, which is composed of cells.
• <td> : Stands for Table Data. Defines a cell in a table row.

When you think of tables, think of a spreadsheet layout, because it is just about the same. Let's see how to put these tags together to start creating a table.

From now on, I will drop everything except the table - you still need to keep the rest in order for your page to work. You are now ready to add data to your table.

At this point, it doesn't look much like a table. You can change the attributes of a table by adding parameters to the main table tag. The border parameter will add a border of a specified width.

Now we come to the meat and potatoes of table building - manipulating more than one piece of data. Tables are organized by row, so you want to build them row by row. We can now add more cells to the row.

When you start to add lots of data, your HTML will get pretty "busy", so remember that for every td or tr you should have a corresponding </td> or </tr>. If you are having trouble with your table, count the openings and closings to make sure you didn't leave one out.

As you can see, we add cells to a row by placing the <td> tags and data in-between the <tr> tags. We can add more rows by simply placing more <tr> tags in the proper location.

Notice that the second row has one less cell of real information than the first row. It may be tempting to leave out the cell completely rather than putting in a cell with a non-breaking space ( ), but that is sloppy coding. As a general rule, you should account for all your table cells, even if you then have cells with only non-breaking spaces, otherwise you may have problems between different browsers.

Say, for instance, that you wanted to use the extra cell, you can cause data to span two cells either across rows or across columns using colspan (column span) or rowspan (row span). Since Dan is in charge, we'll give him a bigger cell.

This parameter is inserted at the first cell that will be spanned and the number indicates how many cells will be spanned.

Sometimes Seb thinks that he is in charge so we'll put him in the spotlight.

This parameter is inserted at the first cell that will be spanned and the number indicates how many cells will be spanned.

Tables are a great tool for displaying tabular information, and it is easy to modify many attributes of a table cell. There are even other attributes such as <colgroup>. <th>, <tbody>, and <tfoot> that you could also use when you become more comfortable with using tables. These extended attributes are useful for modern browsers, as the older browsers where very likely not understand them, and will ignore them.

Tables are not meant for layout design! Use <div> tags for containing information and CSS to arrange them, as well as style the elements for an effective, clean, concise, flexible layout instead.