HTML5 24-Hour Trainer

Chapter 16. Building a Simple Table

Modern web standards maintain that HTML tables should only be used to contain tabular data. And what's tabular data? Why content that goes in tables, of course! Don't you love circular definitions?

Tables on the Web allow information to be displayed in a grid. The rows and columns of the table can be labeled and styled to help make the content easy to understand at a glance. As you might expect with a highly structured page element like a table, numerous tags are involved, which must be precisely placed to create the proper code configuration. In this lesson, you learn how HTML tables are constructed and how to work the various table elements — rows, columns, and cells — to create a basic table.

UNDERSTANDING HTML TABLES

To create the most basic HTML table, you need three different tags:

• <table>: The <table> tag is the outermost element that contains the other two tags and all content.

• <tr>: The <tr> tag defines the table row and holds the final element.

• <td>: The <td> tag stands for table data; the complete <td> tag is also known as a table cell. Any content that is displayed in the table is placed between the opening and closing <td> tag pair.

You'll notice that there is no tag related directly to the columns. With a basic HTML table, the number of <td> tags in a table row determines the number of columns. For example, the following table has three columns and two rows:

<table> <tr> <td>First name</td> <td>Last name</td> <td>Extension</td> </tr> <tr> ...