Upload
james-dean
View
230
Download
0
Tags:
Embed Size (px)
Citation preview
HTMLComprehensive Concepts and TechniquesSecond Edition
Project 3
Creating Tablesin a Web Site
2
Objectives
Define table elementsDescribe the steps used to plan,
design, and code a tableCreate a borderless table with images
onlyCreate a list of links with textCreate a borderless table with text onlyCreate a menu bar with links
3
Objectives
Create a table with bordersChange the horizontal alignment of textAdd color to individual cellsAdd color to entire rowsInsert a caption beneath a tableAlter the spacing between cells using
the CELLSPACING attribute
4
Objectives
Alter the spacing within cells using the CELLPADDING attribute
Use the ROWSPAN attributeUse the COLSPAN attributeUse blank cells
5
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
6
Creating Web Pages with Tablescomplex table
simple table
colored cells
column spanno cellborders
row span
colored background
7
Creating Web Pages with TablesTables can have text and/or imagesYou 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
10
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 center-
aligned• Data cells display normal text that is left-
aligned
14
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
16
Planning, Designing, and Coding a TableCreating tables for a Web page is a
three-step process:– Determine if a table is needed– Plan the table– Code the table
17
Determining if a Table is NeededNot all Web page applications require
the use of tablesA table is appropriate when it makes
the Web page easier to read
19
Planning the Table
Must begin with good designSketch the table before writing HTML
25
Adding a Borderless Header Table with Images
<TABLE BORDER=0 COLS=1 WIDTH=80% ALIGN=CENTER>
starttable
borderwidth
numberof columns
width relative to window
alignment
29
Adding the Horizontal Rule Image
begin second row
second rowend row
end table
30
Creating a Listof Links with Text
Use the CELLSPACING attribute to insert some
space between the left and right column
space between columns
two columns
32
Creating a Listof Links with TextYou employ four table attributes in the
<TABLE> tag for the text and link list table
<TABLE BORDER=0 COLS=2 CELLSPACING=15 WIDTH=90% ALIGN=CENTER>
starttable
numberof columns
width relativeto window
cellspacingin pixels
borderwidth
alignment
37
Save and Print the HTML FileInsert the HTML Data Disk into drive ASelect Save As from the File menuType tchome.htm in the File name
text box, then click the Save buttonSelect Print from the File menu
39
Viewing the Web Page
Start your browserType a:\tchome.htm in the Address
text box and press the ENTER key
41
Printing the Web Page
Click the Print button on the Standard Buttons toolbar
42
Creating a Menu Bar on a Secondary Web PageIt is important for visitors to be able to
move easily from one page to anotherYou will create a menu bar on the
three remaining Web pages in this project
A Web page should not contain a link to itself
43
Creating a Menu Bar on a Secondary Web Page
table copied fromhome page
menu bar
44
Copying a Table to a New FileClick the tchome - Notepad button on the
taskbarClick 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 linesSelect New from the File menuPress CTRL+V to paste the contents from
the Clipboard into a new file
46
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
52
Inserting Text into Heading and Data CellsInsert the following lines starting on
line 29
53
Inserting Text into Heading and Data Cells
TABLE tag with border
heading tags and text
data cells
data cells
56
Save and Print the HTML FileInsert the HTML Data Disk into drive ASelect Save As from the File menuType calendar.htm in the File
name text box, then click the Save button
Select Print from the File menu
58
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
60
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
61
Spacing, Column Widths, and CaptionsCellspacing and Cellpadding alter the
size of table cellsCells are the minimum size when you
don’t specify cellpadding or cellspacingCellspacing is the number of pixels
between cellsCellpadding is the number of pixels
within a cell
62
Spacing, Column Widths, and Captions
Differences in cellpadding and cellspacing
65
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
67
Adding Cellspacing and Cellpadding
add the followingcellpadding and
cellspacing attributes
69
Adding a Caption
HTML for insertingthe caption
Captions can be alignedeither at the top orbottom of a table
70
To Save and Print the HTML File andView and Print the Web PageWith the HTML Data Disk in drive A, click
File on the menu bar and then click SaveClick File on the menu bar and then click
PrintClick the Theater Club Members button in
the taskbarClick the Refresh button on the Standard
Buttons toolbarClick the Print button on the Standard
Buttons toolbar
72
Spanning Rows and ColumnsAllows you to insert headings that go
across rows or columnsUse the ROWSPAN and COLSPAN
attributesBefore 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
73
Spanning Rows and Columns
spanning seven rows
spanning four rows
spanning three columns
spanning two columns
74
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
76
Spanning the Main Heading Across All Columns
The COLSPANattribute in the <TH>
tag
77
Spanning the Main Heading Across All Columns
add the </TH> and </TR> tags
79
Creating Additional HeadingsThat Span Rows and ColumnsInsert the following lines starting on
line 38
81
Creating Additional HeadingsThat Span Rows and Columns
headingspans columns
headingspans rows
84
To Save and Print the HTML File andView and Print the Web PageWith the HTML Data Disk in drive A, click
File on the menu bar and then click SaveClick File on the menu bar and then click
PrintClick the Anything Goes button on the
taskbarClick the Refresh button on the Standard
Buttons toolbarClick the Print button on the Standard
Buttons toolbar
86
Close Notepad and Your BrowserClick the Close button on the browser
title barClick the Close button on the Notepad
window title bar
87
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
88
Using Blank Cells
blank cellswith 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>
89
Using Blank Cells
blank cellswithout borders
<TR><TD BGCOLOR=“#FFE7C6”></TD><TD BGCOLOR=“#FFE7C6”></TD><TH COLSPAN=“5”><FONT COLOR=“FF8429” SIZE=+2>QUIZ GRADES</FONT></TH></TR>
90
Summary
Define table elementsDescribe the steps used to plan,
design, and code a tableCreate a borderless table with images
onlyCreate a list of links with textCreate a borderless table with text onlyCreate a menu bar with links
91
Summary
Create a table with bordersChange the horizontal alignment of textAdd color to individual cellsAdd color to entire rowsInsert a caption beneath a tableAlter the spacing between cells using
the CELLSPACING attribute
92
Summary
Alter the spacing within cells using the CELLPADDING attribute
Use the ROWSPAN attributeUse the COLSPAN attributeUse blank cells