HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
-
Upload
james-dean -
Category
Documents
-
view
230 -
download
0
Transcript of HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
![Page 1: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/1.jpg)
HTMLComprehensive Concepts and TechniquesSecond Edition
Project 3
Creating Tablesin a Web Site
![Page 2: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/2.jpg)
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
![Page 3: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/3.jpg)
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
![Page 4: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/4.jpg)
4
Objectives
Alter the spacing within cells using the CELLPADDING attribute
Use the ROWSPAN attributeUse the COLSPAN attributeUse blank cells
![Page 5: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/5.jpg)
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
![Page 6: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/6.jpg)
6
Creating Web Pages with Tablescomplex table
simple table
colored cells
column spanno cellborders
row span
colored background
![Page 7: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/7.jpg)
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
![Page 10: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/10.jpg)
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
![Page 14: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/14.jpg)
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
![Page 16: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/16.jpg)
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
![Page 17: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/17.jpg)
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
![Page 19: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/19.jpg)
19
Planning the Table
Must begin with good designSketch the table before writing HTML
![Page 25: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/25.jpg)
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
![Page 29: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/29.jpg)
29
Adding the Horizontal Rule Image
begin second row
second rowend row
end table
![Page 30: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/30.jpg)
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
![Page 32: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/32.jpg)
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
![Page 37: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/37.jpg)
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
![Page 39: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/39.jpg)
39
Viewing the Web Page
Start your browserType a:\tchome.htm in the Address
text box and press the ENTER key
![Page 41: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/41.jpg)
41
Printing the Web Page
Click the Print button on the Standard Buttons toolbar
![Page 42: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/42.jpg)
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
![Page 43: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/43.jpg)
43
Creating a Menu Bar on a Secondary Web Page
table copied fromhome page
menu bar
![Page 44: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/44.jpg)
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
![Page 46: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/46.jpg)
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
![Page 52: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/52.jpg)
52
Inserting Text into Heading and Data CellsInsert the following lines starting on
line 29
![Page 53: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/53.jpg)
53
Inserting Text into Heading and Data Cells
TABLE tag with border
heading tags and text
data cells
data cells
![Page 56: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/56.jpg)
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
![Page 58: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/58.jpg)
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
![Page 60: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/60.jpg)
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
![Page 61: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/61.jpg)
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
![Page 62: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/62.jpg)
62
Spacing, Column Widths, and Captions
Differences in cellpadding and cellspacing
![Page 65: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/65.jpg)
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
![Page 67: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/67.jpg)
67
Adding Cellspacing and Cellpadding
add the followingcellpadding and
cellspacing attributes
![Page 69: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/69.jpg)
69
Adding a Caption
HTML for insertingthe caption
Captions can be alignedeither at the top orbottom of a table
![Page 70: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/70.jpg)
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
![Page 72: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/72.jpg)
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
![Page 73: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/73.jpg)
73
Spanning Rows and Columns
spanning seven rows
spanning four rows
spanning three columns
spanning two columns
![Page 74: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/74.jpg)
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
![Page 76: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/76.jpg)
76
Spanning the Main Heading Across All Columns
The COLSPANattribute in the <TH>
tag
![Page 77: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/77.jpg)
77
Spanning the Main Heading Across All Columns
add the </TH> and </TR> tags
![Page 79: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/79.jpg)
79
Creating Additional HeadingsThat Span Rows and ColumnsInsert the following lines starting on
line 38
![Page 81: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/81.jpg)
81
Creating Additional HeadingsThat Span Rows and Columns
headingspans columns
headingspans rows
![Page 84: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/84.jpg)
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
![Page 86: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/86.jpg)
86
Close Notepad and Your BrowserClick the Close button on the browser
title barClick the Close button on the Notepad
window title bar
![Page 87: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/87.jpg)
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
![Page 88: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/88.jpg)
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>
![Page 89: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/89.jpg)
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>
![Page 90: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/90.jpg)
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
![Page 91: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/91.jpg)
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
![Page 92: HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e25f/html5/thumbnails/92.jpg)
92
Summary
Alter the spacing within cells using the CELLPADDING attribute
Use the ROWSPAN attributeUse the COLSPAN attributeUse blank cells