HTML Table Basics for webpages

If you are ambitious and need to add tables to your website, it can be done using a WYSIWYG editor or by coding the tags in a plain text editor. Here is how you can build tables for your webpage.

<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 <TD> tag. 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. Here is a basic table with just one cell:

<TABLE>
<TD>
This is my table!
</TD>
</TABLE>

The table will turn out like this:

My first table!

For a border on the table add border to the <TABLE> tag, like this:

<TABLE border="2">
<TD>
This is my table!
</TD>
</TABLE>

And now the table has the border around it:

My first 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:

And now we have two cells:

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 the table row tags, <TR> and </TR>:

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:

cellspacing=" "
Use this command to add more space around each cell. Place a number inside the quote marks.
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:

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:

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:

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="https://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:

Once you have created the table in the html of your web page, you can use the WYSIWYG editor to add in text and images. The table will be easy to modify and use once you have mastered the table basics.