HTML, Third Edition Illustrated Introductory

1. HTML, Third EditionIllustrated Introductory Unit F Working with Tables HTML, Third Edition--Illustrated Introductory

2. U n i t O b j e c t i v e s • Plan a table • Create a simple table • Span and align columns and rows • Format table content HTML, Third Edition--Illustrated Introductory

3. U n i t O b j e c t i v e s • Format borders • Modify table backgrounds • Change table dimensions • Position page elements HTML, Third Edition--Illustrated Introductory

4. Planning a Table • Some of the many attributes for controlling a table’s appearance include: • Structure and border • Alignment • Background • Dimensions • Positioning HTML, Third Edition--Illustrated Introductory

5. Planning a Table HTML, Third Edition--Illustrated Introductory

6. Planning a Table HTML, Third Edition--Illustrated Introductory

7. Creating a Simple Table • Start your text editor, open the file htm_F-1.txt, inspect the code, then save it as youth.htm in the paradise/activities folder • Click after the comment tag that reads <!-- Start table and row 1 here -->, press [Enter], type <table border="1">, then press [Enter] • Type <tr>, click before the comment that reads <!-- End row 1 here -->, then type </tr> • Click below <tr> and before the word Day, type <th>, click after Day, type </th>, then type opening and closing table heading tags before and after the following items: Time, Activity, Location, Cost, and Notes • Click after each of the next Start row comments, press [Enter], press [Delete], then type <tr> HTML, Third Edition--Illustrated Introductory

8. Creating a Simple Table • Click before each of the End row comments, type </tr>, then press [Enter] • Type <td> before and </td> after each of the words or phrases listed in Table F-2 • Click before <!-- End table here -->, type </table>, save your work, start your Web browser, then preview the file youth.htm in your browser • Open another text editor window, open the file htm_F-2.txt, click before <tr> under the comment at the top of the page, then select and copy all of the code and text to the end of the document • Return to the youth.htm file, click in the blank line above </table>, paste the code, then save your work HTML, Third Edition--Illustrated Introductory

9. Creating a Simple Table HTML, Third Edition--Illustrated Introductory

10. Creating a Simple Table HTML, Third Edition--Illustrated Introductory

11. Clues to Use • Using comments in a table • The comment tag can be used to create statements such as (<!-- Comment information goes here. -->) • Browsers do not display code or text that is contained within comment tags HTML, Third Edition--Illustrated Introductory

12. Spanning and Aligning Columns and Rows • With your youth.htm page code open, drag to select <th>Notes</th> in row 1, then press [Delete] • Click just after <td>$3.00</td> in row 2, press [Enter], type </tr>, press [Enter] twice, then type <tr> • Click after td in the opening table data tag that starts the next line of code, press [Spacebar], then type colspan="5" • Repeat the previous two steps in each of the remaining rows, then save your work HTML, Third Edition--Illustrated Introductory

13. Spanning and Aligning Columns and Rows • Click the browser program button on the taskbar, then reload youth.htm • Click the text editor program button on the taskbar to return to the youth.htm document code • Locate the opening table data tag for the row 2 cell that contains the content $3.00, click after td in the tag, press [Spacebar], then type align="right" • Repeat the previous step to align the text for all the other cells in the Cost column, then save your work and reload the youth.htm page in the browser HTML, Third Edition--Illustrated Introductory

14. Spanning and Aligning Columns and Rows HTML, Third Edition--Illustrated Introductory

15. Clues to Use • Aligning tables and table contents • By default, all table contents are vertically centered • You can customize the horizontal alignment of a table and its contents using the align attribute • The valign attribute allows you to control the vertical alignment HTML, Third Edition--Illustrated Introductory

16. Formatting Table Content • Click the text editor program button on the taskbar to return to the youth.htm page code • Click just after border="1" in the opening table tag, press [Spacebar], type cellpadding="5" cellspacing="5", then save your work • Click the browser program button on the taskbar, then reload the youth.htm page HTML, Third Edition--Illustrated Introductory

17. Formatting Table Content • Find your paradise_style.css style sheet in your paradise\css folder, right-click your style sheet file name or icon, point to Open With on the shortcut menu, then click your text editor name • Click just after } at the end of the body style rule, press [Enter] twice, then type the following code, pressing [Enter] after each line: td, th { line-height: 1em; color: #000033; } • Save your style sheet, then reload your youth.htm page in your browser HTML, Third Edition--Illustrated Introductory

18. Formatting Table Content HTML, Third Edition--Illustrated Introductory

19. Clues to Use • Using CSS with tables • CSS formatting allows you to set td and th style rules to specify attributes for table cells without applying those formatting commands to each cell individually HTML, Third Edition--Illustrated Introductory

20. Formatting Borders • Click the youth.htm text editor program button on the taskbar to open that instance of your text editor, click after cellspacing="5" in the opening table tag, press [Spacebar], then type bordercolor="#99CCFF" and save your file • Click the browser program button on your taskbar, then reload your youth.htm file • Click the youth.htm text editor program button on the taskbar, then click between bordercolor and the equal sign in the bordercolor attribute • Type light so that the attribute reads bordercolorlight="#99CCFF" HTML, Third Edition--Illustrated Introductory

21. Formatting Borders • Click after the closing quotation mark in the bordercolorlight attribute, press [Spacebar], then type bordercolordark="#000033" • Click just after the 1 in table border="1", press [Backspace], then type 2 • Click just after the 5 and before the closing quotation mark in the cellspacing value, press [Backspace], type 2, then save your work • Click the browser program button on the taskbar, then reload the youth.htm file in your browser HTML, Third Edition--Illustrated Introductory

22. Formatting Borders HTML, Third Edition--Illustrated Introductory

23. Table and Cell Border Attributes HTML, Third Edition--Illustrated Introductory

24. Modifying Table Backgrounds • Click the paradise_style.css instance of the text editor on the taskbar • Click after } of the td, th style rule, press [Enter] twice, then type the following code, pressing [Enter] after each line: th { background-color: #6699CC; color: #336633; } • Locate the nav1 class at the bottom of your style sheet, click after the } at the end of the style, press [Enter] twice, then type the following code, pressing [Enter] after each line: .notesrow { background-color: #CCCCFF; font-weight: 500; } HTML, Third Edition--Illustrated Introductory

25. Modifying Table Backgrounds • Save your work, return to your youth.htm code, then locate the table data cell with the content that begins This activity gives… • Click just after colspan="5", press [Spacebar], then type class="notesrow" • Repeat the previous step for the remaining rows to which colspan="5" has been applied • Save your work, click the browser program button on the taskbar, then reload your youth.htm page HTML, Third Edition--Illustrated Introductory

26. Modifying Table Backgrounds HTML, Third Edition--Illustrated Introductory

27. Clues to Use • Adding a background image to a table • Recent versions of most browser applications support the background attribute for the <table>, <th>, and <td> tags. • Use CSS to set your background image • You cannot apply a background to a table row HTML, Third Edition--Illustrated Introductory

28. Changing Table Dimensions • With your youth.htm page open in your browser, click the Restore Down button in the upper-right corner of the browser, then, if necessary, drag the right browser border to the left until the page heading wraps to a second line • Click the youth.htm instance of the text editor, click before <h1> under the opening body tag, type <table border="0" cellpadding="0" cellspacing="0" width="800">, then press [Enter] • Type <tr><td nowrap>, click after </h1>, type </td></tr></table>, then save your work HTML, Third Edition--Illustrated Introductory

29. Changing Table Dimensions • Locate the opening heading tag for the Time column in the youth activities table, click just after th, press [Spacebar], then type nowrap width="125" • Replace Your Name in the Modified by paragraph at the bottom of the page with your own name, update the date, save your work, then print your page code • Click the browser program button on the taskbar, reload the page, then drag the right browser border to the right and to the left HTML, Third Edition--Illustrated Introductory

30. Changing Table Dimensions HTML, Third Edition--Illustrated Introductory

31. Positioning Page Elements • Open the htm_F-3.txt file, then save it as contact.htm in your paradise site folder, replacing the original file • Click before <h1> under the opening body tag, type <table border="0“ cellpadding="0" cellspacing="0" width="800">, then press [Enter] • Type <tr><td nowrap>, click after </h1>, type </td></tr></table>, then save your work • Click before <h3>Reservations</h3>, type <table width="90%" align="center">, press [Enter], type <tr>, press [Enter], then type <td width="50%"> • Click before <h3>Paradise Garden Day Spa and Fitness Center</h3>, type </td>, press [Enter], then type <td> HTML, Third Edition--Illustrated Introductory

32. Positioning Page Elements • Click after </p> of the paragraph with the id “info”, type </td>, press [Enter], type </tr>, press [Enter], then type </table> • Save your page, click the browser program button on the taskbar, then open your contact.htm page • Return to the contact.htm file in your text editor, locate the table row tag above the table data tag containing the level-three heading text of Reservations, click just after tr inside the <tr> tag, press [Spacebar], then type valign="top" • Click just after align="center" in the opening table tag of the same table, press [Spacebar], type cellpadding="10", update the “Page modified by” information, save your work, then reload it in the browser and print the Web page • Close all files and programs, then transfer your files to your remote directory HTML, Third Edition--Illustrated Introductory

33. Positioning Page Elements HTML, Third Edition--Illustrated Introductory

34. U n i t S u m m a r y • Plan a table • Create a simple table • Span and align columns and rows • Format table content HTML, Third Edition--Illustrated Introductory

35. U n i t S u m m a r y • Format borders • Modify table backgrounds • Change table dimensions • Position page elements HTML, Third Edition--Illustrated Introductory