 |
|
|
|
|
|
|
|
|
|
|
Building Web Pages From Ground Zero
By Professor Nibble ã Nibble University 2000-2007 |
|
|
HyperJump to
Tables With Left Background Panels, Assignments
Lesson 10 - TABLES AS PAGE LAYOUT |
|
|
In this lesson we will look at how tables may be used for page layout. Several examples will be given, and all you have to do is copy and paste the source code to use in your web page. I have chosen a basic table width of 600. You may adjust this width according to your needs. The table used in this lesson has rows consisting of two columns. The first column is nothing more than a blank cell to give some indenting from the left margin. It is set for 10% of the total table, which would be 60 pixels. The second column is where most of the text is typed. It makes up 90% of the table width. Below, you will find the source code for the following:
The first set of examples is designed for text use. The text starts at the top of the cell and is aligned left. I won't show a border and will allow a cellpadding of 7 so the text in the columns have a little space between them. I will include a background color, center alignment for the table itself, and a white font for easy visibility, but I won't show this in the example source code.
<!-- ONE ROW ONE COLUMN --> |
| Now is the time for all men to come to the aid of their country. Now is the time for all men to come to the aid of their country. Now is the time for all men to come to the aid of their country. |
| Now is the time for all men to come to the aid of their country. Now is the time for all men to come to the aid of their country. | Now is the time for all men to come to the aid of their country. Now is the time for all men to come to the aid of their country. |
| Now is the time for all men to come to the aid of their country. Now is the time for all men to come to the aid of their country. | Now is the time for all men to come to the aid of their country. Now is the time for all men to come to the aid of their country. | Now is the time for all men to come to the aid of their country. Now is the time for all men to come to the aid of their country. |
| Now is the time for all men to come to the aid of their country. Now is the time for all men to come to the aid of their country. | Now is the time for all men to come to the aid of their country. Now is the time for all men to come to the aid of their country. | Now is the time for all men to come to the aid of their country. Now is the time for all men to come to the aid of their country. | Now is the time for all men to come to the aid of their country. Now is the time for all men to come to the aid of their country. |
|
Notice in the examples above that when four tables are put together they actually appear as one. To make them look like separate areas, I would put a paragraph tag <P> between the tables. Also, each table is made up of one row. I find it much easier to do my page layout with many small tables of one row. To do the above example in one table is a real pain. |
|
The next set of examples is almost identical, but it is designed for image placement. When you insert graphics in your table cells you probably want them to be centered in the cell and vertically aligned to the middle. Notice I showed two ways to center the images. Including the center attribute in the row code is the more efficient way in my opinion. I will also include a border in the example, but not in the source code. The whole idea of using tables for page layout is to align text and images on your page with invisible borders. It makes you appear to be in control of things!
<!-- ONE ROW ONE COLUMN --> |
|
|
|
|
|
|
|
|
|
|
| Top |
Tables With Left Background Panels
If you have a background that includes a left panel, you will need your text and images to begin to the panel's right. This is not difficult to do, but depending on the width of the left panel will require a little tweaking. I will provide some different examples in source code here so you can copy and paste what you want. We'll jump to an example page to show you the result. Be sure to read the text on the example pages. Important information is included! |
|
This is Example One:
<!-- ONE ROW ONE MARGIN COLUMN AND ONE COLUMN --> |
|
This is Example Two:
<!-- ONE ROW ONE MARGIN COLUMN TWO EQUAL COLUMNS --> |
|
This is Example Three:
<!-- ONE ROW ONE MARGIN COLUMN THREE EQUAL COLUMNS --> |
|
|
| TOP |
For this assignment you will create an information report in newsletter style. You may create several small tables or one large one. The table/tables should be centered on your web page and all have a width of 700 pixels. Use cellspacing, cellpadding, or both to make sure there is a little white space between columns/margins. You may use horizontal rules, but no borders are allowed. The top of your newsletter should be one column and include the title and your name centered in two lines. The main part of the newsletter should be two equal columns. At the beginning of the left column you should include an image. At the end of the right column you should include an image. You should have three or more section headings with appropriate data in the body of the newsletter. Include one unordered list in your data (one item will be a link to news2.htm). The reader of your web page will read the left column and then the right column. The bottom of your newsletter should be one column. This would be a good place to give credit to the original author of the data. You may name this assignment news1.htm and the file for assignment two, news2.htm. You may obtain your data for this newsletter information report from the Internet or from a library reference source. Somewhere in your report you should give the original author credit for the material you are using. The topic of the report will be one of the 50 states of the USA. Section one should be called LOCATION. Include what part of the USA your state is in and bordering states and any significate landforms. Section two should be called MAJOR CITIES. This would be a good place for your unordered list. Choose one of the cities (THE CAPITAL) which will be the topic for assignment two. Create a hyperlink on it to jump to news2.htm. Section three should be called PLACES OF INTEREST. You may include additional sections to finish out your report, such as any interesting facts about this state, types of industry or crops produced, etc. |
| TOP |
For assignment two you are to repeat the process you just followed in assignment one except your data will be about the city you chose for further research in assignment one. Include the sections LOCATION, PLACES OF INTEREST and other section topics. The difference is - this newsletter will have a background with a left margin. Each table will have one extra column to make allowances for the left margin. You may choose an appropriate left margin type background from the Internet, or use the background provided HERE and HERE. The file name will be news2.htm, as I mentioned in assignment one. Somewhere in this STATE CAPITAL report you need to insert a link back to the STATE report. This is often accomplished by creating a link from the state name - the first time it is mentioned. |
| Table of Contents |