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 Nvu Tutorial at https://www.thesitewizard.com/gettingstarted/nvu1.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 / Achievement |
|---|---|
| 1599 | Julius Caesar |
| 1600 | Hamlet |
| 1604 | Othello |
| This year | Shakespeare's Website |
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.
Make a copy of the index.html that you created in the previous chapter, and call it aboutus.html.
To do this in Windows, open up "My Computer" and navigate to the index.html file. If you can't find any file named "index.html", only a file named "index", click the "Tools" menu in the "My Computer" window, followed by "Folder Options". Click the "View" tab at the top of the options dialog box. Uncheck the box "Hide extensions for known file types". Click the button "Apply to All Folders". Click the "OK" button. You should now be able to see the full filenames of all your files.
Select the "index.html" file with your mouse. Right-click the file and select "Copy" from the menu that pops out. Click a blank spot in that same window and right click it. Select "Paste". A new file, "Copy of index.html", will appear. Right click the file and select "Rename". Change the name from "index.html" to "aboutus.html".
Start up Nvu, if you have not already done so. Click "File | Open File". A dialog box entitled "Open HTML File" will be displayed. Select the aboutus.html file which you created in the step above and click the "Open" button.
Nvu will display your new aboutus.html file. At this point, the page is identical with the index.html that you created earlier. 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 Macbeth 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..." A dialog box appears. The dialog box shows an image of a 6 x 6 table, with 2 rows and 2 columns selected by default. Below the image, the dialog box shows the number of rows and columns currently selected in case you're too lazy to count the number of shaded squares yourself.
Basically we want to create a table with 5 rows and 2 columns. We cannot use the default method of creating the table by moving your mouse across the image of the table because in the current version of Nvu (version 0.90), the default table that is created is fixed at 100 pixels, which is not what we want. Note that if you have been too quick on the trigger, and have accidentally created the table by mistake, you can use "Edit | Undo" from the menu to undo the creation of the table.
Click the "Precisely" tab at the top of the "Insert Table" dialog box. This new tab will allow us to specify exactly how big the table is to be. Enter "5" (without the quotes) for Rows and "2" (again, without the quotes) for Columns. Under width, the default is 100 pixels, which is too small for most purposes for which you'll need a table. Click the drop-down box for "pixels" and change it to "% of window". This means that you want your table to fill out the entire width of your web page. 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, Nvu 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. Go to your website and click the "About Us" link from your main page, and you should be able to see this newly created page. You can return to your main page again by clicking the "Home" button at the bottom of your "About Us" page.
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: Nvu Tutorial 4: How to Create a Multiple Column Layout in Nvu
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 > How to Create a Website > Nvu 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 Nvu (Tutorial)
