PageResource.com - Web Development Tutorials

HTML Table Basics

How to add a table to your page
Do you really want to create a table? Well, let's start with tables by looking at the table tag:

<table>
......contents of table.......
</table>

The <table> tag begins the table, you place what you want inside, and end the table with the </table> tag. To begin adding contents to your table, you will need the <tr> and <td> tags. The <tr> stands for table row and the <td> stands for table data, which is what you will place after this tag. You end a table data section with the </td> tag and each table row with the </tr> tag. Here is a basic table with just one cell:

<table>
<tr>
<td>
This is my table!
</td>
</tr>
</table>

The table will turn out like this:

This is my table!

What? No border? Don't worry, to get the border we just add the border command to the <table> tag, like this:

<table border="2">
<tr>
<td>
This is my table!
</td>
</tr>
</table>

And now the table has the border around it:

This is my table!

You can set the border to be as big or small as you like by changing the number inside the quote marks. If you set it to border="0", you will have a table with no border around it.

Of course, you probably want the table to have more than one cell in it. To add another cell on the same line, just use the <td> tags again, like this:

<table border="2">
<tr>
<td>
This is a cell
</td>
<td>
This is a cell
</td>
</tr>
</table>

And now we have two cells:

This is a cell This is a cell

Well, what if you want to go to the next line, or in table terms, the next row? To do this, you use a new set of table row tags, <tr> and </tr>:

<table border="2">
<tr>
<td>
This is a cell
</td>
<td>
This is a cell
</td>
</tr>

<tr>
<td>
This is the new row
</td>
<td>
I'm on the new row, too!
</td>
</tr>
</table>

Now there are two rows, each with two cells:

This is a cell This is a cell
This is the new row I'm on the new row, too!

There are a couple of commands you can add to the <table> tag to get more spacing between cells. Here they are:


1. cellspacing=" "
Use this command to add more space around each cell. Place a number inside the quote marks.

2. cellpadding=" "
Use this command to add more space inside each cell. Place a number inside the quote marks.

I'll show you an example of both of these now. Let's say we added the cellspacing command to our last table, and set it to equal 12, like this:

<table border="2" cellspacing="12">

Now the table would look like this:

This is a cell This is a cell
This is the new row I'm on the new row, too!

Now, suppose we used the cellpadding command, and set it to 12, like this:

<table border="2" cellpadding="12">

Now the table looks like this:

This is a cell This is a cell
This is the new row I'm on the new row, too!

And of course, you can use both at once:

<table border="2" cellspacing="15" cellpadding="15">

This is a cell This is a cell
This is the new row I'm on the new row, too!

You can add just about anything you would like inside the cells. You can add links, images, headings, paragraphs and more.

To use a link inside a cell, just place the link tag inside your <td> tags, like this:

<td>
<a href="http://www.pageresource.com">My Favorite Web Site!</a>
</td>

Now you will have a link inside your cell:

My Favorite Web Site!

To place an image inside a cell, you do the same thing with the image tag:

<td>
<img src="scare.jpg" />
</td>

sample image inside a table cell

If you want table headings for listing data, you could use the <th></th> tags on the first row of the table rather than <td></td> tags:

<table border="2" cellspacing="0" cellpadding="7">
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>John</td>
<td>Blue</td>
</tr>
<tr>
<td>James</td>
<td>Green</td>
</tr>
</table>

Name Favorite Color
John Blue
James Green

You may have noticed that most everything is aligned to the left side of each cell. This is the default setting. In the next section we will cover how to change the alignment of your cell contents, make cells stretch across more than one column or row, define a table width, and change cell background colors.

So, let's move on to Tables 2: Alignment, Color, and More.


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy