October 22, 2006 11:50 PM

CHAPTER SIX:

Tables

INDEX: 01) What Is A Table?; 02) Why Use Tables?; 03) Building A Simple Table; 04) Using Headers In Tables; 05) Using Captions In Tables; 06) Aligning Text Within Cells; 07) Spanning Across Multiple Rows Or Columns; 08) Table Extensions

01) WHAT IS A TABLE?

First, let's begin by becoming familiar with a few terms associated with tables.

A table is a rectangular arrangement of rows and columns.

The data in a table is placed there in an organized manner.

Rows are the single lines going horizontally across the table.
Columns are the vertical lines going up and down.
A cell is the space created where a row and a column intersect (cells are where you enter your data).
A caption is the text that appears above the table and is usually a summation of what the table is about. A caption might be thought of as the table title.
Headers are on the first row and are usually optional. These basically identify what each of your columns will hold. Headers might be called labels, too.
Lastly, are borders. These are the lines surrounding the table and each cell.

02) WHY USE TABLES?

There are several reasons for using tables.

First, the lining up of text is made easier with tables. Second, text wraps inside each cell, meaning that if you have more than one line of text, it will automatically stay in that same cell. Third, tables are self-contained. You can edit and format the contents of a cell without disturbing other cells. Fourth, tables can also include images and links, not just text. And fifth, most of the text tags (<B>,<I>,<H1>, etc.) can be used inside of tables.

Tables are a convenient way for displaying information in a very organized manner.

03) BUILDING A SIMPLE TABLE

A table always begins and ends with <TABLE> and </TABLE>. If you want a border around your table, you would use <TABLE BORDER=n> instead of <TABLE>, where 'n' is equal to the number of pixels you'd like the width of the border set to. If you'd like your table to be invisible (not show any of the lines on the Web page), then set 'n' to 0. There are other tags that go within the table tag, but before we talk about those, let's look at the basic layout of a simple table.

So, how do you build a table? First, you would determine how many rows and columns you want in the table. Second, add the first row. Third, divide that row up into however many columns you want. Fourth, put the data into each cell. You would repeat those four (4) things until you were finished with the table.

The tag for adding a new table row is <TR> (TR stands for Table Row) and </TR> ends that row.

Next, to divide that row up into columns, you would use the <TD> (TD stands for Table Data) and </TD> tags. Each <TD> represents one column cell.

Suppose you want a table that has two (2) columns and three (3) rows, with the table border being three (3) pixels wide. How would you code this in HTML?

...
<TABLE BORDER=3>
<TR>
<TD>This starts your first row.</TD>
<TD>This is the second column in the first row.</TD>
</TR>
<TR>
<TD>This starts your second row.</TD>
<TD>This is the second column in the second row.</TD>
</TR>
<TR>
<TD>This starts your third row.</TD>
<TD>This is the second column in the third row.</TD>
</TR>
</TABLE>
...

The ... before and after the code given simply indicates that this is a portion of the entire Web page and that, if you were to try this without the basic skeleton of a Web page in place, it would not work. Refer to Chapter One for more information regarding the basic skeleton.

How would the above HTML code look on the Web page? Like this:

This starts your first row. This is the second column in the first row.

This starts your second row. This is the second column in the second row.

This starts your third row. This is the second column in the third row.

In the above table, we wanted two (2) columns and three (3) rows. Notice that there are three (3) <TR>s, with each beginning a new row. Note that inside of each <TR>, there are two (2) <TD>s. This is your two (2) columns in the row. The text you want would be typed between the <TD> and </TD>.

It is important to note here that you can not only put text in a table, but also formatting tags (such as <B>, etc.), links, lists, and images.

Why would one want to put an image in a table? What if you wanted your Web page to have a paragraph with an image on each side? Try that without a table and you'll be pulling your hair out within 15 minutes. But, with a table, it's simple. You would create one (1) <TR> with three (3) <TD>s (image, paragraph, image). Here's part of the code:

...
<TABLE>
<TR>
<TD><IMG SRC="firstpic.jpg"</TD>
<TD>Your paragraph here.</TD>
<TD><IMG SRC="secondpic.jpg"</TD>
</TR>
</TABLE>
...

The first column of the above table would display firstpic.jpg, the second column would contain your paragraph, and the third column would display secondpic.jpg.

Tables containing images often times look best without a border, hence this began with <TABLE>, not <TABLE BORDER=n>. But, for the purpose of displaying the above table on this Web page below, a border of 2 was used (so that it would be easier to see each cell).

firstpic.jpg is here. Your paragraph is here. secondpic.jpg is here.

In the table above, there would be actual images in the first and last cells and not the text of "firstpic.jpg" and "secondpic.jpg". Refer to the example below, where I simply used the "NOTE:" image:

Your paragraph is here.

The images in the table above are not centered. They are both on the left because we did not specify them to be in a specific location within the cell. You could simply add code to it to position it in the middle or on the right. The code needed would be: <P ALIGN=CENTER> or <P ALIGN=RIGHT> In the example below, the first blue ball is centered and the second one is on the far right. Also notice that the center cell is still aligned on the left and is not centered or on the right.

Your paragraph is here.

The code for the table above is:

<TABLE border="1" width="100%">
<TR>
<TD width="33%">
<P align="center">
<FONT SIZE=4 FACE=ARIAL>
<IMG border="0" SRC="../../images/note.jpg" width="77" height="33"></font></TD >
<TD width="33%"><FONT SIZE=3 FACE=ARIAL>Your paragraph is here.</FONT></TD >
<TD width="34%">
<P align="right">
<FONT SIZE=4 FACE=ARIAL>
<IMG border="0" SRC="../../images/note.jpg" width="77" height="33"></font></TD >
</TR>
</TABLE>

04) USING HEADERS IN TABLES

If you have a table that includes quite a bit of statistics, data, or whatever, you will probably want to put headers at the top of it to help the reader understand the information in the table.

The tags for headers within tables are <TH> and </TH> (abbreviation from Table Header). To define the headings of your table, (this will be always displayed on the first row), you would use this code:

...
<TABLE BORDER=2>
<TR>
<TH>First column header</TH><TH>Second column header</TH><TH>Third column header</TH>
</TR>
<TR>
<TD>Normal first column</TD>
<TD>Normal second column</TD>
<TD>Normal third column</TD>
</TR>
</TABLE>
...

Here's what the above table looks like:

First column header Second column header Third column header

Normal first column Normal second column Normal third column

05) USING CAPTIONS IN TABLES

Remember what a caption is? It's a very short description that tells the reader what the table is all about. You might say it's the title of the table. Here's the tag for defining a caption:

<CAPTION ALIGN=where>Caption text goes here.</CAPTION>

The 'where' in that tag is either TOP or BOTTOM. If you use TOP, the caption appears above the table. If you use BOTTOM, the caption appears below it.

Here's sample code of a caption located at the top of a table:

<TABLE BORDER=2>
<CAPTION ALIGN=TOP>Table 1: Gasoline Prices for 1977</CAPTION>
<TR>
<TH>Company</TH><TH>Price<TH>
<TD>Best Gas Company</TD>
<TD>$0.76 per gallon</TD>
</TR>
</TABLE>

Here's what that table looks like:

Table 1: Gasoline Prices for 1977
Company Price

Best Gas Company $0.76 per gallon

So, what makes <TH> and <TD> different from one another? Text between <TH> and </TH> will always appear centered and bolded. Text between <TD> and </TD> won't (unless you tell it to).

06) ALIGNING TEXT WITHIN CELLS

You can certainly make a great-looking table with all of the information provided above. But, there are some 'EXTRA' things you can do to jazz it up some. Unless you specify otherwise, data entered into a table with <TD> will be left-aligned. Data entered into headers with <TH> will automatically be centered, unless you tell it otherwise. So, what are the other choices and what are their formats?

In both of those cases, 'where' can be LEFT, CENTER, or RIGHT.

There is also one more way to align data within a cell: Vertically. The vertical format uses VALIGN.

In both of those cases, 'where' can be TOP, MIDDLE (the default), or BOTTOM of the cell.

07) SPANNING TEXT ACROSS MULTIPLE ROWS OR COLUMNS

So far, each bit of data entered has just been put into one cell. But, what if you have data that needs to take up more than one cell, either vertically, or horizontally? Such cells that take up more than one space in a column or row are said to span. This could come in very handy with headers or even graphics. Here is the tag for spanning columns:

Where the value of 'n' is the number of columns you want the cell to span across. Spanning multiple rows is similar, except that you substitute ROWSPAN for COLSPAN.

Again, the value of 'n' is the number of rows you want the cell to span.

Suppose you want to create a table that spans two (2) rows. This is the code:

<TABLE BORDER=2>
<CAPTION>Spanning Across Two Rows</CAPTION>
<TR>
<TD ROWSPAN=2>This spans two rows.</TD>
<TD>This is the first row</TD>
</TR>
<TR>
<TD>This is the second row</TD>
</TR>
<TR>
<TD>This doesn't span at all.</TD>
<TD>This is the third row</TD>
</TR>
</TABLE>

Spanning Across Two Rows
This spans two rows. This is the first row

This is the second row

This doesn't span at all. This is the third row

08) TABLE EXTENSIONS

There are several extensions for tables that enhance the look of one. They include:

The border size. To change the thickness of the table border, you would use <TABLE BORDER=n>, where n is the number of pixels wide you want the border.

The width of the table. To change the width of a table you would use <TABLE WIDTH=n> or <TABLE WIDTH=n%>, where n is a value in pixels and n% is the percentage of the screen width.

The width of a cell. To change the width of an individual cell, you can add WIDTH to either a <TD> or <TH> tag. Again, you can either specify a value in pixels or a percentage of the table. The tag for this would be <TD WIDTH=n> or <TD WIDTH=n%>.

The amount of space between the cells. By default, browsers allow two pixels of space to be between each cell, horizontally and vertically. You can readjust that by using the following tag: <TABLE CELLSPACING=n>, where n is a number.

The amount of space between a cell's contents and its border. Most browsers will cram the data into a cell as tightly as possible. If you wish to give it some extra space, you would use this tag: <TABLE CELLPADDING=n>, where n is a number.

If you pad a cell with 5 pixels, for example, then the browser will give you 5 units/pixels of extra space in ALL directions (above, below, left, and right).

Here are samples of tables, with the table/row/column/cell description inside each cell, using HTML code (for 5 tables) using the extensions and information given on this page:

Table 1

First data.

This table has a border=5.

Table 2

First data in 2nd table.

This table has a border=10%.

Table 3

This table has a border=2 and this cell's width will be 50%.

This will be normal width.

Table 4

First data in 4th table.

This table has a border=10 and cellspacing=8.

Table 5

First data in 5th table.

This table has a border=4 and cellpadding=7.

The table values for each of the tables above is given inside of each individual table. Take a few minutes to look these tables over and compare the values with how they appear on the Web page.

Again, it depends upon which Web browser you are using as to the actual appearance of each of the tables on this page, so do not be alarmed if they don't appear exactly as stated.

HTML TUTORIAL

Tutorial Introduction	Introduction
Getting Started	How to Get Started
Table of Contents	Table of Contents
Chapter One	WHAT IS HTML?
Chapter Two	FORMATTING IN HTML
Chapter Three	LISTS
Chapter Four	LINKS
Chapter Five	IMAGES
Chapter Six	TABLES
Chapter Seven	FORMS
Chapter Eight	EXTENSIONS
Chapter Nine	TIPS ON CREATING GREAT WEB PAGES