Transcript Project 4

HTML
Concepts and Techniques
Fourth Edition
Chapter 4
Creating Tables in a Web Site
Chapter Objectives
• Define table elements
• Describe the steps used to plan, design, and
code a table
• Create a borderless table to position images
• Create a horizontal menu bar with text links
Chapter 4: Creating Tables in a Web Site
2
Chapter Objectives
•
•
•
•
Copy and paste HTML code to a new file
Create a borderless table to organize text
Create a table with borders and insert text
Change the horizontal alignment of text
Chapter 4: Creating Tables in a Web Site
3
Chapter Objectives
• Add background color to rows and cells
• Alter the spacing between and within cells using
the cellspacing and cellpadding attributes
• Insert a caption below a table
• Create headings that span rows and columns
using the rowspan and colspan attributes
Chapter 4: Creating Tables in a Web Site
4
Introduction
• Project uses tables
–
–
–
–
–
learn about elements used in table
plan, design, and code a table
create tables to organize text and images
table column to create menu bar with text links
enhance tables using attributes and formats
• borders, colors, spacing, blank cells, and adding a caption
Project 4: Creating Tables in a Web Site
5
Page 1 – Statewide Realty
image
positioned
In borderless
table
Project 4: Creating Tables in a Web Site
6
By Complex – Statewide Realty
menu bar
table with
background color
in header row
Project 4: Creating Tables in a Web Site
7
By Vacancy– Statewide Realty
cellspacing and
cellpadding
attributes used to
space text in table
table
caption
Project 4: Creating Tables in a Web Site
8
By Bedrooms – Statewide Realty
colspan
attribute
used for
heading
spanning
four
columns
rowspan
attribute
used for
headings
each
spanning
three rows
Project 4: Creating Tables in a Web Site
colspan
attribute
used for
headings
each
spanning
three
columns
9
Table Elements
• Tables consist of rows, columns, and cells, much
like a spreadsheet
• row – horizontal line of information
• column – vertical line of information
• cell – intersection of row and column
• heading cell – displays text as bold and centeraligned
• data cell – displays normal text that is left aligned
Project 4: Creating Tables in a Web Site
10
Table Borders, Headers, Captions,
and Rules
• table border is the line that encloses the perimeter of a
table
• table header – is the same as a heading cell, any cell with
bold text that indicates purpose of the row or column
• table caption – descriptive text located above or below the
table describing the purpose of the table
• rules attribute – allows developer to select which internal
borders to show in a table
– rules=“none” no internal rules
– rules=“cols” creates table with vertical rules between each
column
– rules=“rows” creates table with horizontal rules between each
row
More on Web
Project 4: Creating Tables in a Web Site
11
Planning, Designing, and Coding a
Table
• Creating tables for Web Page
Three step Process
1. determining if a table is needed
2. planning the table
3. coding the table
Project 4: Creating Tables in a Web Site
12
Determining If a Table Is Needed
• table should be used:
–organize information on a Web page
making it easier to read
–needs to display a structured,
organized list of information
–includes text and images that must
be positioned in a very specific
manner
Project 4: Creating Tables in a Web Site
13
Planning a Table
– plan how information will appear in the
table and then create a good design
– sketch the table on paper before writing
any HTML code
• saves time when determining HTML tags
• how many rows and columns to create
• if table will include headings
– include headings that span rows and columns
More on Web
– include a table caption
Project 4: Creating Tables in a Web Site
14
Coding a Table
• table rows indicated in HTML code
– <tr> and </tr> tags
• table heading indicated in HTML code
– <th> and </th> tags
• appears bold and centered
• table data indicated in HTML code
– <td> and </td> tags
• appears normal and left-aligned
Project 4: Creating Tables in a Web Site
15
Coding a Table
Project 4: Creating Tables in a Web Site
16
Table Tag Attributes
Project 4: Creating Tables in a Web Site
17
Entering the HTML Tags to
Define the Web Page Structure
Chapter 4: Creating Tables in a Web Site
18
Creating a Horizontal Menu Bar
with Text Links
• menu bar placed at the top or left side of page prevents
user from having to search the page for navigation links
• cellspacing attribute set amount of space between cells
– gives table additional white space, creates more polished
readable look
• width attribute – changes width of each column relative to
entire table
– percentage mode – preferred if window resized in browser
– pixels mode – less flexible method
Project 4: Creating Tables in a Web Site
19
Creating a Horizontal Menu Bar
with Text Links
• If necessary, click line 18
• Enter the HTML code shown in Table 4-4, pressing
ENTER after each line
• Press the ENTER key once
Chapter 4: Creating Tables in a Web Site
20
Creating a Horizontal Menu Bar with
Text Links
pipe symbol used
as divider between
link text
list of text links
in data cells
creates menu bar
More on Web
Project 4: Creating Tables in a Web Site
21
Validating a Web Page
• Open Internet Explorer and navigate to the Web
site validator.w3.org
• Click the Validate by File Upload tab
• Click the Browse button
• Locate the statewide.html file on your storage
device and click the file name
• Click the Open button in the Choose file dialog
box and the file name will be inserted into the File
box
• Click the Check button
Chapter 4: Creating Tables in a Web Site
22
Viewing a Web Page
• In Internet Explorer, click the Address bar to
select the URL on the Address bar
• Type E:\HTML\ChapterFiles\Chapter04\
statewide.html on the Address bar of your
browser and press ENTER to display the Web
page
Chapter 4: Creating Tables in a Web Site
23
Viewing a Web Page
image
positioned
In borderless
table
horizontal
menu bar
Project 4: Creating Tables in a Web Site
24
Creating a Table with Borders
and Inserting Text
<table> with
border=“5” and
width=75%
header tags
and text
data
cells
Project 4: Creating Tables in a Web Site
25
Validating, Viewing, and Printing
the Web Page Using the Browser
• Click the Internet Explorer button on the taskbar
• Use the W3C validator service to validate the
complex.html Web page
• Use the Back button or click the Statewide Realty
Home Page button on the taskbar to return to the
Statewide Realty home page
• Click the By Complex link to display the By
Complex page
• Click the Print button on the Command bar to print
the Statewide Realty - By Complex Web page
Chapter 4: Creating Tables in a Web Site
26
Validating, Viewing, and Printing the
Web Page Using the Browser
image
positioned in
borderless table
horizontal
menu bar
table with
border
Project 4: Creating Tables in a Web Site
27
Adding Cellspacing and Cellpadding
and a Caption
• cellspacing defines the number of pixels of space
between cells in a table
• cellpadding defines the number of pixels of space
within a cell in a table
– cellspacing=“2” cellpadding=“5”
• caption describes the purpose of a table
<caption align=“bottom”><em>Listing of
movies by actor</em></caption>
Project 4: Creating Tables in a Web Site
28
Adding Cellspacing and Cellpadding
and a Caption
with cellpadding
and cellspacing
table
caption
Project 4: Creating Tables in a Web Site
29
Creating the Headings
That Span Rows
rowspan
spanning
3 rows
colspan
spanning
3 columns
Project 4: Creating Tables in a Web Site
30
Spanning the Main Heading
across All Columns
first
colspan
More on Web
Project 4: Creating Tables in a Web Site
31
Viewing and Printing the Web Page
colspan
attribute
used for
heading
spanning
four
columns
rowspan
attribute
used for
headings
each
spanning
three rows
Project 4: Creating Tables in a Web Site
colspan
attribute
used for
headings
each
spanning
three
columns
32
Chapter Summary
• Define table elements
• Describe the steps used to plan, design, and
code a table
• Create a borderless table to position images
• Create a horizontal menu bar with text links
Chapter 4: Creating Tables in a Web Site
33
Chapter Summary
•
•
•
•
Copy and paste HTML code to a new file
Create a borderless table to organize text
Create a table with borders and insert text
Change the horizontal alignment of text
Chapter 4: Creating Tables in a Web Site
34
Chapter Summary
• Add background color to rows and cells
• Alter the spacing between and within cells using
the cellspacing and cellpadding attributes
• Insert a caption below a table
• Create headings that span rows and columns
using the rowspan and colspan attributes
Chapter 4: Creating Tables in a Web Site
35
Homework # 7
• In the Lab 3 page HTML 198-199
• Creating Linked Schedules
• See INF 186 Computer Assignment 7 Web page
for details, hints, and requirements for the
assignment
Project 4: Creating Tables in a Web Site
36
HTML
Concepts and Techniques
Fourth Edition
Project 4 Complete
Creating Tables in a Web Site