tags to show where the table rows go. (Remember: rows go across the page.)
Team City
Red Sox Boston
Yankees New York
Add pairs of tags to show where the table heading cells go.
| Team |
City |
Red Sox Boston
Yankees New York
Add pairs of | tags to indicate the individual table cells.
| Team |
City |
| Red Sox |
Boston |
| Yankees |
New York |
Add the border attribute to the table tag to create lines around each table cell. Note to make an invisible border around your table use BORDER=0
| Team |
City |
| Red Sox |
Boston |
| Yankees |
New York |
There you have it, we have created our first table shown here again. There is more to learn, so when your ready click onto page 2.
Team
City
Red Sox
Boston
Yankee
New York
There are tags that will enhance our basic table from lesson one.
First lets explore the tag itself.
These tags below are some of the basic attributes that can be used within
the table formatting tag of
Attribute
Description
ALIGN="___"
Aligns the table to the
LEFT, RIGHT or CENTER
(* see notation below)
BACKGROUND="URL"
Specifies background
image for the table.
(** see notation below)
BGCOLOR="color"
Sets background color
by rrggbb or color name.
(** see notation below)
CELLSPACING="#"
Inserts specified space
between cells.
It's value is in pixels.
CELLPADDING="#"
Inserts space between the
cell border and
the cell contents.
It's value is in pixels.
WIDTH="#"
Specifies the table
width in terms of the
number of pixels
or percentage.
* Note: The align center does not work with MSNTV. MSNTV users must center align using & on either side of the whole table code itself.
**Note: These attributes vary depending on browser preferences.
Lets add a few of these attributes to our sample table from page one of the lessons.
Frame one - upload to Geocities name FRAME1
Team
City
Red Sox
Boston
Yankee
New York
Our sample table from page one.
We will explore a few of these attributes one at a time so you will see each of the effects.
First lets add the CELLSPACING to the table.
| Team |
City |
| Red Sox |
Boston |
| Yankees |
New York |
The Result Is:
Upload to Geocities name FRAME2
Team
City
Red Sox
Boston
Yankee
New York
Our table now has thicker cellspacing.
Next lets add the CELLPADDING to the table.
| Team |
City |
| Red Sox |
Boston |
| Yankees |
New York |
The Result Is: Up load to Geocities and name FRAME
Team
City
Red Sox
Boston
Yankee
New York
Cellpadding is just what it describes,padding around the content of the table's cells.
Next lets add a BGCOLOR to the table.
| Team |
City |
| Red Sox |
Boston |
| Yankees |
New York |
The Result Is: Upload to Geocities and name FRAME5
Team
City
Red Sox
Boston
Yankee
New York
We now have colored the background of the table.
Finally, lets add a WIDTH to the table.
| Team |
City |
| Red Sox |
Boston |
| Yankees |
New York |
The Result Is: Upload to Geocities and name FRAME6
Team
City
Red Sox
Boston
Yankee
New York
Our table is now set at 75% of the page's width.
Experiment with the values of the above attributes. When your ready move onto page three of the lessons, there is more to learn.
These tags shown below will effect the table data cells
or the table headings | .
Here are some of the attributes that can be used within the table data cells or table headings.
Attribute
Description
ALIGN="___"
Aligns the cell content to the
LEFT, RIGHT or CENTER
BACKGROUND="URL"
Specifies background
image for the cell.
BGCOLOR="color"
Sets background color
by rrggbb or color name.
COLSPAN="#"
Specifies how many
columns of the table
this cell should span.
ROWSPAN="#"
Specifies how many
rows of the table
this cell should span.
WIDTH="#"
Specifies the cell
width in terms of the
number of pixels
or percentage.
HEIGHT="#"
Specifies the cell
height in terms of the
number of pixels.
VALIGN="___"
Controls vertical
alignment within the cell.
Values are TOP, MIDDLE, BOTTOM
We will continue with the last table from page two.
Adding the attributes for the table cells & headings.
You will see these effects on each of the cells.
Lets first ALIGN the table cell's contents.
| Team |
City |
| Red Sox |
Boston |
| Yankees |
New York |
The Result Is: Upload to Geocities and name FRAME7
Team
City
Red Sox
Boston
Yankee
New York
We have centered the contents of the table cells.
Next add BGCOLOR to the table cells & headings.
| Team |
City |
|
Red Sox |
Boston |
|
Yankees |
New York |
The Result Is: Upload to Geocities and name FRAME8
Team
City
Red Sox
Boston
Yankee
New York
We now have colored the table cells and headings.
In this next example we will add a new
table data cell and use the COLSPAN
to span it across the two cells above it.
Note that I closed the table row before
adding the new table data cell.
| Team |
City |
|
Red Sox |
Boston |
|
Yankees |
New York |
|
Great Baseball Rivals |
The Result Is: Upload to Geocities and name FRAME9
Team
City
Red Sox
Boston
Yankee
New York
Great Baseball Rivals
We have added a new table data cell and used
the COLSPAN attribute to span it across
the two table data cells above it.
In this new table data cell we created,
lets add the HEIGHT attribute to the cell.
| Team |
City |
|
Red Sox |
Boston |
|
Yankees |
New York |
|
Great Baseball Rivals |
The Result Is: Upload to Geocities and name FRAM10
Team
City
Red Sox
Boston
Yankee
New York
Great Baseball Rivals
Notice the HEIGHT of that cell is now altered.
Again we will use this last table data cell
to add the VALIGN attribute to see what it does.
| Team |
City |
|
Red Sox |
Boston |
|
Yankees |
New York |
|
Great Baseball Rivals |
The Result Is: Upload to Geocities and name FRAME11
Team
City
Red Sox
Boston
Yankee
New York
Great Baseball Rivals
Now the text in that table data cell
is vertically aligned at the bottom of the cell.
Play around with alignment, cell sizes and colors.
When your ready move onto the next lesson.
These tags shown below will effect
the table row | .
Here are some of the attributes that can be
used within the table row.
Attribute
Description
ALIGN="___"
Aligns the cell content to the
LEFT, RIGHT or CENTER
BGCOLOR="color"
Sets background color
by rrggbb or color name.
VALIGN="___"
Controls vertical
alignment within the cell.
Values are TOP, MIDDLE, BOTTOM
We will continue with the last table from page three.
Lets ALIGN the table row contents.
For this lesson, I have removed the alignment
attributes in the table data cells of the
table row we will be working with.
Since this table row attribute will effect each
table data cell across that table row.
| Team |
City |
| Red Sox |
Boston |
|
Yankees |
New York |
|
Great Baseball Rivals |
The Result Is: Upload to Geocities name frame 12
Team
City
Red Sox
Boston
Yankee
New York
Great Baseball Rivals
Our table looks the same but we now have
centered aligned all the table data cells
in the second table row with a single attribute
within the table row. [2]
Fool around with the table row attributes.
I think you get the idea now how to add
the attributes to each of the table tags.
We have been using text in our table data cells
but images can be used as well. These images
will respond to the attributes in the same way
our text did.
Here are the two images for you to save
to use in our lessons .
Save: Red Sox Logo -- Yankees Logo
Lets add images of the team logos in place
of the city names that we had in text form.
| Team |
Team Logo |
| Red Sox |
 |
|
Yankees> |
 |
|
Great Baseball Rivals |
The Result Is: Upload to Geocities and name FRAME13
Team
Team Logo
Red Sox
Yankees
Great Baseball Rivals
We have just added two images to the table data cells. Any item can be added to a table data cell. Try adding your web page counter or a banner to the cells.
In this final example of our table. I took the liberty of adding some font attributes, i changed a few colors and added new a image,
to give our example it's final look.
The Result Is: Upload to Geocities and name FRAME 14
Team
Team Logo
Boston
Red Sox
New York
Yankees
Great Baseball Rivals
What do you think of the final example ? As you have learned, you can do a lot with tables. It is a great way to organize text and images
on your web pages.
If you find you are having a problem with extra space inside the table cell under cell content, try moving the closing table cell tag up onto the line that precedes it.
Note: MSNTV users will not see the space under the image in the sample (left) below. This extra space problem doesn't happen on MSNTV, but MSNTV users should take note of this for computer users who maybe viewing their web pages.
Notice the spacing under the image in this cell.
The space is gone when the closing is moved up.
Here is the html code for the table above (right). Note how the closing table cell tag has been placed up on the same line of code with the image.
 |
If you do not use the cellpadding or cellspacing tags in your tables, the cellpadding will default to a value of 1, the cellspacing will default to a value of 2. So be sure to add cellspacing="0" and cellspacing="0" to your tables if you do not desire either of these two values in your table cells.
I have added a red border around the sample tables below (MSNTV users can not see this red border), so you can clearly see the extra space in the table when not using cellspacing="0" and cellpadding="0".
Without
cellpadding="0"
cellspacing="0"
With
cellpadding="0"
cellspacing="0"
There are times when you might want to split an image for your web site. Either for faster downloading of the image or other effects that can be used with a split image (this also deters people from stealing your images). This lesson will show you the proper way to create a table to join the pieces of the image together to form one seamless image.
This sounds good, but how do you split an image into pieces that can be joined together without loosing some of the image in the process ? The answer is with a software program. There are many such programs on the internet that you can download for free, go to Download.Com and search for "image split". The program I used to split the image for this lesson is Splitz, it was easy to use and free.
Left Half Of The Image
Right Half Of The Image
Now lets take the two images above and join them together using tables. The image on the left (below) is properly coded and the image on the right (below) is not. When the table code is written correctly, the two images will join together seamlessly.
Good Image Using
cellpadding="0"
cellspacing="0"
Bad Image Not Using
cellpadding="0"
cellspacing="0"
Below is the html code for the table that joins the two images together seamlessly (left). Note how we used the above two previous table tricks to achieve joining the two images together without any space between or under them. Be sure to incorporate both previous lessons when you are writing this table code to insure that your final image will be seamless.
 |
 |
On Internet Explorer and MSNTV you can hold open an empty table cell by just adding the width and height into the table cell line of code. For example: , but if you view that cell coded in this manner on Netscape, the cell will collapse. Netscape needs some type of cell content to hold it open to the assigned width and height.
The best way to hold a empty cell open to a proper width and height, is to use a one pixel clear image. You place the one pixel clear image inside the cell that you would like to hold open as an empty cell and assign a width and/or height to the clear image itself. This will add content to the cell and keep it from collapsing on Netscape.
Below is a sample table code with three cells on a single table row. The first and third cell with have the Draac.Com logo image placed within them. The second cell (middle cell), will have a clear image placed within it, with an assigned width and/or height to hold it open. I will add a border of 1 so you can clearly see the three cells in the sample table. In this case it is only necessary to add the width to the clear image, the height is not a factor.
Below is the html code for the above table, note the use of the clear image with it's assigned width to hold the empty cell open and keep it from collapsing on Netscape. Get in the habit of using this method of holding open an empty cell in your table codes, it will assure your tables look as planned on all browsers.
Below is the html code for the sample table above using the nowrap attribute.
|
Draac.Com is the place to learn about tables.
|
• ) Adding the nowrap attribute to your table cell line of code will prevent text placed within the cell from breaking down to the next line. When the nowrap attibute is used, the text will only break down to the next line when you manually break the text with
.
Note: Do not set a width in the table cell that you want to use the nowrap attribute in or it will prevent the nowrap attribute from doing it's job.
Below is a table created with a width of 200, the nowrap attribute overrides the table width attribute.
Below is the same table created with a width of 200, without the nowrap attribute.
There are times when you might want to have two complete, individual, table codes placed side by side on a web page. The trick to placing the two tables side by side is to build another table around these two individual tables.
Each one of the individual tables will be placed into a table cell of the table that surrounds them. This is called "nesting tables".
Tip: This idea of "nesting tables" can apply to more than just two individual tables as shown here in this lesson. Many times whole web pages are created by nesting tables within cells of other table(s).
Below is a sample of two complete, individual tables, "nesting" within cells of a table that surrounds them both. I will add a border of 1 to the sample table so you can clearly see the individual tables and the table that surrounds them.
This is a complete individual table. Number 1
This is a complete individual table. Number 2
Below is the html code for the sample table above. Notice the two complete table codes placed into the cells of the table that surrounds them. I have colored the text of these individual table codes dark red in the code below, so they can be easily seen within the surrounding table code.
|
This is a complete individual table. Number 1
|
|
|
This is a complete individual table. Number 2
|
| | |
