Leland Initiative Web Tutorial Series: Overview of Last Lesson In the previous lesson, we learned how to put images into a web page. I also showed how you can use an image as a hyperlink, thus giving visitors to your site useful graphical clues on how to navigate your site. Tables: What They Are and Why You Should Use Them Simply put, a table is a collection of rows and/or columns arranged in an orderly way. A table can have as many—or as few--rows or columns as you want. If you are have used a program like Lotus 123 or Excel, then you should already be familiar with "spreadsheets". An HTML table is much like a spreadsheet. Just like a spreadsheet, an HTML table is composed of "cells". Imagine a table with 3 rows and 3 columns. This table would have 9 cells—these cells are the 9 areas created by the intersections of the rows and columns (3 X 3=9). Likewise, a table with 5 rows and 5 columns would have 25 cells (5 X 5=25), a table with 6 rows and 2 columns would have 12 cells, and so forth. The most basic way to use a table in a web page is for presenting information (often numerical data) in an organized, easy-to-read fashion. For example, say you want to list the phone numbers and e-mail addresses for 3 of your organization’s staff members on a web page. Well, you could simply list the names for each staff member and put their phone numbers and e-mail addresses beside them, like so: Roger Marris—(e-mail: rmarris@mlb.org), (phone: 555-1212); Sammy Sosa—(e-mail: ssosa@mlb.org), (phone: 555-1213); Mark McGwire—(e-mail: mmcgwire@mlb.org), (phone: 555-1214) Listing the information this way does the job, but it’s not very easy to read. All the information tends to run together, and if you weren’t careful you might end up phoning Roger Marris when you really meant to call Sammy Sosa. A better way to present the information above would be to use a table. With a table you can put "headers" at the top of each column in order to indicate what kinds of information the columns contain. In this case, the headers would be "Staffer Name" in the first column, "E-Mail Address" in the second column, and "Phone Number" in the last column. The table would have visible "gridlines", which are simply the lines that make up the boundaries of the rows and columns. Since the information is arranged in rows and columns (making cells), and since gridlines separate these cells, the information contained within the table will be much easier to read. Don’t worry too much for now about how this table will look. Let’s just jump right in and create this very table on our sample web page. By the time we finish, you’ll have a good idea of just how useful tables can be for presenting information. Creating a Table Like all other objects in a web page, tables are created by using tags. The two HTML tags used to create a table are <table> and </table>. The <table> tags indicates the beginning of an HTML table, while the </table> signifies the end of the table. Pretty simple, huh? Well, it’s not quite that easy. You’ll also need place other tags between the <table> and </table> tags to let the web browser know how many columns and rows you want in the table. As with many other HTML tags, you can also specify other information about how you want the table appear (for example, how thick you want the lines in the table to be and how much space there is between the lines and the text contained within cells). And of course, you’ll also need to place with the table tags the information that you want to appear within the table itself (the staff names, e-mail addresses, and phone numbers). Let’s take a look at the HTML code used to create the table. For now, we’re going to just look at the code for the table itself—we’ll include this code in our sample web page after we finish looking at the table. Here’s the code for a table with 3 columns and 4 rows—we’ll add in the actual data later: <table border="1" cellpadding="5"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> Note that the table begins with the <table> tag. Within this tag, I have included an option that sets the size of the lines in the table (border="1") and an option that indicates the amount of space that will appear between the lines and the text within each cell (cellpadding="5"). If you want the table lines to appear "thicker", use a larger number after "border=" (for example, border="3"); if you want more space between text and the lines, use a larger number after "cellpadding=" (for example, cellpadding="10"). Next, you see the tag <tr>. This HTML tag stands for "table row" and it indicates the beginning of a row within the table. Note that there is also a </tr> tag 3 lines below the <tr> tag. The </tr> indicates the end of the table row. You must have a </tr> tag to match every <tr> tag, just as you also need a </table> for the <table> tag and a </td> tag for every <td> tag. If you didn’t use a </tr> tag for that first <tr> tag, then your web browser would not know to "turn off" that first row, and this table would simply be one long row of information rather than 4 separate rows. Next, you’ll see the <td> tag with a </td> directly after it. The <td> tag stands for "table data". As the name implies, the information that will be presented in the table goes between the <td> and </td> tags. Right now, there is nothing between the <td> and </td> tags—we’ll add that in shortly. For now, just be aware that each pair of <td> and </td> tags represents a "cell" of information within a row. Since there are 3 pairs of these tags between the <tr> and </tr> tags, there will also be 3 cells that appear in that first row, and each cell will contain a piece of information that we want to present. Let’s put in the first row of information to show how this works. You’ll want the first row in the table to indicate what information is below—in other words, the first row will simply consist of labels for each column. In the case of our example staffer list, the first column should be labeled as "Staffer Name", the second as "E-Mail Address", and the third as "Phone Number". Once we put these labels into the first row, the HTML code for the table looks like this: <table border="1" cellpadding="5"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> Note that the table begins with the <table> tag. Within this tag, I have included an option that sets the size of the lines in the table (border="1") and an option that indicates the amount of space that will appear between the lines and the text within each cell (cellpadding="5"). If you want the table lines to appear "thicker", use a larger number after "border=" (for example, border="3"); if you want more space between text and the lines, use a larger number after "cellpadding=" (for example, cellpadding="10"). Next, you see the tag <tr>. This HTML tag stands for "table row" and it indicates the beginning of a row within the table. Note that there is also a </tr> tag 3 lines below the <tr> tag. The </tr> indicates the end of the table row. You must have a </tr> tag to match every <tr> tag, just as you also need a </table> for the <table> tag and a </td> tag for every <td> tag. If you didn’t use a </tr> tag for that first <tr> tag, then your web browser would not know to "turn off" that first row, and this table would simply be one long row of information rather than 4 separate rows. Next, you’ll see the <td> tag with a </td> directly after it. The <td> tag stands for "table data". As the name implies, the information that will be presented in the table goes between the <td> and </td> tags. Right now, there is nothing between the <td> and </td> tags—we’ll add that in shortly. For now, just be aware that each pair of <td> and </td> tags represents a "cell" of information within a row. Since there are 3 pairs of these tags between the <tr> and </tr> tags, there will also be 3 cells that appear in that first row, and each cell will contain a piece of information that we want to present. Let’s put in the first row of information to show how this works. You’ll want the first row in the table to indicate what information is below—in other words, the first row will simply consist of labels for each column. In the case of our example staffer list, the first column should be labeled as "Staffer Name", the second as "E-Mail Address", and the third as "Phone Number". You’ll also want those labels to stand out from the rest of the table, so we’ll also add in HTML code to make the text bold. Once we put these labels into the first row, the HTML code for the table looks like this: <table border="1" cellpadding="5"> <tr> <td><bold>Staffer Name</bold></td> <td><bold>E-Mail Address</bold></td> <td><bold>Phone Number</bold></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> See how it works step-by-step?
To complete the table, we’ll add in the information to the second, third, and fourth rows (one row for each staffer). Now the HTML code for the table looks like this: <table border="1" cellpadding="5"> <tr> <td><bold>Staffer Name</bold></td> <td><bold>E-Mail Address</bold></td> <td><bold>Phone Number</bold></td> </tr> <tr> <td> Roger Marris</td> <td> rmarris@mlb.org</td> <td>555-1212</td> </tr> <tr> <td>Sammy Sosa</td> <td>ssosa@mlb.org</td> <td>555-1213</td> </tr> <tr> <td>Mark McGwire</td> <td>mmcgwire@mlb.org</td> <td>555-1214</td> </tr> </table> Now that the table is finished, adding it to our sample web page is simple. All you need to do is put the code above into the web page where you want the table to appear. Let's put the table at the bottom of the page--I'll also add a line of text before the table to inform readers what the table is: <html> <head> <title>USAID Mock Homepage</title> </head> <body> <a href="http://www.info.usaid.gov"><center><img src="images/logo.gif"></center></a> <a name="top"><h1><center>US Agency for International Development</center></h1></a> Thank you for visiting the US Agency for International Development’s (USAID) fake web site. <p>USAID is currently involved in a number of development projects worldwide. One example is the Agency’s Leland Initiative. The Leland Initiative is designed to foster increased Internet access and use in about twenty African countries. One way the Initiative is trying to do this is by conducting an HTML "How To" online tutorial via the Leland Initiative listserv. You can find out more about this project by visiting the <a href="http://www.info.usaid.gov/regions/afr/leland/index.htm">Leland Initiative Homepage</a>. Or, if you’d rather write, please send correspondence to the following snail mail address: <p align="center">Jeff Bland<br> 111 Anywhere Street<br> Anywhere, USA 00000</p> <p align="left">Below are e-mail addresses and phone numbers for some of our staff members:</p> <table border="1" cellpadding="5"> <tr> <td><bold>Staffer Name</bold></td> <td><bold>E-Mail Address</bold></td> <td><bold>Phone Number</bold></td> </tr> <tr> <td> Roger Marris</td> <td> rmarris@mlb.org</td> <td>555-1212</td> </tr> <tr> <td>Sammy Sosa</td> <td>ssosa@mlb.org</td> <td>555-1213</td> </tr> <tr> <td>Mark McGwire</td> <td>mmcgwire@mlb.org</td> <td>555-1214</td> </tr> </table> <p><bold><center><a href="default.htm#top">Back to Top</a></center></bold> </body> </html> Using Tables for Web Page Layout While using tables to present information can be very useful, web designers quickly found another use for the tables feature--controlling the layout of elements within a web page. Following is an explanation of how you can use tables to do this. First, realize that you can control how thick a table's lines are. In the example we used above, the table's border was set to "1" (the table tag reads <table border="1" cellpadding="5">). You could set the border size to "5", in which case the lines of the table would be very thick indeed. On the other hand, you can also set the border size to "0", in which case the table's lines are invisible. You may be asking yourself, "Why place an invisible table on a web page then?" Well, the answer to this question lies in the fact that web pages can become very complicated. So far, our sample web site is fairly simply. It has one graphic, several paragraphs of text, a few hyperlinks, and a table. As you build more complex web pages--say, one with 6 graphics, 4 or 5 tables, and numerous paragraphs--getting the page to appear neat and orderly becomes much more challenging. You can control more precisely where elements of a page are placed by using an invisible table. You simply create a table with a border size of "0" and put the individual elements of the page within appropriate table cells. When the user looks at your page in the web browser, the table will not be visible, but everything will be lined up neatly because the table is forcing the elements into straight rows and columns. Let's use the sample page to illustrate. Instead of having the table of staffer names at the bottom, let's make it so that table appears directly to the right of my name and address. Well do this by using an invisible table. The HTML code for the parts we want to follow appear below. Note that I have enclosed the code within new <table> tags: <table border=0> <tr> <td> <p align="center">Jeff Bland<br> 111 Anywhere Street<br> Anywhere, USA 00000</p> </td> <td> <p align="left">Below are e-mail addresses and phone numbers for some of our staff members:</p> <table border="1" cellpadding="5"> <tr> <td><bold>Staffer Name</bold></td> <td><bold>E-Mail Address</bold></td> <td><bold>Phone Number</bold></td> </tr> <tr> <td> Roger Marris</td> <td> rmarris@mlb.org</td> <td>555-1212</td> </tr> <tr> <td>Sammy Sosa</td> <td>ssosa@mlb.org</td> <td>555-1213</td> </tr> <tr> <td>Mark McGwire</td> <td>mmcgwire@mlb.org</td> <td>555-1214</td> </tr> </table> </td> </tr> </table> Note that the invisible table we created has 1 row (started by the <tr> tag) consisting of 2 columns (each started with the <td> tag). The first column contains my address information, and the second column contains the table of staffer information. The important thing to realize here is that table cells can contain other tables. Tables contained within other tables are called "nested tables" in HTML terminology. When you look at the page in your web browser now, the information will be lined up neatly into two columns. You can also use this technique to create text arranged in "newspaper columns." In fact, with a little creativity, you can use invisible tables to arrange the layout of your web page into almost any form you can think of. This session has already gone on too long, so I can't really spend more time on this. Experiment on your own a little and use the related hyperlinks below to find out more. Below is the HTML code for our sample page as it is now--note that I have added a few extra changes to improve its appearance (such as adding "cellpadding="10"" to the invisible table). The sample page is also attached for your use: <table border=0 cellpadding="10") <tr> <td valign="top"> <p align="center">Jeff Bland<br> 111 Anywhere Street<br> Anywhere, USA 00000</p> </td> <td> <p align="left">Below are e-mail addresses and phone numbers for some of our staff members:</p> <table border="1" cellpadding="5"> <tr> <td><bold>Staffer Name</bold></td> <td><bold>E-Mail Address</bold></td> <td><bold>Phone Number</bold></td> </tr> <tr> <td> Roger Marris</td> <td> rmarris@mlb.org</td> <td>555-1212</td> </tr> <tr> <td>Sammy Sosa</td> <td>ssosa@mlb.org</td> <td>555-1213</td> </tr> <tr> <td>Mark McGwire</td> <td>mmcgwire@mlb.org</td> <td>555-1214</td> </tr> </table> </td> </tr> </table> <p><bold><center><a href="default.htm#top">Back to Top</a></center></bold> </body> </html> Related Web Sites As usual, here are more web sites that can help you out:
Next Session Well, we've covered pretty much all the basics now. In the next session, I'll touch on some of the more advanced features of HTML, such as creating lists, using forms, and adding frames. Each of these will be too complex to explain in detail, so I'll just introduce you to what they do--you'll need to use the related sites list for more information. Lesson 6 | Table of Contents | Lesson 8 This series was developed for USAID’s Leland Initiative by the Research and Reference Services Project (operated by the Academy for Educational Development). |