Help Home

3.2 Organize your pages with tables Tables are the most important formatting elements in a web page. Web pages tables are used not only to display rectangular sets of correlated elements! In fact a typical web page has many invisible tables that divide the page in the different areas. For instance, the typical page with a left side link bar and a top logo bar, can be defined simply with a 2 rows / 2 columns table: Site Logo Here Site Name Here Left Link Bar Home Page Products Link 1 Link 2 Link 3 Link 4 Link 5 Contact us Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text In the example above the table borders were left visible just to exemplify. Based on a structure like this, you can add images and other elements to construct a fancy page. In web pages, you can put tables inside other tables. There is no limit to the number of tables you can use. Let´s put a table in the content text area of our page to publish some ads: Site Logo Here Site Name Here Left Link Bar Home Page Products Link 1 Link 2 Link 3 Link 4 Link 5 Contact us Ad 1 Here Ad 2 Here Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Now let´s learn how to work with tables by reproducing the last picture step by step.   Important Note: You must have disabled your pop-up blockers while you edit your pages. In Internet explorer native pop-up blocker you can disable the blocker just for your website. In other pop-up blockers like Google one, you may need to disable completely the blocker when you edit your pages. If you have pop-up blockers enabled, the page properties, image, links or preview windows may not be displayed.   First create a new blank page with your Easy Web Site Creator script.   Click the table button in the editor toolbar:   In the table properties window, select the options according to the picture:   For now we will leave the table borders (Border size = 1). You should get something like the next picture: Note that your page will start with 700 pixels of height but you will not be limited if you need to add more content later. Just type it or add the images you want and the page will grow automatically without need to change the main table height.     Right click at the center of the upper left cell and select Cell > Cell Properties. Fill the cell Width and Height like in the image     You will get a table like the next picture:   Change the vertical text alignment of the two bottom cells to Top, by right clicking each cell at a time and selecting Cell > Cell Properties.     Type some texts in all four cells. You should get something like:   Site Logo Here Site Name Here Left Link Bar Home Page Products Link 1 Link 2 Link 3 Link 4 Link 5 Contact us Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Now let´s add our ads table. Put the cursor at the beginning of the first text line in the right bottom cell and press the table button . Fill the dialogue like next picture:   You should get something like:   Site Logo Here Site Name Here Left Link Bar Home Page Products Link 1 Link 2 Link 3 Link 4 Link 5 Contact us Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text   Now right click each cell of the ads table, select Cell > Cell Properties    Click in the Select... button near the Background Color field and choose a color:      Type 'Ad 1 Here' and 'Ad 2 Here' in the ads table cells. You should get your table like: Site Logo Here Site Name Here Left Link Bar Home Page Products Link 1 Link 2 Link 3 Link 4 Link 5 Contact us Ad 1 Here Ad 2 Here Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text     Finally you can right click the main table and select Table Properties. Set Border Size = 0 and click OK.      The main table borders will disappear for your site visitors. Press Save & Preview and it will open another window to show you how the public view your page. Site Logo Here Site Name Here Left Link Bar Home Page Products Link 1 Link 2 Link 3 Link 4 Link 5 Contact us Ad 1 Here Ad 2 Here Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text Content Text    Content Text    Content Text That's it, you are done! To finish your table formatted web page you just need to replace the text by the real things: put a logo image in the upper left cell, write your real links, put images in the ads space and add links to them and fill your page content.   In section 3.4 and section 3.5 we will continue to develop this template page inserting links and images.   Next: Use Templates

Last  Next

See also:

Use Templates Linking your pages Inserting images The Page Editor

Help Home

Copyright © AWE Editions, Lda. 2006

This page was created with AWE Easy Web Site Creator