HTML, Third Edition Illustrated Introductory

1
HTML, Third EditionIllustrated Introductory

• Unit F
• Working with Tables

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

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

4
Planning a Table

• Some of the many attributes for controlling a
  tables appearance include
• Structure and border
• Alignment
• Background
• Dimensions
• Positioning

5
Planning a Table
6
Planning a Table
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 lt!-- Start
  table and row 1 here --gt, press Enter, type
  lttable border"1"gt, then press Enter
• Type lttrgt, click before the comment that reads
  lt!-- End row 1 here --gt, then type lt/trgt
• Click below lttrgt and before the word Day, type
  ltthgt, click after Day, type lt/thgt, 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 lttrgt

8
Creating a Simple Table

• Click before each of the End row comments, type
  lt/trgt, then press Enter
• Type lttdgt before and lt/tdgt after each of the
  words or phrases listed in Table F-2
• Click before lt!-- End table here --gt, type
  lt/tablegt, 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 lttrgt 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 lt/tablegt, paste the code, then save
  your work

9
Creating a Simple Table
10
Creating a Simple Table
11
Clues to Use

• Using comments in a table
• The comment tag can be used to create statements
  such as (lt!-- Comment information goes here. --gt)
• Browsers do not display code or text that is
  contained within comment tags

12
Spanning and Aligning Columns and Rows

• With your youth.htm page code open, drag to
  select ltthgtNoteslt/thgt in row 1, then press
  Delete
• Click just after lttdgt3.00lt/tdgt in row 2, press
  Enter, type lt/trgt, press Enter twice, then
  type lttrgt
• 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

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

14
Spanning and Aligning Columns and Rows
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

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

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

18
Formatting Table Content
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

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"

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

22
Formatting Borders
23
Table and Cell Border Attributes
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

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

26
Modifying Table Backgrounds
27
Clues to Use

• Adding a background image to a table
• Recent versions of most browser applications
  support the background attribute for the lttablegt,
  ltthgt, and lttdgt tags.
• Use CSS to set your background image
• You cannot apply a background to a table row

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 lth1gt under the opening body tag,
  type lttable border"0" cellpadding"0"
  cellspacing"0" width"800"gt, then press Enter
• Type lttrgtlttd nowrapgt, click after lt/h1gt, type
  lt/tdgtlt/trgtlt/tablegt, then save your work

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

30
Changing Table Dimensions
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 lth1gt under the opening body tag,
  type lttable border"0 cellpadding"0"
  cellspacing"0" width"800"gt, then press Enter
• Type lttrgtlttd nowrapgt, click after lt/h1gt, type
  lt/tdgtlt/trgtlt/tablegt, then save your work
• Click before lth3gtReservationslt/h3gt, type lttable
  width"90" align"center"gt, press Enter, type
  lttrgt, press Enter, then type lttd width"50"gt
• Click before lth3gtParadise Garden Day Spa and
  Fitness Centerlt/h3gt, type lt/tdgt, press Enter,
  then type lttdgt

32
Positioning Page Elements

• Click after lt/pgt of the paragraph with the id
  info, type lt/tdgt, press Enter, type lt/trgt,
  press Enter, then type lt/tablegt
• 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
  lttrgt 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

33
Positioning Page Elements
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

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

• Format borders
• Modify table backgrounds
• Change table dimensions
• Position page elements