| |
HTML
Tables Quick Start
HTML tables were designed
by HTML programmers to be a way of displaying data like spreadsheet
type information or other kinds of information you might normally
put in a table in a word processed file. HTML authors quickly
created a new use for html tables, they adapted them to be used
as a page layout device. Tables in combination with a few other
trick techniques like use of invisible gif images will give you
pixel precise control over placement of objects on a web page.
Is this complicated stuff? Yes and no. Just knowing a little about
tables will give you a lot of page layout control. Simple tables
are not hard to code as you will soon discover. Tables can also
be quite complex, real head scratchers. To master tables using
raw HTML code is very challenging. Even complex tables can be
created relatively quickly by using a Web authoring program like
Dreamweaver, FrontPage, Adobe GoLive, Filemaker HomePage or Symantec
VisualPage. Symantec VisualPage handles tables beautifully, it
is a very nice program and very affordable.
Why learn how to hard code HTML tables? All of the above programs
are very good. They all make the process very painless and simple.
However, they all have their own glitches and html tables are
one area where all of them have maddening little bugs that you
can spot and fix if you know how to hard code HTML tables. Additionally,
if you know basic html tables code, you are not held back by not
owning a Web authoring program. You can code your tables directly
in HTML.
HTML Tables Code Tutorial
1. Setting up your files and folders
- On your computer or disk, create
a new folder named "tables_practice"
- Inside this folder, create another
folder named "images"
- Start a new blank HTML document,
name it "tables.htm"
- Make
two more HTML documents,
name them "giraffes.htm"
and "lion.htm"
Save these in the "tables_practice"
folder.
- Code the image "Giraffes.GIF"
on to the "giraffes.htm"
file.
- Code the image "lion.GIF"
on to the "lion.htm" file.
- Copy and paste the starter HTML
code below into the three new documents above.
- Download the four
images found
here. Save them to your "images" folder which is inside your "tables_practice" folder.
Starter Code
<HTML>
<HEAD>
<TITLE>HTML Table Practice</TITLE>
</HEAD>
<BODY>
(All your table code will go here, between
the two body tags)
</BODY>
</HTML>
2. Writing Tables
Code
- For each table example below, type
in the html code on your "tables.htm" document exactly
as you see it in each example.
- After creating each table, view
your work with your web browser.
- In between each table be sure to
insert a paragraph tag (<P>) to create a double space.
Example Table 1
Here is the code for a one row two column table, it has two cells
and is 400 pixels
wide.
<table border=1 cellspacing=2 cellpadding=2
width=400>
<tr>
<td>Panama</td>
<td>Mexico</td>
</tr>
</table>
<P>
The code above looks like this when displayed by a web browser.
Example Table
2
Here is the code for a two row two column table, it has four cells
and is 500 pixels wide.
<table border=1 cellspacing=2 cellpadding=2
width=500>
<tr>
<td>Panama</td>
<td>Mexico</td>
</tr>
<tr>
<td>Costa Rica</td>
<td>El Salvador</td>
</tr>
</table>
<P>
The code above looks like this when displayed by a web browser.
| Panama |
Mexico |
| Costa Rica |
El Salvador |
Example Table
3
Here is the code for a two row three
column table, it has four cells and is 350
pixels wide.
<table border=1 cellspacing=2 cellpadding=2
width=350>
<tr>
<td>Panama</td>
<td>Mexico</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Costa Rica</td>
<td>El Salvador</td>
<td>Cuba</td>
</tr>
</table>
<P>
The code above looks like this when displayed by a web browser.
| Panama |
Mexico |
Los Angeles |
| Costa Rica |
El Salvador |
Cuba |
Example Table 4
How To Manipulate The Table
Border width,
the width of the grid lines between cells named "cellspacing" and the space around objects in a cell named "cellpadding."
Now lets take the table in example 3 and change the parameters border, cellspacing
and cellpadding
that are part of the opening
table tag.
<table border=8
cellspacing=5 cellpadding=10 width=350>
<tr>
<td>Panama</td>
<td>Mexico</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Costa Rica</td>
<td>El Salvador</td>
<td>Cuba</td>
</tr>
</table>
<P>
The code above looks like this when displayed by a web browser.
| Panama |
Mexico |
Los Angeles |
| Costa Rica |
El Salvador |
Cuba |
The parameters in the beginning table
tag and what they do.
1. border
- this parameter controls the width of the outside border in pixels
2. cellspacing
- this parameter controls the width of the interior grid lines
in pixels
3. cellpadding
- this parameter controls the distance in pixels between the outside
edges of the object inside the cell and the inside edges of the
cell itself.
Example
Table 5
Invisible Tables
TIP:
If you set the value of the border to ZERO,
the border and all the lines disappear leaving the objects inside
the cell exactly where you placed them. This is called invisible
tables and is a very handy way to get things where
you want them on your page without showing the table's outside
border or grid lines..
It is best to format with the lines
showing, then after you have the table and it's objects placed as
you wish, change the border value to zero as in the example below.
<table border=0
cellspacing=5 cellpadding=10 width=350>
<tr>
<td>Panama</td>
<td>Mexico</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Costa Rica</td>
<td>El Salvador</td>
<td>Cuba</td>
</tr>
</table>
<P>
The code above looks like this when displayed by a web browser.
| Panama |
Mexico |
Los Angeles |
| Costa Rica |
El Salvador |
Cuba |
Note there are no borders or grid lines and each word in the cell
stayed in the same location. The table lines are all really there
controlling the object placement. They are just invisible to the viewer.
On Your Own
You can place almost
anything in a table cell. Lets work through one more table example
and place the following objects in a two row, three column table.
The two thumbnail images are in your images folder, their file names
are next to them in parenthesis. The web addresses for the three hyperlinks
are also in parenthesis.
The code for the basic
table structure without the objects follows the list of 6 objects.
Your goal is to create a table that looks like the table below.
| 
|
National
Geographic Online |
|
| News
Links
- CNN
- Washington
Post
|
Classic
American
Cities
|
There are
many places to vacation in the United States. Hawaii is one
of the best, especially if you are from the northern part of
the country! |
List of 6 Objects
Place the following
six "objects" in the same cells as those
in the table above. The actual file names are to the right of each
thumbnail image and the web address of all three hyperlinks are also
to the right of the links in the list below.
1.
(th-Giraffes.GIF)
2.
(th-lion.GIF)
3. National Geographic Online
(http://www.nationalgeographic.com)
4. News Links
- CNN
(http://www.cnn.com)
- Washington
Post (http://www.washingtonpost.com)
5.
Classic American
Cities
6. There
are many places to vacation in the United States. Hawaii is one
of the best, especially if you are from the northern part of the
country.
1. Enter the following table
code on your "tables.htm"
document. To save time, copy and paste it into your html file.
<table border=1 cellspacing=2 cellpadding=2
width=550>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
2. The " "
tag between all of the two <TD></TD> tags below is the
non breaking space
tag. It is an
invisible tag that creates a single horizontal
space like the kind of horizontal space
you create when striking the "space" bar on your keyboard.
3. Why is the " "
there? If there are no objects in a cell, the table will not display
properly when viewed with a web browser.
4. The " "
tag will allow your browser to display the table with all its borders
and internal grid lines without having to place anything visible
in the cell. The " " tag is an invisible object.
5. View your tables code after
creating the basic
table code below.
6. Replace all " "
tags with the text and code needed to place each image, hyperlink,
list and block of text (#6) in a table cell.
7. After creating the table with all the objects in place, view
the table with your browser.
8. Go back to your code and change the border value in the opening
table tag from one to zero.
9. View your table again in your web browser. You will see an "invisible" table with all objects "suspended
in space" with no visible border lines.
Optional Challenge
Make each thumbnail image
in the table a clickable
link to the corresponding pages you created
earlier that display the larger images of the Lion
and the Giraffe.
These file names are "giraffes.htm" and "lion.htm."
Copyright 1997 - 2004 John Sedgwick
All Rights Reserved |
