Tables

Many times information appears better and more orderly when placed inside a table. At this point, tables are a matter of choice. They look good in Netscape and Microsoft's Internet Explorer, but text based browsers such as lynx will not use them and places all of the words one right after the other. Tables can also be used as a work around on getting your page to look more like you want it. For example, this page is a table using three columns. The first column has the buttons for the Creation Web Page. The second column is just a clear graphic used as a spacer and the third column contains all of my text.

<TABLE BORDER=#></TABLE>

This is your basic code for tables and will surround all other commands. BORDER=# within the first code indicates what size you want your border to be in pixels. For a normal looking border, replace # with 3 or 5. For a thick border, you might replace # with 10 or higher. When you're using tables as a "page layout" device, replace # with 0 to have no border around the table.

Inside your <TABLE> codes, you can use bold text, breaks, lists, and even nested tables if you so choose. Be sure to include the closing </TABLE> code when you are done. If you want your table to be centered on the page, you can place <CENTER> before the <TABLE> code and </CENTER> after the </TABLE> code.

Defining table rows and data

Your basic comands between <TABLE> and </TABLE> will be definining the table rows- <TR> and </TR> and defining table columns and data- <TD> and </TD>. Here's an example of what a table in your Notepad file would look like:

</TABLE>

To see how the example table would look like in Netscape, click here.

It's a good idea to draw out your table before you start typing in Notepad. Keeping everything straight may become confusing if you don't. Let's look at <TR> and <TD> in detail.

<TR></TR>

In our example, everything between the first set of <TR></TR> will appear on the first row of the table. Likewise, everything between the second set of <TR></TR> will appear in the second row of the table. Your <TR> codes are simply defining how many rows you will have in your table. If you want five rows, you will have five sets of <TR></TR>'s.

<TD></TD>

These codes indicate data to be put in each column of the row. In our example we had two sets of <TD></TD> inbetween each set of row codes. This told Netscape to make two columns in that row. If only one set of <TD></TD> had appeared between the row defining codes, only one column would be displayed. In between your <TD> codes is where you will put your lists, centers, and bolds. Here's a more detailed example.

<TR>
<TD><B>Greek Organizations</B></TD>
<TD><B>Some of the Honor Societies</B></TD>
</TR>

<TR>
<TD>
Fraternities
<UL>
<LI>Phi Delta Theta
<LI>Sigma Tau Gamma
</UL>
Sororities
<UL>
<LI>Sigma Sigma Sigma
<LI>Alpha Phi
<LI>Alpha Kappa Alpha
</UL>
</TD>

<TD>
<UL> <LI>Phi Kappa Phi
<LI>Phi Alpha Theta
<LI>Phi Sigma Iota
<LI>Phi Eta Sigma
<LI>Sigma Tau Delta
<LI>Phi Kappa Delta
</UL>
</TD>

</TR>

</TABLE>

To see how the above example would look in Netscape, click here.

Now many people might be satisfied with these basic commands and you will be able to manipulate most of your tables using just the simple <TABLE> <TR> and <TD> codes. But what do you do if you only want one column on your first row and two in the remaining rows?

<TD> Expansions

COLSPAN: Example: <TD COLSPAN=2>. COLSPAN indicates how many columns this data should span across. A table implementing COLSPAN in the first <TD> code appears below.
ROWSPAN: Example: <TD ROWSPAN=2>. ROWSPAN indicates how many rows this data should span across. A table implementing ROWSPAN in the second <TD> code appears below.
ALIGN: Example: <TD ALIGN=right>. ALIGN will let you set the justification of a cell to left, center, or right. A table implementing ALIGN in the third <TD> code appears below.

Heading of Table using COLSPAN=2 and ALIGN=center
Cell Information using ROWSPAN=2	Cell Information using ALIGN=right
	Cell Information with default alignment

VALIGN: Example: <TD ALIGN=top>. VALIGN lets you set the vertical alignment of a cell to top, middle, or bottom with the default being middle. If you noticed in the example of the greeks and honor societies, the honor societies were centered in the cell rather than lined up at the top with the greeks. By inserting a VALIGN=top, we could have fixed that. A sample of a table implementing VALIGN's would look like the following:

Here are some examples of VALIGN

VALIGN=top

VALIGN=middle

VALIGN=bottom

It is possible to combine several of these extensions in one <TD> code. For example you might have a code that looked like

<TABLE> Extensions

CELLPADDING: Example: <TABLE BORDER=3 CELLPADDING=5>. CELLPADDING gives you a little more space between the border of the cell and the contents of the cell. Netscape gives tables a default padding of 1 pixel. I find that I prefer a padding of around 3 or 5.
WIDTH: Example <TABLE BORDER=3 WIDTH=300>. Netscape sizes tables based on the table's contents and the window size of Netscape. Lines of text are wrapped accordingly. Sometimes your content may be very short (i.e. only three words in a cell. An example would be the tables I use for forward and back at the end of each question in this tutorial). However, you may wish that your table be larger. You can specify an exact width in pixels. Choosing this option ignores the window size and the user may have to scroll over to see all of your table. If you want your table to look exactly like you see it on your screen, however, that is the route to go.
You can specify widths in percentage as well though. I specify most of my tables as 80% of the width of the window. (i.e. <TABLE BORDER=3 WIDTH=80%> This allows the table to remain inside the user's window but also gives you some control over the size of the table rather than Netscape's sizing it according to content.

Return to Menu

Page maintained by Julie A. Duncan, ITS
Cameron University, Lawton Oklahoma