Adding a Table to your Website

A great way to organize your content on your website is to use tables. If you have ever used a word processing program like MS Word or Open Office, tables offer the same style. Before completing this section make sure you have completed the course on Web Design Basics.

To add a table to your website, the basic HTML code will look like this:

<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

which would display on your webspage like this:

Creating a table with HTML?

So let’s get a better understanding of the code, first we have the tags to start and close the table:

<table>
</table>

Now we will add the first row.  A row is shown with a <tr> tag:

<table>
<tr>

Next, the cells will be added.  A cell is shown with a <td> tag:

<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>

Finally we will close that row, and then start the next row:

<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>

You can repeat this to have as many rows and columns as you need.

Adding a border to your HTML table

In the example above we created a table with no borders, but you can create a table with borders as well.  Using the above example:

<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

All that needs to be added is in the first tag, the border attribute can be specified as border=”1″:

<table border =”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Which would display:

There are other attributes you can add to a table as well such as cellspacing and cellpadding to increase the space between the cells and around the table, however this is meant to be an introduction to tables.