Home HTML and CSS Tutorials Making Tables

Making Tables

Author: Michael Aldworth More by this author

Added: Mar 07, 2005 Rating:

Level: Beginner Software: Dreamweaver

1. This tutorial will show you how to make tables. First off, to make a simple one row (horizontal) and one column (vertical) table within the body tag (as you should know), this is how:

Now <tr> stands for table row and <td> adds a table column. If you wish to add more table colums put more <td> tags in like so:

For more rows just copy the whole <tr> block with <td> and all, then paste it below like so:

2.Now we will talk about the most common table Parameters you can add to each tag to edit the appearance of your table. We will first start with the <table Parameters in here> tag.

PARAMETERS:

Background Colour:
bgcolor="#FF0000" - This changes the background color of the whole table.

Background Image:
background="imagename.jpg" - This adds a background picture and tiles it for the size of the table.

Width and Height:
width="500" height="500" - This makes the whole table 500 x 500 pixels.

Cellpadding and Cellspacing:
cellpadding="1" cellspacing="1" - These parameters add gaps between each table box. I personally dislike them so i turn them both off="0".

Border:
border="1" - This obviously adds a border around the whole table. Changing the value to 0 eliminates the border..

Border Colour:
bordercolor="#FF0000" - This changes the background colour of the whole table.

Table Alignment:
align="center" - This aligns the table to the center of the webpage

3. Now rarily you use parameters for the <tr> tag because the <td> tag is always in it and it has the main parameters. Some <td> parameters are:

Width and Height:
width="500" height="500" - This makes the height and width of a column 500 x 500 pixels.

Elements within the Column's Alignment:
align="center" - This aligns horizontally anything you place in the <td> column, like text or an image. Left or right can be used instead of center.

Vertical Alignment:
valign="top" - This aligns vertically anything you place in the <td> column, like text or an image. Top, middle or bottom can be used.

4. I will give an example below using some of the elements I listed above.

So the code above will produce something similar to below but your font colours, border colours and background colours might be different because this webpage uses CSS.

cell #1

cell #2

cell #3

Author's URL: Michael Aldworth