Home \ HTML Tutorials \ Understanding the HTML Tags that Create a Table

Understanding the HTML Tags that Create a Table

The HTML tables you use to display content on a Web page, like the tables you see in printed materials (books, magazines, newspapers, and so on), consist of columns of data arranged in rows. Not surprisingly then, the basic HTML tags used to create a table tell the Web browser which part of an HTML file to include in the table and group individual data items in that part of the file into rows of cells:

• <table></table> Alert the Web browser that it is to treat the text between the start and end tags as a table

• <tr></tr> (table row) Alert the Web browser that it is to put the data items and perhaps headings between the start and end tags on a single, new row in the table

• <td></td> (table data) Alert the Web browser that the HTML tags, attributes, and text (if any) between the start and end tags is content (in other words, the data) that the Web browser is to display in a table column

For example, you would write the following HTML code to have a Web browser display a simple three-column, two-row table:

</table>

As mentioned in the bulleted list that precedes the table’s HTML, the start and end table tags (<table></table>) at the beginning and end of the code tell the Web browser that the HTML code and other text between the tags describes a table. Each pair of the start and end table row tags (<tr></tr>) tell the Web browser to display the content between them on the same, new (horizontal) row in the table. Meanwhile, each pair of start and end table data tags (<td></td>) defines each of the table’s cells, and the content between them tells the Web browser what to place in the cell.

Thus, to create the two-column, three-row table shown next, you would use three sets of start and end table row tags (<tr></tr>) and two sets of start and end table data tags (<td></td>) per row (six sets in total):

</table>

As was the case in the previous example, the first line of code in the current example contains a <table> tag, which tells the Web browser all subsequent HTML code the browser reads until it has processed the </table> tag is part of an HTML table definition. The second line of code reads like this:

Each time the Web browser reads a <tr> tag within a table definition, the browser knows to move to a new row in the table. The <td> tag that follows the <tr> tag, meanwhile, tells the browser to put everything it sees prior to the </td> tag into a single cell within the table. Therefore, in the current example, the first <td> tag tells the Web browser to place an “A” into the first cell on the left in the new table row the browser starts after processing the <tr> tag that precedes the <td> tag.

The third line of code in the table HTML for the current example reads like this:

Because there is no <tr> tag in front of the second <td> tag in the code, the Web browser puts everything between the second pair of start and end table data tags (<td></td>) (“B”, in the current example), into the second cell (to the right) in the first row of the table. (If there were a third pair of start and end table data tags [<td></td>] prior to the </tr> tag, the Web browser would place everything between those tags into the third cell [to the right] in the first row of the table, and so on.) The </tr> tag tells the Web browser: “That’s it. There are no more cells in the current row,” at which point the browser expects to see either a new <tr> tag, or a </table> tag. In the current example, the <tr><td></td><td></td></tr> pattern repeats twice more (thus telling the browser to create two more rows of two cells [or columns] each), before the </table> tag signals the end of the HTML table’s definition in the last row of code.