This web page created by Kathleen M. Weber on February 4th, 1998.
Tables work a lot like HTML list tags, in that you must use the table container tag to hold together a group of tags that define each individual row. The main container is the <TABLE> tag, which uses enclosing tags for table rows (<TR>) and table data (<TD>). Most tables will also use a tag for table headers (<TH>) which is generally used as the title text for rows and columns.
Tables take the following format:
<TABLE>
<CAPTION>Caption text for table</CAPTION>
<TR><TH>column1</TH><TH>column2</TH><TH>column3</TH>
<TR><TD>row1data1</TD><TD>row1data2</TD><TD>row1data3</TD>
<TR><TD>row2data1</TD><TD>row2data2</TD><TD>row2data3</TD>
...
</TABLE>
An example of a table using this format might be the following:
<TABLE>
<CAPTION>Team Members for 3-Person Basketball</CAPTION>
<TR><TH>Blue Team</TH><TH>Red Team</TH><TH>Green Team</TH>
<TR><TD>Mike R.</TD><TD>Leslie M.</TD><TD>Rick G.</TD>
<TR><TD>Julie M.</TD><TD>Walter R.</TD><TD>Dale W.</TD>
<TR><TD>Bill H.</TD><TD>Jenny Q.</TD><TD>Fred B.</TD>
</TABLE>
After you've worked on HTML List containers, it's a snap to make the jump to creating tables. You can see how this table looks in Figure 1.
The <TABLE> tag is somewhat complex, since it can accept many different attributes. Here are some of the most useful of the table attributes as they currently stand:
| ALIGN | The ALIGN attribute is used to determine where the chart will appear relative to the browser window. Valid values are ALIGN=LEFT and ALIGN=RIGHT. As an added bonus, text will wrap around the table (if it's narrow enough) when the ALIGN=LEFT or ALIGN=RIGHT attributes are used. |
| WIDTH | The WIDTH attribute sets the relative or absolute width of your table in the browser window. Values can be either percentages, as in WIDTH="50%", or absolute values. With absolute values, you must also include a suffix that defines the units used, as in px for pixels or in for inches (e.g., WIDTH="3.5in"). Absolute values for table widths are discouraged, though. |
| COLS | The COLS attribute specifies the number of columns in your table, allowing the browser to draw the table as it downloads. |
| BORDER | The BORDER attribute defines the width of the outside border surrounding the table. Default value is 1 (pixel). |
| CELLSPACING | The CELLSPACING attribute tells the browser how much space to include in between the walls of the table and in between individual cells. (Value is a number in pixels.) |
| CELLPADDING | The CELLPADDING attribute tells the browser how much space to give data elements in the cell from the walls of the cell. (Value is a number in pixels.) |
It is definitely not necessary to use all of these attributes for your table. The example earlier didn't use any of them. However, they will come in handy and even be necessary on many occasions!
This is another example. Look at the difference between a plain table and a table embellished with a few attributes. Try inserting Listing 1 (below) in a new HTML document and view it with your browser.
Listing 1 badtable.html Creating a Plain Table
<BODY>
<H2> BigCorp's Computer Systems </H2>
<P>We use only the highest quality components and software for all of our
Wintel computer systems. Plus, if you don't see a configuration you like,
call (or email) and let us know. We'll custom build to please!</P>
<TABLE>
<CAPTION>BigCorp's Computer Systems and Specifications</CAPTION>
<TR><TH>System 486</TH><TH>System 586</TH><TH>System 686</TH>
<TR><TD>486DX2-66 CPU</TD><TD>120 MHZ AMD586</TD><TD>200 Mhz Pentium Pro</TD>
<TR><TD>8 MB RAM</TD><TD>16 MB RAM</TD><TD>16 MB RAM</TD>
<TR><TD>500 MB HD</TD><TD>1 GB HD</TD><TD>1.4 GB HD</TD>
<TR><TD>14.4 Modem</TD><TD>28.8 Modem</TD><TD>28.8 Modem</TD>
<TR><TD>desktop case</TD><TD>minitower case</TD><TD>tower case</TD>
<TR><TD>DOS/Win 3.1</TD><TD>Windows 95</TD><TD>Windows NT 4.0</TD>
</TABLE>
</BODY>
Figure 2 shows how this table without attributes looks in a browser. This kind of table can still be difficult to read.
Earlier we tried a simple table, and it served its purpose of giving data fairly well. This table has everything lined up so poorly that it doesn't do a good job of being very effective. Using just the attributes mentioned above, you can change this table to look better, easier to read, and more effective in communicating its data to the user.
All that needs to change is the first <TABLE> tag:
<TABLE BORDER ALIGN="LEFT" CELLSPACING="3" CELLPADDING="3">
That makes for a much nicer looking table, complete with borders and lines for cells, and a comfortable amount of spacing to separate cell data elements from one another.
Figure 3 shows how nice the table looks with spacing and borders.
The rest of this example is up to you. Play with CELLSPACING and CELLPADDING without a border, for instance, or increase all values out of proportion. See the range of what's available, to help you choose how to format your tables in the future.
To round out your tables, you have the other basic tags to examine. You've already successfully used <CAPTION>, <TH>, and <TD>, but each has its own attributes and abilities that you need to know about.
The <CAPTION> tag is a container for reasons that may be obvious, it allows you to nest other HTML tags within the description. For instance:
<CAPTION><B>Table 3.1 from the book <I>Life in El Salvador</I></B></CAPTION>
Just about any sort of markup tags are possible inside the <CAPTION> tags, although some (like List tags) wouldn't make much sense.
The <CAPTION> tag has one attribute, ALIGN. ALIGN="TOP" and ALIGN="BOTTOM" are encouraged. By default, text is also aligned to center (horizontally). By TOP and BOTTOM, I'm referring to the entire table; the caption will default to the top of the table if not otherwise specified. To align the caption to BOTTOM, for instance, enter the following:
<CAPTION ALIGN="BOTTOM">Table of Common Foods</CAPTION>
The <CAPTION> tag is commonly the first tag just inside the <TABLE> tag (although this placement is not required). Regardless of where you place the <CAPTION> tag, however, you must use ALIGN to force it to the bottom of the table. Otherwise, it will appear at the top, according to its default.
Let's create an entire table and use the ALIGN attribute to the <CAPTION> tag to force the caption to the bottom, like this:
<BODY>
<H3>Favorite Ice Cream Flavors</H2>
<TABLE BORDER>
<CAPTION ALIGN="BOTTOM">Data from the <I>New Jersey Times</I></CAPTION>
<TR><TH>Date</TH><TH>Chocolate</TH><TH>Vanilla</TH>
<TR><TH>1970</TH><TD>50%</TD><TD>50%</TD>
<TR><TH>1980</TH><TD>76%</TD><TD>24%</TD>
<TR><TH>1990</TH><TD>40%</TD><TD>60%</TD>
</TABLE>
</BODY>
When the browser interprets this table, it should place the caption at the bottom of the table, centered horizontally, as illustrated in Figure 4.
Table rows (<TR>) can accept one attribute you should concern yourself with-ALIGN. The ALIGN attribute is used to determine how text will appear (horizontally) in each of the rows data cells. For instance:
<TR ALIGN="CENTER"><TH>Date</TH><TH>Chocolate</TH><TH>Vanilla</TH>
<TR ALIGN="CENTER"><TH>1970</TH><TD>50%</TD><TD>50%</TD>
<TR ALIGN="CENTER"><TH>1980</TH><TD>76%</TD><TD>24%</TD>
<TR ALIGN="CENTER"><TH>1990</TH><TD>40%</TD><TD>60%</TD>
Here, I've added the ALIGN attribute (with a value of CENTER) to the rows in the previous example. Notice now that all cells center data horizontally (see fig. 15.5). This ALIGN attribute can also accept LEFT and RIGHT.
Figure 5 uses the ALIGN attribute
with <TR>. Compare this to Figure 4. Doesn't this seem better laid out to you?
More importantly, will it be better for the person viewing your table?
You've already used the <TH> and <TD> tags to include headers and data in your tables. You may have noticed that, essentially, the only difference between the two is that <TH> emphasizes (boldfaces) the text and <TD> does not. Now, technically, the <TH> is a tag that the browser interprets as a header and thus displays text in a way that's distinct from the <TD> tag. In practice, that generally means it's turned bold.
Aside from accepting nearly any type of HTML markup tags within them, both tags can accept four attributes (in most HTML versions). These are ALIGN, VALIGN, COLSPAN, and ROWSPAN. If you were to add all of these attributes, a typical <TH> (or <TD>) tag would be formatted like the following:
<TH ALIGN="direction" VALIGN="direction" COLSPAN="number" ROWSPAN="italics">
ALIGN is used to align the data within the cell horizontally, accepting values of LEFT, RIGHT, and CENTER. Note that ALIGN is redundant when used with the ALIGN attribute of <TR>, unless it is used to override the <TR ALIGN=> setting.
VALIGN is used to align the data vertically within cells. Possible values are TOP, BOTTOM, and CENTER. COLSPAN and ROWSPAN are used to force a cell to span more than one column or row, respectively. An example of this might be:
<TABLE BORDER>
<TR><TH>Student</TH><TH>Test 1</TH><TH>Test 2</TH><TH>Average</TH>
<TR><TH>Mike M.</TH><TD>100</TD><TD>75</TD><TD ROWSPAN="3">N/A</TD>
<TR><TH>Susan T.</TH><TD>80</TD><TD>95</TD>
<TR><TH>Bill Y.</TH><TD COLSPAN="2">Dropped Course</TD>
</TABLE>
Viewed in a browser, the table looks like Figure 6.
One interesting way to use a table is to create a calendar, which is possible with what we now know about attributes for tables and table elements. Let's create a calendar for November 1996. We'll also throw in some hypertext links that would (presumably) be used to discuss events planned for those days. Enter Listing 2 in a new HTML document.
Listing 2 calendar.html Using HTML Tables to Create a Calendar
<BODY>
<H2>Coming Events</H2>
<P>Click any of the days highlighted in the calendar to read about the event scheduled for that day.</P>
<TABLE BORDER WIDTH="75%">
<CAPTION>BigCorp's Calendar of Events - November 1996</CAPTION>
<TR ALIGN="CENTER"><TH>Sun</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH><TH>Thu</TH>
<TH>Fri</TH><TH>Sat</TH>
<TR ALIGN="CENTER"><TD COLSPAN="5"> </TD><TD>1</TD><TD>2</TD>
<TR ALIGN="CENTER"><TD>3</TD><TD>4</TD><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD>
<TD>9</TD>
<TR ALIGN="CENTER"><TD>10</TD><TD><A
HREF="nov11.html">11</A></TD><TD>12</TD><TD>13</TD><TD><A
HREF="nov14.html">14</A></TD><TD>15</TD><TD>16</TD>
<TR ALIGN="CENTER"><TD><A HREF="nov17.html">17</A></TD><TD>18</TD><TD>19</TD>
<TD><A HREF="nov20.html">20</A></TD><TD>21</TD><TD>22</TD><TD>23</TD>
<TR ALIGN="CENTER"><TD>24</TD><TD>25</TD><TD>26</TD><TD>28</TD><TD>29</TD><TD>
30</TD><TD>31</TD>
</TABLE>
</BODY>
Notice the in the <TD> tag that is defined with COLSPAN? That is an escape sequence for Web browsers that tells it "I want a non line-breaking space here." Without that, the extra-long cell won't be rendered correctly (with a complete border) because there's nothing in that cell. With it, this table looks like the calendar in Figure 7.
One thing that hasn't really been touched on so far is the possibility of including images in tables. It's definitely possible, and just about as easy as anything else you've done with tables.
In this example, let's create a product specifications table for a couple of our company's computer systems. With liberal use of the ALIGN and VALIGN attributes, this should come out looking rather pretty. Insert Listing 3 in a new HTML document.
Listing 3 aligntbl.html Using ALIGN and VALIGN with Images in an HTML Table
<BODY>
<H2>Product Specifications</H2>
<P>The following table will tell you a little more about our computer
systems. Clicking on the name of each system will tell you even more,
offering a full-size photo of the system and some suggestions on
peripherals.</P>
<HR>
<TABLE BORDER CELLSPACING="2" CELLPADDING="2">
<CAPTION>Our System Configurations</CAPTION>
<TR ALIGN="CENTER"><TH>Photo</TH><TH>Name</TH><TH>RAM</TH><TH>Hard
Drive</TH><TH>Video</TH><TH>Expansion</TH><TH>Case</TH>
<TR ALIGN="CENTER"><TD><IMG SRC="sml_6001.GIF"></TD><TD><A HREF="6001.html">
System 6001-60</A></TD><TD>8 MB</TD><TD>500 MB</TD><TD>1 MB PCI</TD><TD>4 PCI
Slots</TD><TD ROWSPAN="2">Desktop</TD>
<TR ALIGN="CENTER"><TD><IMG SRC="sml_7001.GIF"></TD><TD><A HREF="7001.html">
System 7001-75</A></TD><TD>16 MB</TD><TD>1.0 GB</TD><TD>1 MB PCI
</TD><TD>5 PCI
Slots</TD>
<TR ALIGN="CENTER"><TD><IMG SRC="sml_8001.GIF"></TD><TD><A HREF="8001.html">
System 8001-120</A></TD><TD>20 MB</TD><TD>1.6 GB</TD><TD>2 MB PCI
</TD><TD>5 PCI
Slots</TD><TD>Tower</TD>
</TABLE>
</BODY>
Graphics look very nice in tables, and they help to make it more pleasing for the user to get through and comprehend complex, and sometime heavy amounts of information (like computer specs).
Figure 8 shows how the table above offers just such a very complete custom HTML table.
Tomorrow's Study Tips: Music and Sound on a Web Page
This web page created by Kathleen M. Weber on February 4th, 1998.
