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> ...
Get HTML5 24-Hour Trainer now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.