HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.

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

8

Creating Web Pages with Tables

text wrapping

9

Creating Web Pages with Tables

imagesin table

borderlesstable

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

11

Table Elements

row

12

Table Elements

column

13

Table Elements

cell

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

15

Other Table Parts

bordercaption

headingcell

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

18

Determining if a Table is Needed

table

bulletedlist

19

Planning the Table

Must begin with good designSketch the table before writing HTML

20

Coding the Table

Four main tags in coding a table:

21

Coding the Table

heading cellsdata cells

start table

end table

22

Table Attributes

23

Start Notepad

24

Enter Initial HTML Tags

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

26

27

Adding a Heading Table

table tag

28

Adding the Logo Image

begin first row

data cellend row

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

31

Creating a Listof Links with Text

no column spacing

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

33

Creating a List of Links in a Column

link list tags

34

Creating a List of Links in a Column

link list

35

Adding Text

Add the following code to your document:

36

Adding Text

paragraphsof text

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

38

HTML Document Printout

39

Viewing the Web Page

Start your browserType a:\tchome.htm in the Address

text box and press the ENTER key

40

Viewing the Web Page

images

link list

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

45

Copying a Table to a New File

pasted text

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

47

Changing the Title

change to title

48

Inserting a Menu Bar

Insert the following lines starting on line 17

49

Inserting a Menu Bar

new table

50

Creating a Table with Borders

tableborder

51

Creating a Table with Borders

borderlesstable

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

54

Enter the Remaining CodeInsert the following

lines starting on line 51

55

Enter the Remaining Code

four rows of data cells

end table

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

57

Save and Print the HTML File

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

59

The Calendar Web Page

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

63

Adding Cellspacing and Cellpadding

no cellpaddingor cellspacing

64

Adding Cellspacing and Cellpadding

with cellpaddingand 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

66

The members.htm File

67

Adding Cellspacing and Cellpadding

add the followingcellpadding and

cellspacing attributes

68

Changing Column Widths

Add the Width attributeto the <TD> tags

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

71

The Completed Table

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

75

Spanning the Main Heading Across All Columns

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

78

Spanning the Main Heading Across All Columns

columnspanning

79

Creating Additional HeadingsThat Span Rows and ColumnsInsert the following lines starting on

line 38

80

Creating Additional HeadingsThat Span Rows and Columns

81

Creating Additional HeadingsThat Span Rows and Columns

headingspans columns

headingspans rows

82

Adding the Remaining Rowspan Tag

HTML for row span

83

Adding the Remaining Colspan Tag

HTML for column span

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

85

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

93

What You Should Know

HTMLComprehensive Concepts and TechniquesSecond Edition

Project 3 Complete