Create a Simple Table

Tables are not difficult to understand or build. They can become quite complex, but the basic concept is easy. If you just keep in mind the idea of a spreadsheet, most of the structure of a table will be demystified. Tables are merely structures in which information (or parts of a Web page) is presented in rows and columns. Each individual segment of a table is called a cell; for example, row one, column one represents one cell; row two, column one is another; and so on. Thinking in terms of rows and columns might be confusing, though. The best way to understand how tables work is to create one.

Open template.htm and save it as tables.htm; then copy this code to construct a simple 3 3 cell table:

<table>     <tr> <td>X</td> <td>X</td> <td>X</td> </tr>     <tr> <td>X</td> <td>X</td> <td>X</td> </tr>     <tr> <td>X</td> <td>X</td> <td>X</td> </tr> </table>

After you’ve typed in the code, save your page and open it in your browser. Your table should look like this illustration.

Now that you’ve created an uncomplicated table, take a look back through the HTML you’ve written to learn about each of the elements you used. You created that table with only three elements: <table>, <tr>, and <td>.

• <table> </table> The table element creates the table. Use this element for each table you wish to create on a page.

• <tr> </tr> The table row element establishes, as you would expect, a row. If your table is to have ten rows, you will use this element ten times.

• <td> </td> TD stands for table data. This element creates individual cells in a row (and, by default, the table’s columns). Whatever content you want to place in the table goes between the <td> tags.

As you look at the preceding code, you’ll see that <tr> is used to create three rows. The <td> element occurs three times in each row; so in that particular table, you end up with three rows and three columns. These are the only elements you need to create a table. As you will see, by adding attributes and some extra elements, you can do just about anything with this little table.

Tip

The letter X has been placed between each of the sets of <td> tags because browsers will not display empty table cells. When you are designing a table, always remember to put something in each cell, even if it is not your final content. The nonbreaking space entity (&nbsp;) is another good choice for temporary cell content.