Creating Tables

You can create tables in an HTML document to display different types of data.

Here is a quick tutorial on how to create a table in your webpage.

First you have to let the browser know that it will be displaying a table.
To do this use the <TABLE> tag.

<table>

You can also set the table width, height, border, cellspacing, and cellpadding within the first tag.
<table width=80% height=300 border=1 cellspacing=0 cellpadding=0>
In this example, the table will be 80% of the page width.
It will be 300 pixels tall.
The border on the frame will be 1 pixel wide.
The spacing between cells will be 0 and the spacing between the contents and the cell border will be 0.

The next thing to do is create a row in your table.
To do this use the <TR> tag.
Next, you'll need to create a cell withing the row.
To do this use the <TD> tag.
Here is what the first row of a table will look like.
<table border=1 width=60% cellspacing=0 cellpadding=0>
<tr>
<td>This is the content in the first cell.</td>
<td>This is the content in the second cell.</td>
<td>This is the content in the third cell.</td>
</tr>
</table>
 Here's how it would look in real time.

This is the content in the first cell. This is the content in the second cell. This is the content in the third cell.

You can also adjust the alignment within a cell by specifying attributes to the <TD> tag.
In the following example, I'll use the same table as above, only this time, I'll add a two rows with the various attributes applied.
<table border=1 width=60% height=300 cellspacing=0 cellpadding=0>
<tr>
<td>This is the content in the first cell.</td>
<td>This is the content in the second cell.</td>
<td>This is the content in the third cell.</td>
</tr>
<tr>
<td align=left>Align left</td>
<td align=center>Align center</td>
<td align=right>Align right</td>
</tr>
<tr>
<td valign=top>Align top</td>
<td valign=middle>Align middle</td>
<td valign=bottom>Align bottom</td>
</tr>
</table>

Here is how the new table will look at game speed.

This is the content in the first cell. This is the content in the second cell. This is the content in the third cell.
left center right
top middle bottom

As you can see in the examples, to align content side to side in a cell, use the align attribute.
To align content top to bottom, use the valign attribute.

And that's about all there is to creating tables.
Experiment with the borders and alignment to create some nice effects.

Choose another tutorial by clicking one of the links below.
  Contact   Help Desk   CityScape News   Home

Recommended by us