Using “Tables” to make a really professional website.
Copyright Thorough Solutions, Inc. All rights reserved.
The Thorough Solutions’ site builder is a very powerful tool, packed with features that let even a beginner rival the most experienced webmasters. One feature is the ability to quickly build and shape tables into your web pages. Here is a quick explanation of what a table is and how to go about using tables in your website. After this short lesson we encourage you to practice and add your own creative touch so that you wind up with a website that is the envy of expert webmasters.
Tables can be considered as “pigeon holes” or place holders for your website text and images. The Editor has an excellent “table maker” feature that can create just about any look that you want for your website. Once you get the hang of how to create, change size, shape, color and make or remove borders on your tables, you will be as good as any professional web designer.
First take a look at the figure below to understand the basic principals of using a table. On the left side is a section of a webpage. On the right side is the table that “pigeon-holes” the text and pictures.
Copy under the picture
This is part of a webpage. There are three pictures and some text copy.
The Welcome and text copy below it were entered into the top of the table. Then a Picture 1 and Picture 2 were entered into the left table section using the “upload image” feature of the CMS editor. Finally, Picture 3 was entered in the right table section and some text was added below it..
Notice a few things. First, there are lines in the table on the right but there are no lines in the finished table on the left. That is because the editor provides a way to make the borders invisible. As explained in the example below, you will simply enter a zero into the table properties form. Naturally, if you want the borders to show, you will enter a value such as 1 (for a thin border) or 5 (for a thick border that resembles a picture frame).
Now let’s go step-by-step, using the editor to make a table, load some pictures and add some text.
First, open the CMS Editor and select the page that you want to work on and click on the Insert Table icon.
Then click [OK].
You won’t see anything but a table has been entered into your page.
Now click on the icon and notice that the table that you just made now shows with dotted lines as borders.
Notice two things. One is that the table is not the full width of the page and two, that the columns and rows are equally spaced. So here is your first table adjustment.
Click anywhere on the dotted lines. The little boxes that light up are called “handle bars” because you can grab them with your mouse and shape the table. Scroll down to look at the “Table Inspector” at the bottom of the editor window. It will look like this:
Notice that the width says 75%. That sets the table to a width that is 75% of the body of your page (the body is the content area, excluding the menus on the sides). You can make that any percentage, or number of pixels that you want. For now enter 100%. The size will change when you click your mouse on the page. You can also alter the size and shape of the table using the handle bars. The number of pixels will automatically show up in the Width and Height boxes.
Now upload a picture into one of the table pigeon holes by placing your mouse in the place where you want to put the picture and click on the “Insert Image” Icon.
Then click on [Upload Image] à [Browse] à now find the image file (.jpg or .gif or .bmp) that you want to upload and click on it. Click on [Upload] and notice that it appears as an image in image window. Click on the image to highlight it and click on [OK]. The image now appears in your table.
Now add some text under the image and to the side of it. Then click on the [Preview] button and [Save] the page.
Using your web browser go to your site and select the page that you just worked on.
You will now see your first table appear on the Internet.
Now it is time to play. You can change the size and shape of the image that you want on your page by changing the values in the image “Layout” area. If the number is real big, say over 700 or 800, that will be a very large picture. If the number is around 200 or 300 that will be a normal size picture. As a rule of thumb about 90 equals one inch on your screen, so 300 will be about a three inch picture. If you have a large picture as in the example below (2856) the picture would be enormous. You can adjust its width by first deleting the Height (2142 to blank) and setting the Width to the size you want, for example, 275 (the reason that you deleted the width is to automatically keep the width to height ratio fixed). That will place the image in the box that is about 2 ¾ inches wide.
The best way to learn how to use the rest of the features is to “play around” with them and use the [Preview] and [ReEdit] buttons to observe what the feature does to the table. Try changing the items (called attributes) in the table inspector and watch what they do.
Print this page and keep it as a reference for building your website.