HMTL Tutorial

By Alan Flum of Celestial Graphics Inc.

HTML Tables: Table Basics

In this section you will learn how to create HTML tables. Do you think tables are boring? Think Again! Tables allow you to make your web page come alive. How? Tables give you precise control over where text and images appear on a web page. This page will teach you the basics of creating the tables. The next page will show you how to use tables to create beautiful pages.

In this section, you will learn how to use tables to layout your web site precisely the way you want.

If you came to this page in the middle of the tutorial you may want to go back to the Introduction.

	More Information
	Website Design Tutorial E-Commerce Tutorial Recommended Reading Optimizing Images for the Web What Software Should I Use? Park Your Domain for Free! Web Hosting Packages

How to Build a Table

Lets build a simple HTML table in order to see how it is done. This table will be 450 pixels wide, and have 2 rows and 3 columns. We will give each cell with some simple text.

<html>

<head>
<title>My First HTML Table</title>
</head>

<body bgcolor="#ffffff">
<table width="450" border="1">
<tr><td> Row1 Col 1</td><td> Row 1 Col 2</td><td>Row 1 Col 3</td></tr>
<tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td><td>Row 2 Col 3</td></tr>
</table>
</body>

</html>

This HTML will yield the following table:

Row 1 Col 1	Row 1 Col 2	Row 1 Col 3
Row 2 Col 1	Row 2 Col 2	Row 2 Col 3

As an exercise, you can cut and paste the HTML above into your text editor and save it as table1.html. Double click on the file to view it in your browser.

Lets look at each element of the table. The basic tag for the table is <table> </table>. The table tag can take on several attributes. In the example above the two attributes are width and border. The width can be expressed in either pixels or percent. In the example above the width is 450 pixels. We could just have easily have expressed the width of the table as a percentage of your browser screen. For example, the following table tag would express the table as 75% of your browser screen <table width="75%" border="1"> .

The border tag expresses the width, in pixels, of the table border. Here is the same table with a border of 4 pixels, simply change the opening table tag to
<table width="450" border="4"> and you get:

Row 1 Col 1	Row 1 Col 2	Row 1 Col 3
Row 2 Col 1	Row 2 Col 2	Row 2 Col 3

The table rows are created with the <tr></tr> tags. In example above we have 2 rows because we have the <tr></tr> tag pair twice.

The number of columns is determined by the number of cells that span each row. Each cell is represented by the <td></td> tag.

Lets look at the basic structure of the table in our example:
<table>
<tr> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> </tr>
</table>

Inside the <td> </td> you can put text as in our example you can also put images. The text can be modified as usual with <font></font> tags or any other tag you would normally use to modify the font.

Creating a Better Looking Table

The tables shown in the examples so far are not very attractive. Lets look at how to make a nice looking table like this:

A Better Looking Table
Mangos	Apples	Kiwis
Oranges	Bananas	Pears

Lets see how easy it was to make this.

The over-all table tag looks like this:
<table width="450" border="0" cellspacing="1" > </table>

This table has a width of 450 pixels. Notice the border width is 0 pixels. There is a new attribute, cellspacing. Cellspacing means how many pixels of background are between each cell. In this case there is 1 pixel of background between each cell.

Next, lets look at the tables structure without the text:

<table width="450 border="0" cellspacing="1">
<tr bgcolor="#009999"> <td colspan="3"> </td> </tr>
<tr bgcolor="#99CCCC"> <td> </td> <td> </td> <td> </td> </tr>
<tr bgcolor="#99CCCC"> <td> </td> <td> </td> <td> </td> </tr>
</table>

As you would expect there are 3 <tr></tr> pairs which create 3 rows. The last two rows have the expect triple pair of <td></td> in order to create 3 columns. The first row has only one <td></td> pair. This <td> has an attribute, colspan="3" called Column Span. This attribute tells your browser to create a table cell 3 columns wide.

Now that we have the basic structure of the cell, all we have to do is add the text. The first row's text is center so we use the <div align="center></div> tag. The text is also bold and I've used the Verdana Font with a Size of 2 and white color. So in order to render the text we surround it as follows:

<div align="center"><b><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF">A Better Looking Table</font></b></div>

The text in the other two rows is all a dark grey color (#333333) with the Verdana font and a size of two. This HTML for Mango text is:

<font color="#009999">  <font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#333333">Mangos</font></font></td>

 

Notice the   . This stands for "non-breaking-space". Use this whenever you want to create blank spaces before or between text.

The HTML for this entire table is too large to put on this page. If you want to view it or cut and paste it for practice into your editor click here .

The next section of the HTML Tutorial will show you how to use tables to create good looking web pages.

Previous: Images Next: Great Looking Pages