What are tables? What are they good for?
Rows, columns and cells
Making a simple table
Placing images in tables
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
Any table is made of rows, columns and cells, which we'll take a look at now, and then make our first table.
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 -
The basic tags in HTML to make tables are -
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...
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 -
Open Notepad and enter the following code into it -
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
<title>My first table in HTML</title>
<tr> tag. To end a row, we use its
closing tag, which is of course
To create a table cell, we use the tag
<td>, and close it with
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 -
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
<title>My first table in HTML</title>
<td>I am cell one, row one!</td>
<td>I am cell two, row one!</td>
<td>I am cell one, row two!</td>
<td>I am cell two, row two!</td>
tag, and set it to, say, 1, we will be able to see. Change the line
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
<tr> tags. The
<tr> tags are then nested between the
So for a six column, three row table, we'd use something like this -
Type the above code into Notepad and save it away as tablexexample2.html, then view it in your browser.
It should look like this.
<title>Another table example</title>
<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>
<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>
<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>
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
and </td> tags, e.g. -
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
<img src="example.gif" height="50" width="50" alt="Example">
</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.
Top of page -
Back to Lists -
Next - Tables (Part Two)