Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Organizing Information with Tables
Document related concepts
no text concepts found
Transcript
Advanced Web Authoring I: Organizing Information with Tables Written by Kevin Treu for the Furman-Wofford Mellon Advanced Workshop Overview: In our profession we frequently find it helpful to organize data in tabular form—grades information, economic statistics, etc. Accordingly, a potentially useful tool is the HTML table facility. As we will see, tables can also be used to organize/design the artistic content of Web pages. A convenient way for presenting data of all kinds is in tabular form. This includes not only numerical figures but images and text as well. The Hypertext Mark-up Language (HTML) offers an appealing way to present such data on a Web page, using the <table> tag. Web tables can be created in one of four ways: using raw HTML, using a Web editor, using a program which converts data from one form (such as a spreadsheet or word processor file) into HTML, or using a Web-based table generator. We'll explore some of these options today, and leave the rest as opportunities for further experimentation. 1. Creating tables using HTML Class-related idea: Advertising your grading scale to your students. To create our first table, we'll have to begin with a Web page. You can either use an existing page of yours, or you can write a new one. a. Use your chosen editor to either open an existing .htm file or to create a new one. If you are creating a new one, simply use the following HTML code: <html> <head><title>Table Test Page</title></head> <body> <h1>A Table Example</h1> </body> </html> The tags used for creating tables are really quite simple once you get the hang of them. They are: <table>, </table> <th> <tr> <td> — indicate the beginning and ending of a table — indicate the beginning of a table header — indicate the beginning of a table row — indicate the beginning of an item of table data b. To begin, insert the <table> tags between the <body> tags on your page. Between the <table> tags insert your header information, like this: <table> <th>Percentage <th>Grade </table> 1998 Mellon Advanced Seminar page 2 c. Now leave the editor and start Netscape. Use Open File to take a look at your page so far. (Remember that you can keep both the editor and Netscape running at once, flipping back and forth using the Alt-Tab key combination.) Notice that you don't seem to have accomplished much yet—just two bold words on the page. This is because no border for the table has been set yet. d. Return to the editor to add a border. Do so by specifying a border width inside the <table> tag, as follows: <table border=3> Then check the results using Netscape. Experiment with different border widths to find one that appeals to you. e. Begin adding data. To do this, simply indicate when a new row is to begin, and then specify the data to go in that row. You must take care to enter the right number of data items per row, making sure that it's the same as the number of column headers you have specified. For example: <tr> <td>97-100 <td>A+ <tr> <td>93-96 <td> A <tr> <td>90-92 <td> A<tr> <td>87-89> <td>B+ ... Once again, use Netscape to note the changes. Non-standard table structure Your table does not always have to be a standard two-dimensional grid of data items. If you would like one cell to span multiple rows or columns of the table, you can do it in HTML. Suppose you have eschewed the plus-minus system, and want to emphasize it in your grade table by listing all of the ranges (e.g., 97-100, 93-96, 90-92, etc.) but a single grade for each. f. Do this by modifying your HTML to read: <table border=3> <th>Percentage <th>Grade <tr> <td>97-100 <td rowspan=3>A <tr> <td>93-96 <tr> <td>90-92 <tr> 1998 Mellon Advanced Seminar page 3 <td>87-89 <td rowspan=3>B <tr> <td>83-86 ... </table> Note that the directive colspan also exists and works in analagous fashion. When using these, you must take care not to include data in places where you have already specified a data cell using rowspan or colspan previously. Tidying up There are a number of additional features of tables which allow you to design them to your tastes. For instance, tables can be centered on the page. In addition, you can align individual data items and format them using italics, bold characters, etc. g. Center the table by enclosing it entirely within <center>...</center> tags. h. Center the data items by including the directive align=center within the <td> tags, as follows: ... <tr> <td align=center>97-100 <td rowspan=3 align=center>A <tr> <td align=center>93-96 ... Three additional table directives permit additional modifications. cellpadding allows you to put some space around your data. cellspacing specifies the width of the separators between cells. Finally, width specifies the percentage of a Web page that will be taken up by your table. Each of these directives is placed within the <table> tag. i. Incorporate these directives, for example <table border=3 cellpadding=6 cellspacing=5 width=50%> and consider how they change the table. A caption can be added above or below your table by simply using the <caption>...</caption> tags. 2. Creating a table from a spreadsheet Class-related idea: Posting of up-to-date grades from a spreadsheet One method for creating Web pages that is growing in effectiveness with each new generation of tools is the use of HTML converters. These specialized programs 1998 Mellon Advanced Seminar page 4 allow users to take documents in one form (e.g., word processing, spreadsheet) and translate them automatically into HTML. Though such converters can be very useful tools, it must be stressed that they typically produce only the simplest of HTML code. While they are effective as a starting point for page creation, they are no substitute (yet) for knowing the basics of HTML. One effective converter has been installed on the PCs in Riley 202. It will take any specified cells of a Microsoft Excel spreadsheet and turn them into an HTML table like the one we've created above. With a suitable scheme for ensuring anonymity—such as using social security numbers in place of student names—current course grades can be posted regularly to a course-related Web site quite easily. a. Either open up an Excel spreadsheet that you brought on disk, or briefly create a new one to use. b. Highlight the cells you wish to make into a table. c. Click once on the yellow "smiley-face" icon in the upper right-hand corner of the Excel tool bar. (This icon may actually be off the screen on your machine. It is just to the right of the Help button.) d. Answer the subsequent questions as they are asked. When you are finished, quit Excel and go to Netscape. Use the Open File command (in the File menu) to open your new HTML file and see the result. Note that you can use Notepad or another HTML editor at this point to re-edit the table you have created to make it look more appealing. 3. Other ideas for using tables In short, the data that is displayed in the cells of a table need not be just numbers and/or text. Images can be incorporated using the img tag. Often tables are created with a single data item—a picture—thus creating the effect of a "framed" image. a. If you'd like to try this out, find and download a suitable image from the Web. If the image's file name is picture.jpg, you could display it with a frame using the HTML code: <table border=6 cellpadding=3 cellspacing=0> <tr> <td><img src="picture.jpg"> </table> Data items can also be hyperlinks to other Web pages. You need only use the <a href="URL">...</a> tags. Tables and hyperlinks (and possibly clickable images) can be combined to create an effective table of contents page for a Web site. Rather than simply list links down a page, they can be organized into a table. Another way to make table creation easy 1998 Mellon Advanced Seminar page 5 The Web site (http://www.missouri.edu/~c588349/tablemaker.html) provides a painless way to create the HTML code for a table. You may find it convenient to check it out. Finally, the Web editor you have chosen to use may have a table-making facility built into it. This is another alternative which may make your task in building a table quite easy.
