Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square Moving On
square Backgrounds
Square Images
Square Links
Square Lists
Square Tables (Part One)
Square Tables (Part Two)
Square Tables (Part Three)
 
What are tables? What are they good for?
Rows, columns and cells
Making a simple table
Placing images in tables

What are tables? What are they good for?

Tables are one of the most important features of HTML. They can be used for displaying information, pictures, or to create the layouts for the entire page (like this one). Nearly all web-pages you see will be using tables at some point. Remember that you can see the source code of any page by right-clicking the mouse and choosing View Source. Any table is made of rows, columns and cells, which we'll take a look at now, and then make our first table.
Rows, columns and cells

A table, whatever it looks like, is simply a collection of cells, which are the components of the table. If there is more than one cell placed horizontally, this creates a row. If there's more than one cell vertically, this creates a column. In the example table below, you can see we have four cells, making two rows and two columns.

Cell One, Row One Cell Two, Row One
Cell One, Row Two Cell Two, Row Two

A table can have as many or as little rows and columns as is needed or wanted. For example, the example below is a table, even though it consists of only one row and one column -
I am Cell One, Row One

The basic tags in HTML to make tables are - <table>, <tr>, and <td>. Each of these has its own attributes to control the appearance and layout of the table, and we'll deal with these soon. For now, let's use these three tags to create a simple table...

Making a simple table

To create a table in HTML, we use the <table> tag to begin it, and like most things in HTML, it needs a closing tag to end it - </table>.
Open Notepad and enter the following code into it -
<html>
<head>
<title>My first table in HTML</title>
</head>
<body>
<table>
</table>
</body>
</html>
Save this away as myfirsttable.html. At the moment we have a table with nothing in it; what we need to do now is give it some content. The minimum number of cells a table can have is one. To have a cell, a table first needs a row. To create a row, we use the <tr> tag. To end a row, we use its closing tag, which is of course </tr>.
To create a table cell, we use the tag <td>, and close it with </td>. We're going to make a table which has two rows and two columns - so within each row, there will be two cells. Anything (text, images, forms, etc>) in between the <td> tags, is rendered in the table, so we'll place some text there so that we can identify which cell is which. Take the code from above, and add these new tags so it looks like this -
<html>
<head>
<title>My first table in HTML</title>
</head>
<body>
<table>
<tr>
<td>I am cell one, row one!</td>
<td>I am cell two, row one!</td>
</tr>
<td>I am cell one, row two!</td>
<td>I am cell two, row two!</td>
</tr>
</table>
</body>
</html>
Save this, and then view it in your browser. It should appear like this. We can add something to make the example easier to understand. At the moment, our table doesn't have a border, so we can't easily see where one cell ends and another begins. If we use the border attribute of the <table> tag, and set it to, say, 1, we will be able to see. Change the line
<table>
To
<table border="1">
And then save the file again. It should now appear like this. So that's how we make a table in HTML. Let's now make a larger table - six columns wide and three rows high. Remember, the <td> tag and closing tag should always be nested between the opening and closing <tr> tags. The <tr> tags are then nested between the <table> tags. So for a six column, three row table, we'd use something like this -
<html>
<head>
<title>Another table example</title>
</head>
<body>
<table border="1"
<tr>
<td>Cell 1, Row 1</td>
<td>Cell 2, Row 1</td>
<td>Cell 3, Row 1</td>
<td>Cell 4, Row 1</td>
<td>Cell 5, Row 1</td>
<td>Cell 6, Row 1</td>
</tr>
<tr>
<td>Cell 1, Row 2</td>
<td>Cell 2, Row 2</td>
<td>Cell 3, Row 2</td>
<td>Cell 4, Row 2</td>
<td>Cell 5, Row 2</td>
<td>Cell 6, Row 2</td>
</tr>
<td>Cell 1, Row 3</td>
<td>Cell 2, Row 3</td>
<td>Cell 3, Row 3</td>
<td>Cell 4, Row 3</td>
<td>Cell 5, Row 3</td>
<td>Cell 6, Row 3</td>
</tr>
</table>
</body>
</html>
Type the above code into Notepad and save it away as tablexexample2.html, then view it in your browser. It should look like this.

Placing images in tables

Be aware that tables don't just have to have text in them - they can include forms, images, whatever you like. All you need to do to include an image in a table is to include the normal image code, and place it between <td> and </td> tags, e.g. -
<table>
<tr>
<td>
<img src="example.gif" height="50" width="50" alt="Example">
</td>
</tr>
</table>
Before we move on to section two of the tables tutorials, take some time to experiment with the tags you've learned already. Try different border sizes, and even nesting one table within another (tip:Place the new table within the <td> and </td> of the cell you'd like it in. Next we'll look at how to control the size, alignment and other features to control the layout and looks of our tables.

TopTop of page - BackBack to Lists - Next - Tables (Part Two)Next

Introduction - The Basics - Moving On - Advanced - Glossary - Reference