10 Tips to Help You
Learn HTML Tables

The most common way to structure a web page visually is with HTML tables. It's by using tables that a web author creates boxes to put things into -- like text and images. Here are some tips to help you get started using tables:

1. All HTML tables start with a <table> tag and end with a </table> tag.

   This is the most basic thing to know about tables. They are implemented through the HTML <table> tag.

2. The original application of tables was to create tables of data.

   This is the most obvious application for tables -- putting data into nice little boxes and putting labels on those boxes and calling the whole thing a table.

3. The most common application for tables is to provide layout structure for an HTML document.

   This is the less obvious application for tables. It is also the most common. For many years, tables provided the only reasonable mechanism for structuring layout.

   For this purpose, tables have now been superseded by something called Cascading Style Sheets. However, it takes a while for new ideas to take hold. Tables are still the dominant technique for structuring document content.

   Boxes for what? Boxes for navigation bars, boxes for text, boxes where you can place images. In short, boxes for everything.

4. Typically, a <table> tag is is immediately followed by a <tr> tag.

   The <table> tag means table row. You really can't have a table without having table rows.

   When you place a tag inside another tag, this is called nesting. The <tr> tag. is always nested inside the <table> tag.

5. Typically, a <tr> tag is followed by a <td> tag.

   Now we have 2 levels of nesting. The <tr> tag is nested inside the <table> tag and the <td> tag is nested inside the<tr> tag.

   The <tr> tag gives you invisable lines that go across the page. The <td> tag gives you invisable lines that go down the page.

   With the<tr> tag giving you horizontal lines and the <td> tag giving you vertical lines, you have a grid.

   A table is basically a grid that you put things into.

6. In HTML table terminology, one box of a grid is called a cell.

   Cells are the basic building blocks of tables.

7. Each time you use a <td> tag, you are creating a cell.

   Cells are <td> tags and <td> tags are cells.

8. Two cells can be lumped together horizontally using the colspan attribute of the <td>tag.

   When you place the <td> tag and the colspan="2" together, you get a tag that reads as <td colspan="2"> in your HTML code.

   The colspan="2" attribute causes one cell to span the width of two cells. How does this change that look of your table? It causes one cell to become long enough horizontally to span the width of 2 cells.

9. You may suggest the width of a table to the browser

   This is what the width attribute of the <table> tag is for.

10. For new web content, tables are mildly disapproved of by the the World Wide Web Consortium as a technique for document layout.

    As stated before, the new way of doing things is Cascading Style Sheets. However, no one is suggesting that you need to make this transition right away. Most web pages still make use of tables.