Take away a web designer's table tags, and you'll find efficiency is reduced considerably. Designers use tables to arrange text, graphics, forms, and other things on a web page.

In addition, tables could be used for simple designs that could easily take the place of an image. Images on a web page slow down loading, but with table tricks, your pages will load quickly, and still look good.

How about the background on this page; did I use an image? No. I used tables to design the background.

This tutorial will cover topics from simple to advanced use of tables. If you're established in the use of tables, you may want to skip the intro part, and jump to the more advanced tutorial. You should gain something from this tutorial, even if you're an expert. This is because there are table uses I discovered on my own, and I don't see such uses on the web yet. So come along...



<table>...</table>


Every table has an opening, and a closing tag. The closing tag has a forward slash, and the same is true for most HTML tags. Everything else goes between the opening and closing tags.

<tr>...</tr>


This goes immediately after <table> and defines Table Row. So it will look something like this:
<table><tr>...</tr></table>
Don't forget that this also comes in pairs, so that if you begin with <tr> you have to end it with </tr>. If you don't, your table may not show up! This point is very important, because later you will begin to write very large and sophisticated tables, so that when something goes wrong and your table does not show up, it'll be very difficult to find the problem.

<td>...</td>


This goes immediately after <tr> and defines Table Column. So it will look something like this:
<table><tr><td>...</td></tr></table>

Now we have enough information to build a simple table.

Question: How do we build a table with ONE row and TWO columns as shown below?
Column 1Column 2
  • We take the <table>...</table>
  • add one row in between, <table><tr>...</tr></table>
  • add one column in between, <table><tr><td>Column 1</td></tr></table>
  • then add the second column in between, <table><tr><td>Column 1</td><td>Column 2</td></tr></table>


The finished product will be
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>


Hands on Practice Go ahead and write the codes for a table with ONE row and FOUR columns as shown below:
Column 1Column 2Column 3Column 4


Question: How do we build a table with TWO rows and ONE column as shown below?
Row 1
Row 2
Solution
<table>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</table>

Note: you can write your table codes all on one line. I have written the above the way I did just to make it easy to understand. Hence, you could have written the above as

Solution
<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr></table>
Continue