Docstoc

Unit C Computer Software

Document Sample
Unit C Computer Software Powered By Docstoc
					HTML, Third Edition
Illustrated Complete
       Unit F
 Working with Tables




     HTML, Third Edition--Illustrated   1
              Complete
    Unit Objectives

Plan a table
Create a simple table
Span and align columns and
rows
Format table content


        HTML, Third Edition--Illustrated Complete   2
   Unit Objectives

Format borders
Modify table backgrounds
Change table dimensions
Position page elements



       HTML, Third Edition--Illustrated Complete   3
        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 Complete   4
Planning a Table




 HTML, Third Edition--Illustrated Complete   5
Planning a Table




 HTML, Third Edition--Illustrated Complete   6
     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 Complete   7
     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 Complete   8
Creating a Simple Table




    HTML, Third Edition--Illustrated Complete   9
Creating a Simple Table




    HTML, Third Edition--Illustrated Complete   10
           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 Complete   11
 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 Complete   12
 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 Complete   13
Spanning and Aligning Columns
          and Rows




       HTML, Third Edition--Illustrated Complete   14
           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 Complete   15
   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 Complete   16
       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 Complete   17
Formatting Table Content




     HTML, Third Edition--Illustrated Complete   18
           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 Complete   19
        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 Complete   20
        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 Complete   21
Formatting Borders




  HTML, Third Edition--Illustrated Complete   22
Table and Cell Border Attributes




        HTML, Third Edition--Illustrated Complete   23
    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 Complete       24
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 Complete   25
Modifying Table Backgrounds




      HTML, Third Edition--Illustrated Complete   26
           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 Complete   27
 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 Complete   28
 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 Complete   29
Changing Table Dimensions




      HTML, Third Edition--Illustrated Complete   30
  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 Complete   31
   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 Complete   32
Positioning Page Elements




     HTML, Third Edition--Illustrated Complete   33
     Unit Summary

Plan a table
Create a simple table
Span and align columns and
rows
Format table content


        HTML, Third Edition--Illustrated Complete   34
     Unit Summary

Format borders
Modify table backgrounds
Change table dimensions
Position page elements



       HTML, Third Edition--Illustrated Complete   35

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:6
posted:10/7/2010
language:English
pages:35