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

HTML, Third Edition--Illustrated Introductory

1

HTML, Third EditionHTML, Third EditionIllustrated Introductory Illustrated Introductory

Unit FUnit F

Working with TablesWorking with Tables

HTML, Third Edition--Illustrated Introductory 2

U n i t O b j e c t i v e sU n i t O b j e c t i v e s

Plan a tablePlan a table

Create a simple tableCreate a simple table

Span and align columns and Span and align columns and rowsrows

Format table contentFormat table content






U n i t O b j e c t i v e sU n i t O b j e c t i v e s

Format bordersFormat borders

Modify table backgroundsModify table backgrounds

Change table dimensionsChange table dimensions

Position page elementsPosition page elements






Planning a TablePlanning a Table

Some of the many attributes for Some of the many attributes for controlling a table’s appearance controlling a table’s appearance include:include: Structure and borderStructure and border AlignmentAlignment BackgroundBackground DimensionsDimensions PositioningPositioning






Creating a Simple TableCreating a Simple Table

Start your text editor, open the file Start your text editor, open the file htm_F-1.txthtm_F-1.txt, , inspect the code, then save it as inspect the code, then save it as youth.htmyouth.htm in the in the paradise/activities folderparadise/activities folder

Click after the comment tag that reads , press and row 1 here -->, press [Enter][Enter], type , type <table <table border="1">border="1">, then press , then press [Enter][Enter]

Type Type <tr><tr>, click before the comment that reads , then type End row 1 here -->, then type </tr></tr>

Click below <tr> and before the word Day, type Click below <tr> and before the word Day, type <th><th>, , click after Day, type click after Day, type </th></th>, then type opening and , then type opening and closing table heading tags before and after the closing table heading tags before and after the following items: Time, Activity, Location, Cost, and following items: Time, Activity, Location, Cost, and NotesNotes

Click after each of the next Start row comments, press Click after each of the next Start row comments, press [Enter][Enter], press , press [Delete][Delete], then type , then type <tr><tr>



Click before each of the End row comments, type Click before each of the End row comments, type </tr></tr>, then press , then press [Enter][Enter]

Type Type <td><td> before and before and </td></td> after each of the words or after each of the words or phrases listed in Table F-2phrases listed in Table F-2

Click before , type Click before , type </table></table>, , save your work, start your Web browser, then preview save your work, start your Web browser, then preview the file the file youth.htmyouth.htm in your browser in your browser

Open another text editor window, open the file Open another text editor window, open the file htm_F-htm_F-2.txt2.txt, click before <tr> under the comment at the top of , click before <tr> under the comment at the top of the page, then select and copy all of the code and text the page, then select and copy all of the code and text to the end of the documentto the end of the document

Return to the Return to the youth.htmyouth.htm file, click in the blank line file, click in the blank line above </table>, paste the code, then save your workabove </table>, paste the code, then save your work






Clues to UseClues to Use

Using comments in a tableUsing comments in a table TheThe comment tag comment tag can be used to can be used to

create statements such as ()Comment information goes here. -->)

Browsers do not display code or text Browsers do not display code or text that is contained within comment tagsthat is contained within comment tags


Spanning and Aligning Columns Spanning and Aligning Columns and Rowsand Rows

With your With your youth.htmyouth.htm page code open, page code open, drag to select <th>Notes</th> in row 1, drag to select <th>Notes</th> in row 1, then press then press [Delete][Delete]

Click just after <td>$3.00</td> in row 2, Click just after <td>$3.00</td> in row 2, press press [Enter][Enter], type , type </tr></tr>, press , press [Enter][Enter] twice, then type twice, then type <tr><tr>

Click after td in the opening table data tag Click after td in the opening table data tag that starts the next line of code, press that starts the next line of code, press [Spacebar][Spacebar], then type , then type colspan="5"colspan="5"

Repeat the previous two steps in each of Repeat the previous two steps in each of the remaining rows, then save your workthe remaining rows, then save your work



Click the Click the browser program buttonbrowser program button on the on the taskbar, then reload taskbar, then reload youth.htmyouth.htm

Click the Click the text editor program buttontext editor program button on the on the taskbar to return to the taskbar to return to the youth.htmyouth.htm document document codecode

Locate the opening table data tag for the row 2 Locate the opening table data tag for the row 2 cell that contains the content $3.00, click after td cell that contains the content $3.00, click after td in the tag, press in the tag, press [Spacebar][Spacebar], then type , then type align="right"align="right"

Repeat the previous step to align the text for all Repeat the previous step to align the text for all the other cells in the Cost column, then save your the other cells in the Cost column, then save your work and reload the work and reload the youth.htmyouth.htm page in the page in the browserbrowser





Aligning tables and table Aligning tables and table contentscontents By default, all table contents are By default, all table contents are

vertically centeredvertically centered You can customize the horizontal You can customize the horizontal

alignment of a table and its contents alignment of a table and its contents using the align attributeusing the align attribute

The valign attribute allows you to The valign attribute allows you to control the vertical alignmentcontrol the vertical alignment


Formatting Table ContentFormatting Table Content

Click the Click the text editor program buttontext editor program button on on the taskbar to return to the the taskbar to return to the youth.htmyouth.htm page codepage code

Click just after border="1" in the opening Click just after border="1" in the opening table tag, table tag, press [Spacebar]press [Spacebar], type , type cellpadding="5" cellspacing="5"cellpadding="5" cellspacing="5", then , then save your worksave your work

Click the Click the browser program buttonbrowser program button on the on the taskbar, then reload the taskbar, then reload the youth.htmyouth.htm page page



Find your paradise_style.css style sheet in your paradise\Find your paradise_style.css style sheet in your paradise\css folder, right-click your style sheet file name or icon, css folder, right-click your style sheet file name or icon, point to point to Open WithOpen With on the shortcut menu, then click your on the shortcut menu, then click your text editor nametext editor name

Click just after } at the end of the body style rule, press Click just after } at the end of the body style rule, press [Enter][Enter] twice, then type the following code, pressing twice, then type the following code, pressing [Enter][Enter] after each line:after each line:

td, th {td, th {

line-height: 1em;line-height: 1em;

color: #000033;color: #000033;

}}

Save your style sheet, then reload your Save your style sheet, then reload your youth.htmyouth.htm page in page in your browseryour browser





Using CSS with tablesUsing CSS with tables CSS formatting allows you to set td and CSS formatting allows you to set td and

th style rules to specify attributes for th style rules to specify attributes for table cells without applying those table cells without applying those formatting commands to each cell formatting commands to each cell individuallyindividually


Formatting BordersFormatting Borders

Click the youth.htm Click the youth.htm text editor program buttontext editor program button on the taskbar to open that instance of your text on the taskbar to open that instance of your text editor, click after cellspacing="5" in the opening editor, click after cellspacing="5" in the opening table tag, press table tag, press [Spacebar][Spacebar], then type , then type bordercolor="#99CCFF"bordercolor="#99CCFF" and save your file and save your file

Click the Click the browser program buttonbrowser program button on your on your taskbar, then reload your youth.htm filetaskbar, then reload your youth.htm file

Click the youth.htm Click the youth.htm text editor program buttontext editor program button on the taskbar, then click between bordercolor on the taskbar, then click between bordercolor and the equal sign in the bordercolor attributeand the equal sign in the bordercolor attribute

Type Type lightlight so that the attribute reads so that the attribute reads bordercolorlight="#99CCFF"bordercolorlight="#99CCFF"



Click after the closing quotation mark in the Click after the closing quotation mark in the bordercolorlight attribute, press bordercolorlight attribute, press [Spacebar][Spacebar], , then type then type bordercolordark="#000033"bordercolordark="#000033"

Click just after the 1 in table border="1", press Click just after the 1 in table border="1", press [Backspace][Backspace], then type 2, then type 2

Click just after the 5 and before the closing Click just after the 5 and before the closing quotation mark in the cellspacing value, press quotation mark in the cellspacing value, press [Backspace][Backspace], type , type 22, then save your work, then save your work

Click the Click the browser program buttonbrowser program button on the on the taskbar, then reload the taskbar, then reload the youth.htmyouth.htm file in your file in your browserbrowser




Table and Cell Border AttributesTable and Cell Border Attributes


Modifying Table BackgroundsModifying Table Backgrounds

Click the Click the paradise_style.cssparadise_style.css instance of the text editor on the instance of the text editor on the taskbartaskbar

Click after } of the td, th style rule, press Click after } of the td, th style rule, press [Enter][Enter] twice, then type twice, then type the following code, pressing the following code, pressing [Enter][Enter] after each line: after each line:

th {th {

background-color: #6699CC;background-color: #6699CC;

color: #336633;color: #336633;

}}

Locate the nav1 class at the bottom of your style sheet, click after Locate the nav1 class at the bottom of your style sheet, click after the } at the end of the style, press the } at the end of the style, press [Enter][Enter] twice, then type the twice, then type the following code, pressing following code, pressing [Enter][Enter] after each line: after each line:

.notesrow .notesrow {{

background-color: #CCCCFF;background-color: #CCCCFF;

font-weight: 500;font-weight: 500;

}}



Save your work, return to your Save your work, return to your youth.htmyouth.htm code, code, then locate the table data cell with the content then locate the table data cell with the content that begins This activity gives…that begins This activity gives…

Click just after colspan="5", press Click just after colspan="5", press [Spacebar][Spacebar], , then type then type class="notesrow"class="notesrow"

Repeat the previous step for the remaining rows Repeat the previous step for the remaining rows to which colspan="5" has been appliedto which colspan="5" has been applied

Save your work, click the Save your work, click the browser program browser program buttonbutton on the taskbar, then reload your on the taskbar, then reload your youth.htmyouth.htm page page





Adding a background image to a Adding a background image to a tabletable Recent versions of most browser Recent versions of most browser

applications support the background applications support the background attribute for the <table>, <th>, and <td> attribute for the <table>, <th>, and <td> tags.tags.

Use CSS to set your background imageUse CSS to set your background image You cannot apply a background to a You cannot apply a background to a

table rowtable row


Changing Table DimensionsChanging Table Dimensions

With your With your youth.htmyouth.htm page open in your browser, page open in your browser, click the click the Restore Down buttonRestore Down button in the upper-right in the upper-right corner of the browser, then, if necessary, drag the corner of the browser, then, if necessary, drag the right browser border to the left until the page right browser border to the left until the page heading wraps to a second lineheading wraps to a second line

Click the Click the youth.htmyouth.htm instance of the text editor, instance of the text editor, click before <h1> under the opening body tag, click before <h1> under the opening body tag, type type <table border="0" cellpadding="0" <table border="0" cellpadding="0" cellspacing="0" width="800">cellspacing="0" width="800">, then press , then press [Enter][Enter]

Type Type <tr><td nowrap><tr><td nowrap>, click after </h1>, type , click after </h1>, type </td></tr></table></td></tr></table>, then save your work, then save your work



Locate the opening heading tag for the Locate the opening heading tag for the Time column in the youth activities table, Time column in the youth activities table, click just after th, press click just after th, press [Spacebar][Spacebar], then , then type type nowrap width="125"nowrap width="125"

Replace Your Name in the Modified by Replace Your Name in the Modified by paragraph at the bottom of the page with paragraph at the bottom of the page with your own name, update the date, save your own name, update the date, save your work, then print your page codeyour work, then print your page code

Click the Click the browser program buttonbrowser program button on the on the taskbar, reload the page, then drag the taskbar, reload the page, then drag the right browser border to the right and to the right browser border to the right and to the leftleft




Positioning Page ElementsPositioning Page Elements

Open the Open the htm_F-3.txt htm_F-3.txt file, then save it as file, then save it as contact.htmcontact.htm in your paradise site folder, replacing the in your paradise site folder, replacing the original fileoriginal file

Click before <h1> under the opening body tag, type Click before <h1> under the opening body tag, type <table border="0“ cellpadding="0" cellspacing="0" <table border="0“ cellpadding="0" cellspacing="0" width="800">width="800">, then press , then press [Enter][Enter]

Type Type <tr><td nowrap><tr><td nowrap>, click after </h1>, type , click after </h1>, type </td></tr></table></td></tr></table>, then save your work, then save your work

Click before <h3>Reservations</h3>, type Click before <h3>Reservations</h3>, type <table <table width="90%" align="center">width="90%" align="center">, press [Enter], type , press [Enter], type <tr><tr>, press , press [Enter][Enter], then type , then type <td width="50%"><td width="50%">

Click before <h3>Paradise Garden Day Spa and Click before <h3>Paradise Garden Day Spa and Fitness Center</h3>, type Fitness Center</h3>, type </td></td>, press , press [Enter][Enter], then , then type type <td><td>



Click after </p> of the paragraph with the id “info”, type Click after </p> of the paragraph with the id “info”, type </td></td>, press , press [Enter][Enter], type , type </tr></tr>, press , press [Enter][Enter], then type , then type </table></table>

Save your page, click the Save your page, click the browser program buttonbrowser program button on the on the taskbar, then open your taskbar, then open your contact.htmcontact.htm page page

Return to the Return to the contact.htmcontact.htm file in your text editor, locate the file in your text editor, locate the table row tag above the table data tag containing the level-table row tag above the table data tag containing the level-three heading text of Reservations, click just after tr inside three heading text of Reservations, click just after tr inside the <tr> tag, press the <tr> tag, press [Spacebar][Spacebar], then type , then type valign="top"valign="top"

Click just after align="center" in the opening table tag of the Click just after align="center" in the opening table tag of the same table, press same table, press [Spacebar][Spacebar], type , type cellpadding="10"cellpadding="10", , update the “Page modified by” information, save your work, update the “Page modified by” information, save your work, then reload it in the browser and print the Web pagethen reload it in the browser and print the Web page

Close all files and programs, then transfer your files to your Close all files and programs, then transfer your files to your remote directoryremote directory




U n i t S u m m a r yU n i t S u m m a r y






U n i t S u m m a r yU n i t S u m m a r y

Documents

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