Using Tables. Objectives. Chapter 4

Transcription

1 Using Tables Chapter 4 Tables can be used in a traditional manner to present details such as product lists or timetables. When used in creating web pages, tables take on extra importance because they are often used to assist in placing text and graphics together. Objectives In this chapter you will: Insert a Table into a Web Page Enter Text into the Table Align Text in the Table Cell Copy Rows Format Text Set Row Height and Width Set Background and Cell Properties Microstar Publishing Pty Ltd

2 Introduction to Microsoft FrontPage 2003 The Body Blitz Web Site: Create a New Page In this exercise you will create a table to lay out data on membership costs for the Body Blitz centre, as set out on the previous page. Close the current page and click on the New Page button on the toolbar Type the following text as a heading Membership Price List Highlight the text and format it to be a mid blue colour, style Heading 1 and font size level six Save the page as Membership.htm in the Blitz folder Inserting a Table Our membership list has five columns. Rows can be added to the end of a table very easily; we will start with just five rows and add to them later. So we need a five row by five column table. Click the cursor on the blank line just after the last line of text Click on Table Insert Table in the Menu bar Enter 5 in the Rows box and 5 in the Columns box Cell padding is how close the text and graphics are displayed to the border of each cell. Type 1 in the Cell padding box so that the text and graphics will be displayed one pixel from each border Cell spacing is how close borders are displayed next to each other. Enter 0 in Cell Spacing so that just one border is displayed between each cell Specify width is how much Rows Columns of the browser screen the table will fill. Enter 90 in the box and click on In percent so that the table will fill 90% of the available space In percent 4-2 Microstar Publishing Pty Ltd 2004

3 Using Tables 4 Border size is the thickness of the cell outlines. Zero represents no border, one a thin border, two a thicker border, etc. Check the Border box has a 0 for no border Click on OK to insert the table as shown below Aligning the Table The table can be adjusted in numerous ways. Columns or rows can be altered in size, the table can be centred, rows and columns can be inserted or deleted. Click anywhere within the table then click on Table Select Table in the Menu bar Click on the Align Centre button of the Formatting toolbar The table should now be centred horizontally on the page. Centre Microstar Publishing Pty Ltd

4 Introduction to Microsoft FrontPage 2003 Inserting Text into the Table Tables are a set of cells organised into columns and rows. The cells are often identified by the row in numbers, then the column in letters. Text can be inserted into cells and then formatted in the usual way. Click in cell A1 (the first cell in the top row) Type Full Gold then press the down arrow key on the keyboard Press [Tab ] to move to cell B2 (the second cell in the second row) type 1 month Press [Tab ] and type 3 month, repeating to enter 6 month and 12 month as shown below Click into the cell A3 and type Adult, then cell A4 and type Concession Aligning Text The text in cells can be aligned within a cell using the alignment buttons on the Formatting toolbar Move the mouse to be close to the left border of the second row until it changes to a black arrow pointing to the right, then click to highlight the second row Click on the Align Centre button so the headings are centered Align Centre Save the page 4-4 Microstar Publishing Pty Ltd 2004

5 Using Tables 4 Copying Rows To save time we can simply copy the last four rows of the table several times to create the structure of the table, then fill in the details. Highlight the first row of the table, then hold the mouse button and drag down to highlight the next three rows as well and click on the Copy button Copy Paste Click on the first cell in the last row Click on the Paste button on the toolbar, the rows will be added to the table. The headings can be edited later. Click on the first cell in the last row again and click on Paste Repeat once more You should now have four sets of the headings. Click on cell A5 (first column, fifth row), delete the text Full Gold and type Gymnasium Click on cell A9 (first column, ninth row), delete the text Full Gold and type Aquatic Click on cell A13, delete the text Full Gold and type Aerobic/Circuit Your table should appear as shown here. Microstar Publishing Pty Ltd

6 Introduction to Microsoft FrontPage 2003 Format Text in Tables Text within a table is formatted in the same way as normal text. Highlight the heading text Full Gold and click on the Font Size button and click on 4 (14pt), click on the Bold button, and click on the Align Centre button Font Size Bold Centre Using the Format Painter The Format Painter is useful for quickly applying the same set of Formatting to other text. Make sure the text Full Gold (that you have just formatted) is highlighted Double click on the Format Painter button in the Standard toolbar. The cursor will change to a paintbrush Highlight each of the headings in turn they should automatically be formatted in the same way as the first heading Click on the Format Painter button again to turn it off Format Painter 4-6 Microstar Publishing Pty Ltd 2004

7 Using Tables 4 Merging Cells To aid in the alignment of text and graphics, multiple cells can be merged to create one cell. Highlight the four cells in the first row as shown Click on the Merge Cells button in the Table toolbar (click on View Toolbars Tables if you cannot see the toolbar on the screen) Merge Cells The four cells will be replaced by just one long cell. Enter the text as shown below, to explain the type of membership (there is no need to press [Enter] at the end of the line in the cell, the text will automatically wrap around) Format the text to be level two size and Italic Font Size Italic Repeat the steps to merge the cells for each membership type and enter the following text Microstar Publishing Pty Ltd

8 Introduction to Microsoft FrontPage 2003 Enter Text Enter the prices of each type of membership as shown below, using the formatting skills you have learned Row Height The height of each row may need to be increased. Move the mouse over the left border of the first row until it changes to a small black arrow pointing to the right Click, hold and drag down to select all rows of the table Right click on the table and click on Cell Properties Click on the Specify Height option and type 40 Click on the In pixels option to select it Click on OK. This will increase the row height to 40 pixels. Note: To quickly increase or decrease the size of just one row simply drag the lower border in the direction required. 4-8 Microstar Publishing Pty Ltd 2004

9 Using Tables 4 Column width Column widths can be altered simply by dragging the right border in to decrease, or out to increase, the size of the column. As you do this the other columns will either be increased or decreased in size. However when the width of the last column of the table is decreased or increased in size, the width of the whole table is adjusted accordingly. Move the pointer over the right border of the first column until it changes to a double headed arrow Hold the mouse button down and drag to the right by about a centimetre. This will increase the width of the column Save the page Shading the Table Sometimes you might like the table shaded. You can shade the whole table or just individual cells. Click into any cell in the table Click on Table Table Properties Table in the Menu bar Click on the drop list button for Background Colour Click on Standard Colours (or click on More Colours and choose from an expanded range then click on OK) then click on Apply The table can be automatically shaded the same colour as the background. Click on Table Properties Table in the Menu bar and click on the drop list button for Background Colour and click on Automatic then OK Background Colours More Colours Microstar Publishing Pty Ltd

10 Introduction to Microsoft FrontPage 2003 Shading Cells Individual cells can be shaded. Click on the second cell in the first row Click on Table Select Cell in the Menu bar Click on the Fill Colour drop list button on the Tables toolbar Click on the colour blue Click on the next merged cell, Click on Table Select Cell in the Menu bar and click on the Fill colour button again this time there is no need to click on the drop list button as the most recently used colour will automatically be used Click on the cells for each membership type and apply a shade of green, then click on the cells for the membership description and apply a shade of blue Green Blue Save and close the page 4-10 Microstar Publishing Pty Ltd 2004

11 Using Tables 4 Practice Exercise: The Cream Supreme Web Site - Tables In this exercise you are going to create a table which will be used to list product details. Start a new page and save it as Products in the Supreme folder Type the following text then insert the table and enter that text also Cream Supreme Products we guarantee our latest range is the most delicious your customers have ever tasted Code Name Description Price AD0034 MM0026 EE0051 CH0015 apricot delight macadamia madness everlasting envy chocolate heaven juicy apricot pieces buried in rich mango icecream and complemented with slivered almonds pieces of macadamia surrounded by creamy honeycomb and as if that wasn't enough slivers of dark chocolate complete the recipe perfect peppermint ice-cream with extra pieces of mint praline and rich dark chocolate chocolate, chocolate and more chocolate, swirls of dark, milk and white chocolate create one heavenly experience CK0091 crazy kid especially for the child in us all, banana, strawberry and blue heaven swirled together to create one crazy taste LW0086 lily white rich vanilla ice-cream combined with melt in the mouth white chocolate and baubles of white nougat deceptively create one delicious dish Note: All prices are for 20 litre tins Adjusting the Vertical Alignment of Text By default, text is entered to the vertical centre of a cell. You can alter this if required. The placement of the text can be aligned vertically using the Alignment buttons in the Table toolbar. Highlight the second row and click on the Top alignment button Top Middle Bottom Repeat for each of the rows Note: Each row was done separately for practice, normally you would simply highlight all of the rows and format them together Microstar Publishing Pty Ltd

12 Introduction to Microsoft FrontPage 2003 Tables appear neater if the text is aligned to the top of the row. Format the heading text for the page to be centred and font size level four Highlight the first row and shade the cells to be blue Indenting Text Click on the third cell in the second row The text can also be indented using the Indentation buttons. Click on the Increase Indent button to move the text in, as shown below Decrease Indent Increase Indent Click on the Decrease Indent button to move the text back out again 4-12 Microstar Publishing Pty Ltd 2004

13 Using Tables 4 Inserting Graphics into a Table Graphics can be inserted into cells in the table. If the graphic is too large the table will adjust in size to accommodate the graphic. Once a graphic has been inserted into a cell its size can be adjusted by dragging one of its handles. Start a new page and save it as Contents in the Supreme folder Insert a table of three rows and three columns Enter the following text and format it to be font Comic Sans MS or similar, and level six in size Distribute Rows and Columns Evenly Highlight the whole table and click on Distribute Rows Evenly, and then Distribute Columns Evenly Distribute Rows Evenly Distribute Columns Evenly Microstar Publishing Pty Ltd

14 Introduction to Microsoft FrontPage 2003 Inserting Graphics Click the mouse to place the cursor in the top, middle cell Click on Insert Picture Clipart in the Menu bar Type ice cream in the Search box then click on Go to display appropriate clips Click on the image to insert it 4-14 Microstar Publishing Pty Ltd 2004

15 Using Tables 4 Graphics are various sizes, and if they are larger than the cell itself, the cell will automatically be resized to accommodate them. However the cell will not get smaller if the graphic is smaller than the cell. If the graphic has resized the cell making it larger just drag the top left handle of the graphic into the centre until the cell is returned to the required size The table will resize as you resize the graphic. Click in the next blank cell and insert an image in that cell Click on each image and click on the Align Centre button to centre each image in its cell Click on Save to save the page and each of the graphic images check that the Folder is Supreme Microstar Publishing Pty Ltd

16 Introduction to Microsoft FrontPage 2003 Practice Exercises: The Funny Kids Festival Web Site In this exercise you are going to use a table to assist with aligning ClipArt, details about activities etc. Start a new page in the Funnykids folder and save it as Contents Insert a table that is two columns by five rows Enter the text in the second column as shown and format it to be centered and font size level four Highlight all the cells in the first column and click on the Merge Cells button Insert a piece of ClipArt in the newly merged cell Format and colour the text in a style and colour you like Resize the columns to look as shown here Save the page, saving the graphic file in the Funnykids folder Save the page then close 4-16 Microstar Publishing Pty Ltd 2004

17 Using Tables 4 Adjusting Table Elements In this exercise you are going to create a table which will be used to display a timetable for weekly classes. You will use this table to look at the variations that can be achieved by altering the elements of a table. The Body Blitz Web Site Create a new page and save it as Timetable.htm in the Blitz folder Insert the text and table as shown below Use shading to differentiate between the various classes, eg shade the Step cells in lime green, the Cross Train in aqua. The font is Berlin Sans FB. The heading text is in level six, the remainder is normal. Click on Table Table Properties Table in the Menu bar Type 0 in each of Cell padding, Cell spacing and Borders Size boxes Click on OK Microstar Publishing Pty Ltd

18 Introduction to Microsoft FrontPage 2003 Your table should look something like this. Click on Table Table Properties Table in the Menu bar Type 2 in the Cell padding and 2 in Cell spacing, then click on Apply and OK Select the table then click on Format Borders and Shading, Click on Inset and OK to give the cells a solid, inset style border The space around each cell will be padded out Microstar Publishing Pty Ltd 2004

19 Using Tables 4 Practice Exercise Start a New page and save it as Events.htm in the Nova folder Insert the text and table as shown in the first example below Format the heading text to be Heading level six Format the cells to have a dotted border style with a width of one, the background blue, and the text in the table formatted to white Save and close the file Start a New page and save it as Classes.htm in the Nova folder Insert the text and table as shown in the example below Format the heading text to be Heading level six Format the first row in the table to have a blue background, the remaining rows should have a yellow background Format the text in the first row to be white Save and close the file Microstar Publishing Pty Ltd

20 Introduction to Microsoft FrontPage Microstar Publishing Pty Ltd 2004