Home| About US |Website Development Tutorial| Ecommerce Tutorial

Back to Basic HTML Programming

Using Frame on Web Pages

Tables in web pages

Tables are used for presenting tabular data but many designers use them to help layout their pages.

Tables can be inserted anywhere on the page, even within other tables.

We will be looking at creating a basic table and then adding lots of tags to it so we can see just what the outcome will be. Experimentation is the name of the game here.

[

Tags you need to know to create a table

Every table must begin with a <table> tag and end with a </table> tag. In the table tag we can define the attributes of the table, as you shall see later.

The table contains rows, each begins with the <tr>, table row tag and ends with the </tr> tag. Rows must be inside tables.

The rows contain cells, each begins with the <td>, table data tag and ends with the </td> tag. Cells must be inside rows.

If you put a table cell outside a row, or if you forget to close a cell, or row, or table it will have unpredictable results. Some browsers will not display the page properly. At worst, the entire contents of the table will not be displayed.

[

Task - Create a table

  1. Open your default.htm and save it as table.htm in the appropriate folder
  2. Create this HTML code in the body of the document 
<table>
<tr><td>bread</td><td>$2.99</td></tr>
<tr><td>Milk</td><td>$1.40</td></tr>
</table>
  1. Save the file and view it in the browser.

Note1: It doesn't look too much like a table so let's add some more soon.

Note2: This table is made up of two rows ( check out the two <tr> tags ) and within each row there are two data entries ( that's right two <td> tags )

You might compare a table with a spreadsheet. This one has two rows and two columns making 4 cells containing data. ( 2 rows x 2 columns = 4 cells )

Table Borders

A border around a table is optional, sometimes they help to define the table, sometimes the table looks better without them.

However having borders turned on while you are creating the table is a very good idea since it makes tables much easier to work with. You can get rid of the border once the table is completed.

The border of this table is 1 pixel wide.


 

The border on this table is 5 pixels wide.

The default is 0 (i.e. borderless)

Border is an attribute of the table tag. The syntax is:

<table border=X> where X is the border size in pixels.

You can also specify a border colour, although this is an Internet Explorer tag only. The syntax is:

<table bordercolor="#000000">

Note that it is not recommended to specify the border colour using HTML - it is much better to use CSS for this purpose.

 

Task - Create a border around a table

  1. Open your table.htm file
  2. In the <table> tag, add border=2
    i.e. <table border=2>
  3. Save the file and view it.
  4. Change the size of the border i.e. try 0, 10 and try a crazy number
  5. View the results as you go

Did you spot that only the outside border gets bigger?

[edit]

 

Table Height and Width

A table, by default, will be as large as the data that is entered into it.

We can change the overall height and width of the table to get it the size we want.

It is possible to give the size in absolute pixels, or as a relative percentage of the screen size.

The syntax is: <table height=??? width=???> where ??? is the size in pixels or percentage.

It is also possible to control the dimensions of indivdual table cells or rows.

e.g. <tr height=80> <td width="50%">

It is possible to mix absolute and relative heights and widths.

 

Task - Define the size of a table

  1. Open your table.htm file.
  2. In the <table border=2> tag, we will add the height and width
    e.g. <table border=2 height=200 width=300>
  3. Save the file and then view it. Resize the browser window, and watch what happens - the table size stays the same.
  4. Experiment changing the measurements and view the file again.
  5. Now replace the pixels measurements with percentages
    e.g. <table border=2 height="40%" width="50%">
  6. Save the file and then view it. Resize the browser window, and watch what happens - this time the table changes size as the window size changes.
[

Table caption and headings

A table caption, may be needed to define the contents of the table. It is not necessary to put it in, but it is available to use.

The command is inserted after the <table> tag, i.e. on the next line

The syntax is: <caption>Table caption text here</caption>

Table captions are displayed outside the border of the table.

Table headings are a way of defining the contents of the table columns. They are usually only used in the first <tr>, table row.

Instead of using a <td> for the cell, we use a <th>.

By default the text in table headings is displayed bold and centered.

The Syntax is: <tr><th>text</th><th>text</th></tr>

Task - Table Caption and Headings

  1. Open your table.htm file
  2. Add your own caption to the table
  3. View the result
  4. Add the table headings ITEMS and $ PRICE for the table
  5. View the result

Cell Spacing and Cell Padding

the difference between cellpadding and cellspacing

Cell Spacing is the number of pixels between the table cells.

Cell Padding is the pixel space inside the cells. i.e. the distance between the information and the sides of the table cells.

Both these options are attributes of the <table> tag

e.g. <table border=1 cellspacing=0 cellpadding=0>

Note: The default for both is 2

Task - Cell Spacing and Padding

  1. Open your table.htm file. Make sure that your table has a large height and width set (e.g. 300x200) - if not then you won't be able to see the effect of cellpadding and cellspacing.
  2. Experiment with changing the size of the table border, cellspacing and cellpadding. Try different combinations of 0, 1, 5, 10,etc.
  3. View the result each time
[

Alignment of table cells

The default alignment of the contents of table cells is left.

If you want to change the alignment of cells, it has to be done individually for each cell. The align command is included in the <td> tag.

Syntax: <td align="position"> where position is left, center or right

You can also vertically align table cells. By default they are centered. The valign command is included in the table data tag.

Syntax: <td valign="position"> where position is top, middle or bottom

You can also include align and valign commands in the table row tag and in the table tag.

Note: Including align=left or align=right in the table tag does NOT align the contents of the table. Instead it aligns the whole table on the page. i.e. it makes the text outside the table wrap around the table.

[

Task - Alignment of table cells

  1. Open your table.htm file
  2. Change the alignment of the table cells so that they look like:
bread $2.99
Milk $1.40
or
bread $2.99
Milk $1.40
  1. Experiment with other vertical and horizontal alignments.
  2. View the result each time
[

 

Row span and column span

By default each cell only covers one row and one column. However it is possible to merge cells together, so that one cell can span across 2 or more rows, or 2 or more columns.

this table cell "spans" 2 columns

this table cell "spans" 2 columns
   

Syntax: <td colspan=X> where X is the number of columns that the cell spans across.

this table cell "spans" 2 rows

this table cell
"spans" 2 rows		  
 
   

Syntax: <td rowspan=X> where X is the number of rows that the cell spans across.

[

Task - Row span and column span

  1. Open your table.htm file.
  2. Experiment with making one table cell span across multiple rows.
  3. Experiment with making one table cell span across multiple columns.
  4. View the result each time.
[

Background colour and images

It is possible to give each table cell, (or row, or table) a different background colour.

     
     
     

Syntax:
<td bgcolor="colour">
<tr bgcolor="colour">
<table bgcolor="colour">
where colour is a colour name or hexadecimal code.

Note: table background colours only display in version 3 browsers and above, and they may not print correctly.

Note: it is not recommended to specify background colours using HTML - it is much better to use CSS for this purpose.

It is also possible to give a table cell (or a table row, or a table) a background image. Again these only display in version 3 browsers and above, and they may not print correctly.

The syntax is:
<td background="filename">
<tr background="filename">
<table background="filename">
where filename is the path and filename of the background image.

Note: it is not recommended to specify background images using HTML - it is much better to use CSS for this purpose.

 

 

Task - Background colour and images

  1. Open your table.htm file.
  2. Experiment with changing the background colour of a table cell, a table row, and the table itself.
  3. Add a background image to a table cell, a table row, and the table itself.
  4. View the result each time.

Copyright © 2006  [Ebini Abraham Tamuno]. All rights reserved.