LESSON ELEVEN - BASIC TABLES
You may read the following sections in their entirety
or use
these choices to go directly to a section.
INTRODUCING TABLES
I like tables and make good use of them. My main home page uses a table to
point to each lesson and in Lesson Ten, I used a table to print all
the colors and their codes. Tables are great for summarizing large
amounts of information and for structuring data. Tables allow viewers
to find what they need quickly and easily.
Tables are part of HTML 3.2 specifications and most of the popular browsers now support
them. This
lesson is for those of you who want to incorporate a table into a
web page and we will begin with a basic table and progress from there.
In the next lesson we study some of the
more advanced features of table design.
| top | | bottom |
A BASIC TABLE
Here is a basic table. Note that there is no border around the table
and that there are no lines separating the data in the table.
VOLUNTEER SCHEDULE
|
| 9 A.M.
| 12 P.M.
| 2 P.M.
|
| NURSERY
| John
| Mary
| Marcia
|
| SECURITY
| Kimberly
| George
| Ken
|
| TICKETS
| Jacob
| Nancy
| Adam
|
Note that even though there are no lines to separate the items
in the table and that some names are longer than others,
everything still nicely lines up. I am going to build on this example
and I would like you to follow along with me and also to do some of
your own experimenting.
So, SWITCH to NOTEPAD and type in the following HTML document that
gives the above table. Once you have typed it in, SAVE the document,
SWITCH back to your browser, and load the document to see the table. An explanation of the
commands is given below the document.
- <HTML>
- <HEAD>
- <TITLE>VOLUNTEER SCHEDULE</TITLE>
- </HEAD>
<BODY>
<H3 ALIGN="CENTER">
<TABLE>
<CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION>
<TR>
<TD>
<TD>9 A.M.
<TD>12 P.M.
<TD>2 P.M.
<TR>
<TD><STRONG>NURSERY</STRONG>
<TD>John
<TD>Mary
<TD>Marcia
<TR>
<TD><STRONG>SECURITY</STRONG>
<TD>Kimberly
<TD>George
<TD>Ken
<TR>
<TD><STRONG>TICKETS</STRONG>
<TD>Jacob
<TD>Nancy
<TD>Adam
</TABLE></H3>
</BODY></HTML>
Here is an explanation of this table.
- A table must be declared with TABLE tags. Therefore <TABLE>
denotes the beginning of a table and </TABLE> denotes the end
of the table. If you leave off the closing tag, your table won't
work. TABLE is a container element and so everything contained
between the opening and closing TABLE tags is part of the table.
- This table begins with a CAPTION tag. The CAPTION tag is optional.
It represents or describes the contents of your table. Most browsers will automatically
center the caption above the table contents. A caption can be placed above
or below the table. To place the caption below the table, use the
attribute ALIGN="BOTTOM" as in <CAPTION ALIGN="BOTTOM"> (try it). Note
also that I strongly emphasized the caption and my headings. This is
optional but it does serve the purpose of making your caption and
headings stand out more.
- A table is made up of rows and columns and tables are generated
row by row with each row going from left to right. A row is a horizontal collection of cells.
Therefore, 9 A.M., 12 P.M. and 2 P.M. are in the first row;
NURSERY, John, Mary and Marcia make up the second row; SECURITY,
Kimberly, George and Ken make up the third row. Our table has four
rows. Columns are vertical. Therefore NURSERY, SECURITY, TICKETS are
in the first column, while 9 A.M., John, Kimberly, and Jacob make
up the second column, and so on.
- Rows are divided into cells and each cell in our
example is a data cell. A cell can also contain no data
(the first cell
in the first row is empty or blank). Cells can also overlap. That is,
a cell can span across more than one row or span more than one column and
we will deal with that in the next lesson.
- TD stands for Table
Data. It denotes the beginning of a new cell.
You simply place this tag in front
of the information you want in the cell. Thus TD is used to mark up
each individual cell. The TD cell can contain almost anything such as
tags that center, emphasize, and color text. A data cell can contain
lists, images, and even nested tables (a cell containing a table). The
list goes on.
The closing TD tag (</TD>) is optional. Some people use it as good
practice to close each table cell explicitly. If you have a table
inside a cell (nested tables), then you should use the closing tag to close each
cell and row as some browsers get nested tables wrong and will
display them incorrectly. So use </TD> if you want, as in:
<TD>9 A.M.</TD>
<TD>12 P.M.</TD>
but each new TD tag implies that the previous one has ended.
- You begin each row with a <TR> tag.
TR stands
for Table Row. Tables are always
constructed as sequences of rows. Thus <TR>
tells the browser that a new row is now beginning. If you don't use
the TR tag for each new row, the browser assumes the cells will keep
going to the right. There is also an
optional end tag (</TR>) to explicitly terminate a row. However,
each TR implies that the previous
row has ended. Again, if you have a table inside a cell, you are
recommended to close all cells and rows as some browsers need them to
get the nested tables to print correctly.
- I used <H3 ALIGN="CENTER"> to center the table. The header tag, H3, has
no effect on the data. I could have used any header tag and the results
would have been the same. You can also
use ALIGN="RIGHT" to have the table aligned with the right side of the
browser screen (right justified). If you remove this attribute, you
will see the table
aligned with the left side of the browser screen (left justified). Note that some browsers
may not honor the ALIGN attribute to center a table.
- Notice in our example, that the width of each column is not the same.
This is because the width of each column is determined by the width
of the largest cell in that column.
| top | | bottom |
THE BORDER ATTRIBUTE
Now SWITCH to NOTEPAD and change the opening TABLE tag to:
<TABLE BORDER="1">
After you have saved the change, load the web page into your
browser. This is what you should see:
VOLUNTEER SCHEDULE
|
| 9 A.M.
| 12 P.M.
| 2 P.M.
|
| NURSERY
| John
| Mary
| Marcia
|
| SECURITY
| Kimberly
| George
| Ken
|
| TICKETS
| Jacob
| Nancy
| Adam
|
The table now has a border around the outside and each cell is separated
from the other cells with borders. In some low level browsers, there
will be no border around the empty cell. "Cells" are the individual rectangles
in the table. The "1" in BORDER="1" is called the "value" of the BORDER
attribute and here it specifies a
border around the table 1 pixel wide. The quotation marks around the
"1" are optional. If you want to have a wider border, then change
the "1" to a bigger number. For example, change the "1" to a "10" so
that we have a border of 10 pixels. Do this now to see the effect.
Below is the output with a border width around the table of 10 pixels.
Try different pixel widths to see if there is one you would like to use
in your tables. Note: in some low level browsers, a wider border will
only be placed on the right
side of the table and on the bottom of the table. In other words, there
will be no wide border around the top and left side of the table.
VOLUNTEER SCHEDULE
|
| 9 A.M.
| 12 P.M.
| 2 P.M.
|
| NURSERY
| John
| Mary
| Marcia
|
| SECURITY
| Kimberly
| George
| Ken
|
| TICKETS
| Jacob
| Nancy
| Adam
|
The default value for BORDER is 1. Therefore <TABLE BORDER> would
have a border 1 pixel wide. The HTML 3 draft did not include the values for the BORDER
attribute and so browsers which use this table model might draw a border
around your table for BORDER="0". Try BORDER="0" to see what happens to
the table border.
Note that the empty cell is different in appearance from the rest
of the cells. If you
want it to look like the rest of the cells, just place the space
character in the cell. The invisible space character is the
ampersand command " " and was studied
in Lesson Five. Let's do this now. Go back to
our HTML document in NOTEPAD and change the first <TD> tag that creates the empty cell to:
<TD>
Save this change, load the document into your browser and note that the
browser now shows the empty cell with
the same appearance as a non empty cell.
VOLUNTEER SCHEDULE
|
| 9 A.M.
| 12 P.M.
| 2 P.M.
|
| NURSERY
| John
| Mary
| Marcia
|
| SECURITY
| Kimberly
| George
| Ken
|
| TICKETS
| Jacob
| Nancy
| Adam
|
| top | | bottom |
CELL SPACING and CELL PADDING
Change the TABLE command in our HTML document to include the
CELLSPACING attribute as in (also change the border value back to "1"):
<TABLE BORDER="1" CELLSPACING="5">
The quotation marks around the value "5" are also optional. Now when
you load this document into your browser, you should see:
VOLUNTEER SCHEDULE
|
| 9 A.M.
| 12 P.M.
| 2 P.M.
|
| NURSERY
| John
| Mary
| Marcia
|
| SECURITY
| Kimberly
| George
| Ken
|
| TICKETS
| Jacob
| Nancy
| Adam
|
Note that CELLSPACING affects the amount of spacing between
cells. That is, the value in the CELLSPACING attribute indicates how many
pixels of white space there should be between individual cells. Try
different values for different effects. If you do not include a value,
the default cell spacing value is 2 pixels. Note: in some low level browsers,
the borders around adjacent cells will also be separated by the same
number of pixels. This means that the borders will not look continuous.
Tables will look their best in all browsers if you use a CELLSPACING
value of "0".
Now let's add the CELLPADDING attribute and change the cellspacing
attribute to "2". Change the TABLE command to:
<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="5">
and this is what you should see:
VOLUNTEER SCHEDULE
|
| 9 A.M.
| 12 P.M.
| 2 P.M.
|
| NURSERY
| John
| Mary
| Marcia
|
| SECURITY
| Kimberly
| George
| Ken
|
| TICKETS
| Jacob
| Nancy
| Adam
|
Problem 1: What do you think is the effect of adding the CELLPADDING attribute to
the TABLE tag? If you are unsure, just change the number 5 to a bigger
number.
| top | | bottom |
TABLE HEADINGS (<TH>) and the "WIDTH" ATTRIBUTE
The Table Header tag is often used when the cell's contents is a heading or
label. For example, in our table, The times (9 A.M., 12 P.M.,
2 P.M.) are headings for the columns, while NURSERY, SECURITY, and
TICKETS are headings for the rows. To indicate these items
as headings, you can use the Table
Header tag (<TH>) instead of
the Table Data tag (<TD>). A cell that contains a heading is
called a "Header Cell".
To see the effect of the header tag, change our HTML document to look
like the following (I also changed the BORDER to "3", the CELLSPACING
TO "0" and CELLPADDING to "3" - just so you can see the different effects
of these attribute values on the table):
- <HTML>
- <HEAD>
- <TITLE>VOLUNTEER SCHEDULE</TITLE>
- </HEAD>
<BODY>
<H3 ALIGN="CENTER">
<TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3">
<CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION>
<TR>
<TD>
<TH>9 A.M.
<TH>12 P.M.
<TH>2 P.M.
<TR>
<TH>NURSERY
<TD>John
<TD>Mary
<TD>Marcia
<TR>
<TH>SECURITY
<TD>Kimberly
<TD>George
<TD>Ken
<TR>
<TH>TICKETS
<TD>Jacob
<TD>Nancy
<TD>Adam
</TABLE></H3>
</BODY></HTML>
This is what your table should now look like:
VOLUNTEER SCHEDULE
|
| 9 A.M.
| 12 P.M.
| 2 P.M.
|
| NURSERY
| John
| Mary
| Marcia
|
| SECURITY
| Kimberly
| George
| Ken
|
| TICKETS
| Jacob
| Nancy
| Adam
|
Note the headings in the header cells are strongly emphasized (normally
in bold). For this reason I removed the STRONG tags from all the row and
column headings.
They became redundant. Note also that each heading is centered in its
cell (for example, note how the label TICKETS is centered in the cell). This will
become more noticeable in the next example. If you have
more than one row in a cell, the headings will also be centered vertically.
Now change the TABLE tag to include the WIDTH attribute. Change the
TABLE tag to:
<TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3" WIDTH="100%">
Now load the web page and this is what you should see:
VOLUNTEER SCHEDULE
|
| 9 A.M.
| 12 P.M.
| 2 P.M.
|
| NURSERY
| John
| Mary
| Marcia
|
| SECURITY
| Kimberly
| George
| Ken
|
| TICKETS
| Jacob
| Nancy
| Adam
|
The table has been expanded to the width of the browser screen (100
per cent of the width of the screen). If
this did not happen, then your browser does not recognize the WIDTH
attribute in this situation. Notice again that the headings are
emphasized and
centered but the data in the cells are not centered. You can use any
suitable percentage for the width or you can specify the width in
pixels. If your browser did not accept the WIDTH attribute in the
above example, try it again but specify the width in pixels this time.
For example, try WIDTH="600" (no %) and see what happens.
Specifying the width in pixels will give an exact width of the
table which can't be changed. Specifying the width as a percent of the
current screen is
preferred because the table will be expanded or compressed to fit
the width of the viewer's browser screen. Therefore using a percent
will allow the table to be changed if the window is resized. Using
pixels for the width means that if the viewer resizes the window
to something smaller than the width you have specified, the view
will not be able to see the entire table.
| top | | bottom |
CENTERING DATA
You can control the placement of data in the individual cells
by using the ALIGN attribute. For
example, let's center the name John, left justify the name Mary, and
right justify the name Marcia. Let's also center the entire SECURITY row
(Kimberly, George and Ken) by
placing the ALIGN attribute with the TR tag for this row. To do
this, change the following four sequential lines of our HTML
document (repeated here):
<TD>John
<TD>Mary
<TD>Marcia
<TR>
to the following:
<TD ALIGN="CENTER">John
<TD ALIGN="LEFT">Mary
<TD ALIGN="RIGHT">Marcia
<TR ALIGN="CENTER">
Now save the web page and load it into your browser. This is what you should
see:
VOLUNTEER SCHEDULE
|
| 9 A.M.
| 12 P.M.
| 2 P.M.
|
| NURSERY
| John
| Mary
| Marcia
|
| SECURITY
| Kimberly
| George
| Ken
|
| TICKETS
| Jacob
| Nancy
| Adam
|
Note that the name "John" was centered in the cell, "Mary" was aligned
to the left
side of the cell (which is the default position) and that "Marcia" was
aligned to the right side of the cell. Note also that the <TR
ALIGN="CENTER"> centered the contents of the entire row.
You can also control the width of any column. For example, let's
change the width of the first column to 40% of the browsers screen
width, the 9 A.M. column to 20% of the screen width, and the 12 P.M.
column to 10%. Change the first three cells in the first row to:
<TD WIDTH="40%">
<TH WIDTH="20%">9 A.M.
<TH WIDTH="10%">12 P.M.
Now save these changes and load the web page into your browser. This is
what you should see:
VOLUNTEER SCHEDULE
|
| 9 A.M.
| 12 P.M.
| 2 P.M.
|
| NURSERY
| John
| Mary
| Marcia
|
| SECURITY
| Kimberly
| George
| Ken
|
| TICKETS
| Jacob
| Nancy
| Adam
|
Note that the first column of headings has been expanded to 40% of the
width of the browser screen. The column with the heading 9 A.M. is
20% of the width of the screen and the 12 P.M. column has been shrunk
to only 10% of the screen width which may have forced the heading to
be printed over two lines (each line still centered). Again, if
percentages have no effect on the column spacing, try
specifying the width in pixels.
Problem 2: What is the width of the last column in the above table?
| top | | bottom |
USING <BR>, SINGLE CELL
TABLES, CELLS AS LINKS, CELL BACKGROUND COLORS
USING THE <BR> TAG and SINGLE CELL TABLES
If a cell becomes too long in relation to the appearance of other
cells, insert the <BR> tag. A cell can contain as many lines of
information as you want. For example, here is one cell from my main home page.
I removed the link as this is covered in the next section (each of my
cells is a link to a lesson).
LESSON SIX
Creating Page Links,
Link Buttons, E-mail
|
Here are the lines that make up this cell. Type in this new HTML
page and be sure to include the HTML, HEAD, TITLE and BODY elements.
<H3 ALIGN="CENTER">
<TABLE BORDER="3" CELLPADDING="3">
<TR>
<TD ALIGN="CENTER">LESSON SIX<BR>Creating Page Links,<BR>Link
Buttons, E-mail
</TABLE></H3>
Using a value of "1" for the TABLE attribute will give the best
looking border in low level browsers. Note that a single cell table
is a great way to place a box or frame
around something you want to emphasize or set apart. Notice the use
of <BR> tags to force line breaks at key points in the text.
USING THE CELL AS A LINK TO ANOTHER WEB PAGE
There is much that you can do with data cells. One is using
the cell as a link to another web page. Every cell in my home page
is a link to another page. So here is a problem for you
to solve:
Problem 3: Change the above TD line which is:
<TD ALIGN="CENTER">LESSON SIX<BR>Creating Page Links,<BR>Link Buttons,
E-mail
so that the entire cell becomes a
link to Lesson Six. The file name (URL)
for Lesson Six is "lesson6.htm".
ADDING A BACKGROUND COLOR TO ANY CELL
This section assumes that your browser supports background colors.
Problem 4: Now change your answer to Problem 3 to include a light
yellow background. Use "#FFFFCC" for the color code (taken from
the color table in Lesson Ten). Here is the cell with the light yellow
background:
Let's now try another problem:
Problem 5: The following table has a light yellow background in
each heading cell and in the empty cell. Change what is necessary
in the "VOLUNTEER SCHEDULE" HTML
document to make the table look like the following: (set the border to
3 pixels, cell spacing to 0 pixels and cell padding to 3 pixels. Also
use the same yellow color code as in the previous example.)
VOLUNTEER SCHEDULE
|
| 9 A.M.
| 12 P.M.
| 2 P.M.
|
| NURSERY
| John
| Mary
| Marcia
|
| SECURITY
| Kimberly
| George
| Ken
|
| TICKETS
| Jacob
| Nancy
| Adam
|
| top | | bottom |
PLACING AN IMAGE IN A CELL
To place an image in a cell, you follow the same rules as for placing an image
on a web page. The following example places a border 10 pixels wide around
an image which is placed in a single cell table and also makes the image
a link to my home page.
The BODY of the HTML document that gives this example is:
<H3 ALIGN="CENTER">
<TABLE BORDER="10" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD><A HREF="index.htm"><IMG SRC="cross1.gif" ALIGN="CENTER" ALT="cross" WIDTH="90" HEIGHT="120" BORDER="0"></A>
</TABLE></H3>
Experiment with different attribute values. Add some cell padding and
cell spacing. Place a border around the image as well as a border around
the table, or experiment with the ALIGN attribute as in ALIGN="RIGHT" and
ALIGN="LEFT"
or remove the ALIGN attribute altogether. You can learn a lot from
experimenting. For example, if
you do not want the image to be a link, just remove the anchor tags
and the HREF attribute as in:
<TD><IMG SRC="cross1.gif" ALIGN="CENTER" ALT="cross" WIDTH="90" HEIGHT="120" BORDER="0">
If you use images in a table, be sure to specify the WIDTH and HEIGHT
attributes in the IMG tag. This allows the browser to lay out the table
in advance, so it can draw the table and place the text above and below
the table before the image
is loaded. Not using the WIDTH and HEIGHT attributes can cause
unnecessary delays in displaying your web page.
| top | | bottom |
ANSWERS
- CELLPADDING indicates how many pixels of space there should be
between a cell's contents and the edges of the cell. Again, the quotation
marks around the value are optional.
- Since the percents of the first three columns add to 70 (40+20+10),
the width of the last column must be 100% - 70% = 30%.
- To turn a cell into a link, you need the anchor container element
(A) and the HREF attribute pointing
to the name and location where the cell is to link to. If the entire
cell is to be the link, the closing anchor tag (</A>) must be
placed at the end of the cell's contents. Since we want to
load Lesson Six, it is assumed to be in the current directory. The
TD line that answers the problem is:
<TD ALIGN="CENTER"><A HREF="lesson6.htm">LESSON SIX<BR>Creating
Page Links,<BR>Link Buttons, E-mail</A>
If you want to link to a website anywhere on the WWW, be sure the
HREF attribute contains the complete address (URL) of the website.
- BGCOLOR changes the background color. Up until now, we have assumed
that the BGCOLOR attribute belongs only to the BODY tag. Think of
each cell as being a separate entity - almost like a separate page.
Thus you have a lot of control over what goes into any cell. In this
example, the BGCOLOR is a TD attribute. Here is the line that will
give the desired light yellow background color:
<TD ALIGN="CENTER" BGCOLOR="#FFFFCC"><A
HREF="lesson6.htm">LESSON SIX<BR>Creating Page Links,<BR>Link Buttons, E-mail</A>
- To change the color for the entire first row in the table -
including the empty cell, add the BGCOLOR attribute to the TR tag.
Using BGCOLOR with TR changes the
background color of the entire row. To change the background color of
individual cells, you need to specify the BGCOLOR attribute in each of
those cells. So here is the body of the HTML document for this table:
<H3 ALIGN="CENTER">
<TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3" WIDTH="100%">
<CAPTION><STRONG>VOLUNTEER
SCHEDULE</STRONG></CAPTION>
<TR BGCOLOR="#FFFFCC">
<TD>
<TH>9 A.M.
<TH>12 P.M.
<TH>2 P.M.
<TR ALIGN="CENTER">
<TH BGCOLOR="#FFFFCC">NURSERY
<TD>John
<TD>Mary
<TD>Marcia
<TR ALIGN="CENTER">
<TH BGCOLOR="#FFFFCC">SECURITY
<TD>Kimberly
<TD>George
<TD>Ken
<TR ALIGN="CENTER">
<TH BGCOLOR="#FFFFCC">TICKETS
<TD>Jacob
<TD>Nancy
<TD>Adam
</TABLE></H3>
In the color table in Lesson Ten
I basically alternated one row of cells containing the codes with one
row of cells containing the colors of those codes using the BGCOLOR attribute.
The information contained in these free 21 lessons is Copyright ©, Brantford
Educational Services, 1997 - 2009 by local and international copyright laws.
All rights reserved. It is therefore illegal to copy these lessons into
another website. If you find a copyright violation, please report
it to htmltutorials@bfree.on.ca
