WebExpress 3.0 Tutorial Tables, the First Step to Creating a Web Site.   The design of your page should always start with inserting a table. This is perhaps the most important aspect of page design to date. This section will explain fundamentals of what HTML Tables are, then start you on the road to creating your own using the WebExpress Table editing tools. If you're already familiar with Table basics, you may wish to skip directly to the section Adding A Table To Your Web Page.   An Overview Of HTML Tables HTML Tables allow you to be more precise when you position images and text on your Web page. A Table is actually a grid of rectangular, editable areas on your Web page. These areas are called Cells, and they appear in Rows, which run from left to right and Columns, which run from top to bottom. Below is a small table. It's borders are colored in blue so you can see them. Normally the borders cannot be seen by the viewer, unless you want people to see them... Column 1 Column 2 Column 3 Row 1 CELL CELL CELL CELL CELL CELL CELL CELL CELL Row 2 Row 3   Unlike the text and images you've entered into paragraphs thus far, the paragraphs, images, or other HTML elements within each Table Cell are treated independently by a browser. For example, the Table below illustrates how paragraphs in each Cell are positioned independently next to one another on the page, rather than in a single vertical series of paragraphs: This is text This is indented text which is separated by a paragraph break and no indent ...this is text below the image TEXT TEXT this is text... TEXT This is a text paragraph This is another TEXT TEXT This is text in bold blue TEXT TEXT Note also how the paragraphs in the Cells above are each aligned differently. Since Table Cells are independently rendered on the screen, the WebExpress Alignment Buttons (like Center, Left, and Right Align) affect only the paragraph in a particular Cell.   Controlling Table Appearance You can control the Width of a Table and the width of each Column of Cells. This is done in two ways: by specifying a width based on percentage of page (or Table) width; or by specifying the exact width in terms of screen pixels. In WebExpress, Right click on the table and choose Table Properties, or Cell Properties to alter either. The Height of Table Cells is determined by what you place in them, and the height of the Table itself is determined by of the height of its highest Column of Cells. In the table above you can see that the top row of cells is taller than the rows below it, this is because there is more text in the 3 cell from the left, and this made the cell grow in height. You can Span connected Table Columns and/or Rows, and make one large Cell out of several smaller ones, as shown below: TEXT TEXT TEXT TEXT TEXT IN A SPANNED CELL TEXT To span cells highlight the each cell you want to put together, then select Span Cells from the Table menu. Note how the height of this Table is less than the height of the Table above it. Remember that what a Cell contains determines the height of the Cell, and the height of all Cells in a Column determines the height of the Table as a whole. In addition to controlling Table and Cell width and height, you can also control the Table Border Size (or leave the border invisible), you can control the amount of Spacing between the contents of Table Cells and their border, and you can specify how Cell contents are Vertically Aligned within the Cell. You can even change the Background Color of individual Table Cells. These options can be found by right clicking on the table and selecting either Table Properties, or Cell Properties (if you wish to change the properties of only one cell). The table properties dialog box is shown in the instructions below.   Nesting Tables One of the most powerful features of the HTML Table is its ability to be Nested within another Table. Nesting a Table means that you can create an independent Table within a Cell of an existing Table. For example, all of the Tables shown on this page thus far are actually Nested within a larger Table that contains the Row and Column information. In reproducing the first Table on this page, below we've made the outer Table's border visible so you can see it:   Column 1 Column 2 Column 3 Row 1 CELL CELL CELL CELL CELL CELL CELL CELL CELL Row 2 Row 3 Adding A Table To Your Web Page Now we're going to add a simple HTML Table to your sample Web page. While these instructions may seem a little longer that other sections of the tutorial, keep in mind that creating Tables is really a straightforward process and will soon become second nature to you. The results are well worth the effort! Here is the Table as it will appear when we're finished... Page Created By... Last Updated John Dough May 1 1999       To Start: Have a page ready and click on the Insert Table Button or Select Insert Table from the Table menu. The "New Table dialog box will appear. This table will have 2 Rows and 3 Columns. Change the settings in the New Table box accordingly, and select OK.       Now you need to adjust the size of the table. Right click on the table and select Table Properties... In the 'Width Options' section, enter the number '500' opposite the 'In Pixels' check box. This will cause a browser to display your Table at 500 Pixels wide, no matter what size a user has his or her browser window sized to. Note: If you specify a width "In Pixels" the Table will always appear that wide. However, you can also choose to set the Table width as a percentage of the browser window size. This means that the appearance of your Table - and the appearance of its contents - will change proportionately with the size of the browser window when that window is resized. To use this method, enter a number opposite the "As A Percent" check box. For example, if you enter the number 50 to be used as a percentage of the browser window size, your table will always appear one half as wide as the browser window. Be sure to test view your table's appearance at different widths if you use the "As A Percent" method. Under the 'Borders/Spacing' section, set the 'Cell Padding' to 5. Doing so will cause a plain 'margin' of 5 pixels to be displayed between the border of the cell and the text or images we place inside. For now we'll leave the Table Border 'Thickness' set at zero. The 'Grid Thickness' text box controls the amount of blank space that shows between actual Cell walls. Leave this at zero for now too. Click 'OK' on the Table Properties Window. Your table should now appear as follows:     Next adjust the width, alignment, and color of the Table Cells. The properties of each Cell can be set individually, but we can also change the properties of several cells at once by first highlighting the cells we want to change. Highlight the first two Cells on the leftmost side of the Table by placing the mouse pointer in upper-left hand Cell, holding down the left mouse button, and dragging the mouse down to the Cell at lower left. With these Cells highlighted your Table should look like the image at right: With the cells still highlighted, select 'Table' then 'Cell Properties' from the WebExpress Menu. The Cell Properties Window will appear as shown to the left. Change the 'Vertical Alignment' list box to read "Center". Change the 'Cell Shade' list box to "Dark Red". In the 'Width Options' section, enter the number 30 opposite the 'Percent' check box. Click 'OK' and you'll see the changes take effect immediately.     Now follow the above steps to highlight and change the properties of the two rightmost Cells. The next step is to highlight the two center Cells across the two Rows and Span them (make them into a single cell). To do this highlight the two middle cells and select 'Table' then 'Span Cells' from the WebExpress Menu. The two Cells are now one. While the new single Cell is still highlighted, select 'Table' then 'Cell Properties' again from the Menu, and enter the following settings for it in the Cell Properties Window: Change the 'Vertical Alignment' list box to read "Center". Change the 'Cell Shade' to "Black". In the 'Width Options' section, enter the number 40 opposite the 'Percent' check box. Click 'OK'. You should now have a Table that strongly resembles the Table below: Note: You'll notice that we changed the width of the Cells using the "Percent" option. Be sure when you do this that the widths you enter add up to 100(%). In this case we specified 30 + 30 + 40 = 100. The same holds true if you specify a width using the "Pixels" option: make sure the width you enter for each Cell in a Table Column adds up to the width you entered for the entire Table.
Finishing Up   Assignment: Finish up by entering the content into the Table, as it appears in the finished example above, on your own. If you're not sure enough of yourself yet to do so, just follow the steps below: Place the cursor in the Cell at upper right, change the text color to "Light Grey" using the Font Color List Box from the toolbar, and type "Page Created By:". Place the cursor in the Cell at upper left, change the text color to "Light Grey" using the Font Color List Box from the toolbar, and type "Date Last Modified:". With the cursor still on that line, click the Right Align button on the toolbar. One Cell at a time, highlight the text you typed in both upper Cells and change the Font to Verdana and the Size to 10 Points. After changing the text color to "White" in both lower Cells, type your name into the Cell at lower left, and today's date into the Cell at lower right. One at a time, highlight the text you typed in both lower Cells, change the Font Size to 14 Points, and click the Center Align button on the WebExpress toolbar so that the text in those Cells appears centered. Place cursor inside the black Cell click on the align center button and select 'Image' from the 'Insert' from the Menu. Go to the websites\mvtemp\images folder and select the wxlogo3.gif file. Click OK, and if it asks if you want to copy that image to the web site choose, Yes. Then select the image directory inside your web site folder and click OK. Finally, and with the cursor inside of your Table, select 'Table' then 'Table Properties' from the Menu. In the Table Properties Window change the Table Border 'Thickness' to 5 pixels, and the 'Grid Thickness' to 2 pixels. Click 'OK' and you're done with yout new table!
Click Here To Continue with the Tutor
	MVD Home Top Tutor e-mail © 1999 MicroVision Development, Inc.