HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated 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 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 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, press [Enter], type, then press [Enter] Type, click before the comment that reads, then type Type, click before the comment that reads, then type Click below and before the word Day, type, click after Day, type, 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 Click after each of the next Start row comments, press [Enter], press [Delete], then type

HTML, Third Edition--Illustrated Introductory 8 Creating a Simple Table Click before each of the End row comments, type, then press [Enter] Type before and after each of the words or phrases listed in Table F-2 Click before, type, 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 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, 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 ( )  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 Notes in row 1, then press [Delete] Click just after $3.00 in row 2, press [Enter], type, press [Enter] twice, then type Click just after $3.00 in row 2, press [Enter], type, press [Enter] twice, then type 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,, and 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 under the opening body tag, type, then press [Enter] Type, click after, type, 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 under the opening body tag, type, then press [Enter] Type, click after, type, then save your work Click before Reservations, type, press [Enter], type, press [Enter], then type Click before Reservations, type, press [Enter], type, press [Enter], then type Click before Paradise Garden Day Spa and Fitness Center, type, press [Enter], then type Click before Paradise Garden Day Spa and Fitness Center, type, press [Enter], then type

HTML, Third Edition--Illustrated Introductory 32 Positioning Page Elements Click after of the paragraph with the id “info”, type, press [Enter], type, press [Enter], then type Click after of the paragraph with the id “info”, type, press [Enter], type, press [Enter], then type 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 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