Using Tables

Tables can be used to display scientific data or to make comparisons between two sets of information.

Table

All tables must first begin with a table element, to set the structure. A typical table will start with something like this:

<html> <head> <title>HTML for Beginners - Basic HTML</title> </head> <body> <table> </table> </body> </html>

Table Row

Just like tables in spreadsheets and databases, HTML tables consist of rows and cells. The cells will come in a second, but you have to specify where new rows begin:

<html> <head> <title>HTML for Beginners - Basic HTML</title> </head> <body> <table> <tr></tr> </table> </body> </html>

Table Data

The data elements contain the actual cell contents:

<html> <head> <title>HTML for Beginners - Basic HTML</title> </head> <body> <table> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html>

And this will produce

Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2

«...Lists Comments, Rules, and Breaks...»

Advanced Tips

This table has two rows and two columns (2x2), but each <td> element you create inserts more columns. When you insert more <tr> elements a new row is created with the same number of columns as the row above it.

You can even nest tables within each other, though this can cause headaches when trying to edit the code. Before CSS, table-based layouts were used throughout the web to create scalable designs that could be reasonably similar across viewing platforms.

Because table layouts mix presentation with markup and can easily become a mess to maintain, they have mostly fallen out of use in today's web. If you're thinking about using a table to layout your site, we strongly recommend against it. Instead you should invest a little time in CSS. At this point you should know enough HTML that CSS can be quickly picked up.