Transcript Creating Web Pages with Tables

HTML
Comprehensive Concepts and Techniques
Second Edition
Project 3
Creating Tables
in a Web Site
Objectives
Define table elements
Describe the steps used to plan,
design, and code a table
Create a borderless table with images
only
Create a list of links with text
Create a borderless table with text only
Create a menu bar with links
2
Objectives
Create a table with borders
Change the horizontal alignment of text
Add color to individual cells
Add color to entire rows
Insert a caption beneath a table
Alter the spacing between cells using
the CELLSPACING attribute
3
Objectives
Alter the spacing within cells using the
CELLPADDING attribute
Use the ROWSPAN attribute
Use the COLSPAN attribute
Use blank cells
4
Introduction
Tables allow you to position elements
easily on a Web page
You can develop simple tables or
complex tables
Web page files for this project can be
found on the HTML Data Disk
Once again, you will be using Notepad
to develop your HTML
5
Creating Web Pages with Tables
complex table
no cell
borders
column span
colored background
row span
simple table
colored cells
6
Creating Web Pages with Tables
Tables can have text and/or images
You can use a table to wrap text
around an image
– Tables give you more control over the
placement of the text and image
Tables help make the content on Web
pages clear, interesting, and easy to
read
7
Creating Web Pages with Tables
text wrapping
8
Creating Web Pages with Tables
images
in table
borderless
table
9
Table Elements
Tables consist of rows, columns, and
cells
– A row is a horizontal line of information
– A column is a vertical line of information
– A cell is the intersection of a row and a
column
• Heading cells display text as bold and centeraligned
• Data cells display normal text that is leftaligned
10
Table Elements
row
11
Table Elements
column
12
Table Elements
cell
13
Other Table Parts
Table borders are lines that
encompass the perimeter of the table
Table headers are bold text that
indicate the purpose of the row or
column
A table caption is descriptive text
located above or below the table that
further describes the purpose of the
table
14
Other Table Parts
heading
cell
border
15
caption
Planning, Designing,
and Coding a Table
Creating tables for a Web page is a
three-step process:
– Determine if a table is needed
– Plan the table
– Code the table
16
Determining if a Table is Needed
Not all Web page applications require
the use of tables
A table is appropriate when it makes
the Web page easier to read
17
Determining if a Table is Needed
bulleted
list
18
table
Planning the Table
Must begin with good design
Sketch the table before writing HTML
19
Coding the Table
Four main tags in coding a table:
20
Coding the Table
start table
heading cells
data cells
end table
21
Table Attributes
22
Start Notepad
23
Enter Initial HTML Tags
24
Adding a Borderless
Header Table with Images
border
width
width relative to window
<TABLE BORDER=0 COLS=1 WIDTH=80% ALIGN=CENTER>
25
start
table
number
of columns
alignment
26
Adding a Heading Table
table tag
27
Adding the Logo Image
begin first row
end row
28
data cell
Adding the Horizontal Rule Image
begin second row
end row
end table
29
second row
Creating a List
of Links with Text
Use the CELLSPACING
attribute to insert some
space between the left and
right column
space between columns
30
two columns
Creating a List
of Links with Text
no column spacing
31
Creating a List
of Links with Text
You employ four table attributes in the
<TABLE> tag for the text and link list
table
border
width
cellspacing
in pixels
alignment
<TABLE BORDER=0 COLS=2 CELLSPACING=15 WIDTH=90% ALIGN=CENTER>
start
table
32
number
of columns
width relative
to window
Creating a List
of Links in a Column
link list tags
33
Creating a List
of Links in a Column
link list
34
Adding Text
Add the following code to your
document:
35
Adding Text
paragraphs
of text
36
Save and Print the HTML File
Insert the HTML Data Disk into drive A
Select Save As from the File menu
Type tchome.htm in the File name
text box, then click the Save button
Select Print from the File menu
37
HTML Document Printout
38
Viewing the Web Page
Start your browser
Type a:\tchome.htm in the Address
text box and press the ENTER key
39
Viewing the Web Page
images
link list
40
Printing the Web Page
Click the Print
button on the
Standard Buttons
toolbar
41
Creating a Menu Bar on a
Secondary Web Page
It is important for visitors to be able to
move easily from one page to another
You will create a menu bar on the three
remaining Web pages in this project
A Web page should not contain a link
to itself
42
Creating a Menu Bar on a
Secondary Web Page
table copied from
home page
menu bar
43
Copying a Table
to a New File
Click the tchome - Notepad button on the
taskbar
Click immediately to the left of the < in the
<HTML> tag on line 1. Drag through the first
</TABLE> tag on line 15
Press CTRL+C to copy the selected lines
Select New from the File menu
Press CTRL+V to paste the contents from
the Clipboard into a new file
44
Copying a Table
to a New File
pasted text
45
Changing the Title
Highlight the words, Home Page,
between the <TITLE> and </TITLE>
tags on line 3. Type Calendar as the
text
Click immediately to the right of the
</TABLE> tag on line 15. Press the
ENTER key twice
Type the closing </BODY> and
</HTML> tags
46
Changing the Title
change to title
47
Inserting a Menu Bar
Insert the following lines starting on
line 17
48
Inserting a Menu Bar
new table
49
Creating a Table with Borders
table
border
50
Creating a Table with Borders
borderless
table
51
Inserting Text into
Heading and Data Cells
Insert the following lines starting on
line 29
52
Inserting Text into
Heading and Data Cells
TABLE tag with border
heading tags and text
data cells
data cells
53
Enter the Remaining Code
Insert the following
lines starting on line
51
54
Enter the Remaining Code
four rows of data cells
end table
55
Save and Print the HTML File
Insert the HTML Data Disk into drive A
Select Save As from the File menu
Type calendar.htm in the File name
text box, then click the Save button
Select Print from the File menu
56
Save and Print the HTML File
57
Printing the Web Page
Click the Theater Club Home Page
button on the task bar
Click the Calendar of Events link on
the Theater Club Home Page
Click the Print button on the Standard
buttons toolbar
58
The Calendar Web Page
59
Testing the Links
Click the Home link on the Calendar
menu bar
Click the Calendar of Events link on
the home page to return
Click the Upcoming Play link on the
Calendar Web page
Click the Members link on the Anything
Goes Web page
60
Spacing, Column Widths,
and Captions
Cellspacing and Cellpadding alter the
size of table cells
Cells are the minimum size when you
don’t specify cellpadding or cellspacing
Cellspacing is the number of pixels
between cells
Cellpadding is the number of pixels
within a cell
61
Spacing, Column Widths,
and Captions
Differences in
cellpadding and cellspacing
62
Adding Cellspacing
and Cellpadding
no cellpadding
or cellspacing
63
Adding Cellspacing
and Cellpadding
with cellpadding
and cellspacing
64
Opening members.htm
Click the calendar – Notepad button on the
taskbar
With the HTML Data Disk in drive A, select
Open from the File menu
If necessary, click the Look in box arrow and
then click 3½ Floppy (A:)
If necessary, click the Files of type box arrow
and then click All Files (*.*). Click
members.htm
Click the Open button
65
The members.htm File
66
Adding Cellspacing
and Cellpadding
add the following
cellpadding and
cellspacing attributes
67
Changing Column Widths
Add the Width attribute
to the <TD> tags
68
Adding a Caption
Captions can be aligned
either at the top or
bottom of a table
HTML for inserting
the caption
69
To Save and Print the HTML File and
View and Print the Web Page
With the HTML Data Disk in drive A, click
File on the menu bar and then click Save
Click File on the menu bar and then click
Print
Click the Theater Club Members button in
the taskbar
Click the Refresh button on the Standard
Buttons toolbar
Click the Print button on the Standard
Buttons toolbar
70
The Completed Table
71
Spanning Rows and Columns
Allows you to insert headings that go
across rows or columns
Use the ROWSPAN and COLSPAN
attributes
Before deciding whether to span rows
or columns, lay out the table design on
paper
In the browser, click the Upcoming
Play link on the Members menu bar
72
Spanning Rows and Columns
spanning three columns
spanning two columns
spanning seven rows
spanning four rows
73
Opening anything.htm
Click the members.htm – Notepad button on
the taskbar
With the HTML Data Disk in drive A, click
File on the menu bar and then click Open
If necessary, click the Look in box arrow and
then click 3½ Floppy (A:)
If necessary, click the Files of type box
arrow, click All files (*.*), and then click
anything.htm
Click the Open button
74
Spanning the Main Heading
Across All Columns
75
Spanning the Main Heading
Across All Columns
The COLSPAN
attribute in the <TH>
tag
76
Spanning the Main Heading
Across All Columns
add the </TH> and </TR> tags
77
Spanning the Main Heading
Across All Columns
column
spanning
78
Creating Additional Headings
That Span Rows and Columns
Insert the following lines starting on
line 38
79
Creating Additional Headings
That Span Rows and Columns
80
Creating Additional Headings
That Span Rows and Columns
heading
spans columns
heading
spans rows
81
Adding the Remaining Rowspan Tag
HTML for row span
82
Adding the Remaining Colspan Tag
HTML for
column span
83
To Save and Print the HTML File and
View and Print the Web Page
With the HTML Data Disk in drive A, click
File on the menu bar and then click Save
Click File on the menu bar and then click
Print
Click the Anything Goes button on the
taskbar
Click the Refresh button on the Standard
Buttons toolbar
Click the Print button on the Standard
Buttons toolbar
84
85
Close Notepad and Your Browser
Click the Close button on the browser
title bar
Click the Close button on the Notepad
window title bar
86
Using Blank Cells
Blank cells with borders indicate a cell
is empty
Blank cells without borders might be
used to enhance the appearance of a
table
87
Using Blank Cells
blank cells
with borders
<TR>
<TD BGCOLOR=“#FFE7C6”><BR></TD>
<TD BGCOLOR=“#FFE7C6”><BR></TD>
<TH COLSPAN=“5”><FONT COLOR=“FF8429” SIZE=+2>QUIZ GRADES
</FONT>
</TH>
</TR>
88
Using Blank Cells
blank cells
without borders
<TR>
<TD BGCOLOR=“#FFE7C6”></TD>
<TD BGCOLOR=“#FFE7C6”></TD>
<TH COLSPAN=“5”><FONT COLOR=“FF8429” SIZE=+2>QUIZ GRADES
</FONT>
</TH>
</TR>
89
Summary
Define table elements
Describe the steps used to plan,
design, and code a table
Create a borderless table with images
only
Create a list of links with text
Create a borderless table with text only
Create a menu bar with links
90
Summary
Create a table with borders
Change the horizontal alignment of text
Add color to individual cells
Add color to entire rows
Insert a caption beneath a table
Alter the spacing between cells using
the CELLSPACING attribute
91
Summary
Alter the spacing within cells using the
CELLPADDING attribute
Use the ROWSPAN attribute
Use the COLSPAN attribute
Use blank cells
92
What You Should Know
93
HTML
Comprehensive Concepts and Techniques
Second Edition
Project 3 Complete