In the previous chapter of this tutorial, we created a functional main page of your site. In this chapter, you will learn how to how to use tables to display your data. Even if you do not have any data that you need to display, you should not skip this chapter since it is the basis for our next chapter on how to create a multi-column layout for your website.
If you missed the earlier instalments of this tutorial, you can find the first chapter of the Mozilla Composer Tutorial at https://www.thesitewizard.com/gettingstarted/mozillacomposer1.shtml
For this section of the tutorial, you will be creating a new page for your site: the "About Us" page. By the end of this chapter, you will have a page that looks something like the diagram below. You will of course have to modify the content to suit your site. The main idea in this section is to introduce you to the use of data tables, which we will use (or misuse) to create multiple column layouts for our site later.
[Your Site's Logo Here]
Shakespeare's Website: About Me
Here are some of my achievements:
| Year | Play |
|---|---|
| 1599 | Julius Caesar |
| 1600 | Hamlet |
| 1604 | Othello |
| 1606 | Macbeth |
If you've been observing the websites that you visit, including thesitewizard.com, you will have noticed that most pages on a particular site share a common design, with only the page-specific content differing from page to page. The common design not only saves the web designer time when designing a site, it also helps visitors - a common layout among the pages on a site make it easier for visitors to locate common elements like navigational links.
For this tutorial, we will use the index.html page that we created in the previous chapters as a template for our second page.
If you have not already done so, start up Mozilla Composer and open the web page you created earlier. You can use the File | Open File menu to do this.
Switch to the "<HTML> Source" mode. If you've forgotten how to do this, click the tab at the bottom of the Composer window with the label "<HTML> Source".
Select all the text in that window - the shortcut to do this in Windows or Linux is Ctrl+A, while in Macintosh use Cmd+A.
Copy the selected text into the clipboard. One way to do this is to use the "Edit | Copy" menu item.
Open a new Mozilla Composer window. You can do this with "File | New | Composer Page". A new empty Composer window will open.
Switch to the "<HTML> Source" mode in this window by clicking the "<HTML> Source" tab at the bottom of the window. Select all the text in this window using Ctrl+A (or Cmd+A in Macintosh). Use the "Edit | Paste" to paste the text you copied from the other window, overwriting the currently selected text.
Now switch back to the "Normal" mode in your new page. You may close the other window with the index.html file for now, since we won't be needing it for this chapter.
Explanation: although you can also use the same technique to select, copy and paste text from the "Normal" mode, a bug in the version of Mozilla Composer I tested (the one that comes with Mozilla 1.3.1) causes links that are copied this way to be modified incorrectly. (For the technically inclined, relative links like "index.html" get modified to local file references like "file:///C:/Data/index.html". The links will thus fail when the page is published.) As such, it's best to simply avoid the problem entirely by copying using the "HTML Source" mode. (If you don't understand this paragraph, just skip on to the rest of the tutorial.)
At this point, the page is identical with the index.html that you created earlier, except possibly that if you had a graphic inserted in the page, it will show as a broken link. Don't worry about this - it will be automatically solved after we publish the page.
We will be changing this page to an "About Us" page. The "About Us" page on a site typically gives your site's visitors information about a company (if yours is a company site) or about you (if yours is a personal site).
Now look at the diagram above and change the displayed heading accordingly. You don't really have to call it "Shakespeare's Website: About Me". If you want to use that page as a resume, you can call it "Resume" or "[your name]: Resume" or the like. If yours is a company, call it either "About Us" or "XYZ Company: About Us" or something like that.
From the Format menu, click the "Page Title and Properties" menu item. Change the content of the Title field to the text you used for the header above, and press the ENTER key.
Replace the quote from Hamlet with the "Here are some of my achievements:" or, alternatively, substitute with the real content that you want on your finished site.
Hit ENTER a couple of times to leave a blank line before the start of your table.
From the menu, select Table | Insert | Table...
Basically we want to create a table with 5 rows and 2 columns. Change the fields in the dialog box that appears accordingly: enter 5 for "Rows" and 2 for "Columns". Leave the "Width" entry alone: the default value of 100% means that the table will fill out the entire width of the browser, which is fine for our purposes. The "Border" value should be 1 pixel by default - you can leave that alone too. Once you've finished, click OK or hit the ENTER key.
A table should appear on your screen. Complete the table using the information given in the diagram at the start of this chapter. Alternatively, you can complete it using your real content. You can use the TAB key to move to the different columns and rows in the table or, if you prefer using the mouse, you can click in the appropriate cell to position your cursor. (Don't worry about the constantly resizing columns.)
Note: your table will not look exactly like the table in the diagram above. In particular, your table should fill out the width of the browser, while the table in my diagram does not. I mention this for the sake of those who might worry that they're doing something wrong if their screen does not look the same as my diagram.
If you want to move the cursor outside your table, do not use the TAB key in the last cell. Use the arrow key instead. If you use the TAB key there, Mozilla Composer will automatically create another row in the table thinking that you want to extend the table. If this warning comes too late for you, and you've already accidentally created another empty row, you can easily delete it the extra row by moving your keyboard cursor to that row and use "Table | Delete | Row" to get rid of it.
Now look at your table. The first row of the table actually contains the header for the rest of the table. To indicate that it is the header, move your cursor to the "Year" field, then select "Table | Table Properties". You will be greeted with a dialog box with two tabs at the top: "Tables" and "Cells". Click the "Cells" tab. The dialog box contents will change when you do so. Now change the "Cell Style" in that dialog box from "Normal" to "Header". Click OK. Now move your cursor to the "Play" field of your table and do the same here.
You have indicated that the those two cells are headers for their respective columns. Browsers typically show such headers by displaying them in bold.
If you like, you can select the entire table and change the font face to "Helvetica, Arial". Use the method mentioned in Chapter 2.
Preview the page, save it as "aboutus.html" and publish it.
Congratulations. You've created your first page with a table and used it to present data. In the next chapter, we will use a table to control the positioning of text on your web page in order to create a multiple column layout for your website.
Next: Mozilla Composer Tutorial 4: How to Create a Multiple Column Layout in Mozilla Composer
Copyright 2003-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/
You are here: Top > Getting Started with Your Website > Mozilla Composer Tutorial 3: How to Create Data Tables
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Create Data Tables in Mozilla Composer
