Adam's Advanced HTML Guide- Tables

Fortunately, HTML tables are a lot easier to create than their wooden counterpart. Tables are used extensively on many web sites to bring structure to a page. There are small tables and big tables- small ones are often used simply to encompass and organize a section of the page, such as a chart or spreadsheet-like data; large ones are used to bring organization to the entire document (as seen in the frontpage of Yahoo). A HTML table may look something like the below:

How to create a table

Begin by getting a saw and a huge piece of log...just kidding! To create a HTML table, we have to first look at the basic tags necessary to create one:

Every single table you construct will consist of the above three tags, no matter the complexity.

The below shows the syntax of the most basic form of table, with only one row and cell:

We began our journey with the <table> tag. Continuing on, we used the <tr> tag to define a row, and used one <td> tag inside to specify that this row should contain only one cell. All content, such as text (in the above example), or otherwise, go into the <td> tag, and only the <td> tag.

If you're a little confused at this stage, its ok. Practice makes perfect. lets create a table now with one row, but two cells inside of it:

To continue on with this table madness, lets now create a table with two rows, each with two cells in them (4 cells in total). Take note of how the <tr> and <td> tags are positioned:

Since we want two rows, there are two <tr> tags present. Since we want to cells in each of the rows, there are two <td> tags present in each <tr>. Simple as that!

Table Attributes

Tables, like many tags in HTML, accepts various attributes that control how a table is to look. Lets list some of the basic table attributes:

Here's an example that uses some of the above attributes:

Tables are really quite easy to construct, once you get the hang of it.

Back Home

Recommended resources