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

2 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

3 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

4 Objectives  Alter the spacing within cells using the CELLPADDING attribute  Use the ROWSPAN attribute  Use the COLSPAN attribute  Use 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 Tables complex table simple table colored cells column spanno cell borders row span colored background

7 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

8 Creating Web Pages with Tables text wrapping

9 Creating Web Pages with Tables images in table borderless table

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 border caption heading cell

16 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

17 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

18 Determining if a Table is Needed table bulleted list

19 Planning the Table  Must begin with good design  Sketch the table before writing HTML

20 Coding the Table  Four main tags in coding a table:

21 Coding the Table heading cells data cells start table end table

22 Table Attributes

23 Start Notepad

24 Enter Initial HTML Tags

25 Adding a Borderless Header Table with Images start table border width number of 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 row end row end table

30 Creating a List of 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 List of Links with Text no column spacing

32 Creating a List of Links with Text  You employ four table attributes in the tag for the text and link list table start table number of columns width relative to window cellspacing in pixels border width 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 paragraphs of text

37 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

38 HTML Document Printout

39 Viewing the Web Page  Start your browser  Type 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 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

43 Creating a Menu Bar on a Secondary Web Page table copied from home page menu bar

44 Copying a Table to a New File  Click the tchome - Notepad button on the taskbar  Click immediately to the left of the tag on line 1. Drag through the first 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

45 Copying a Table to a New File pasted text

46 Changing the Title  Highlight the words, Home Page, between the and tags on line 3. Type Calendar as the text  Click immediately to the right of the tag on line 15. Press the ENTER key twice  Type the closing and 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 table border

51 Creating a Table with Borders borderless table

52 Inserting Text into Heading and Data Cells  Insert 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

54 Enter the Remaining Code  Insert 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 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

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

62 Spacing, Column Widths, and Captions Differences in cellpadding and cellspacing

63 Adding Cellspacing and Cellpadding no cellpadding or cellspacing

64 Adding Cellspacing and Cellpadding with 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

66 The members.htm File

67 Adding Cellspacing and Cellpadding add the following cellpadding and cellspacing attributes

68 Changing Column Widths Add the Width attribute to the tags

69 Adding a Caption HTML for inserting the caption Captions can be aligned either at the top or bottom of a table

70 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

71 The Completed Table

72 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

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 COLSPAN attribute in the tag

77 Spanning the Main Heading Across All Columns add the and tags

78 Spanning the Main Heading Across All Columns column spanning

79 Creating Additional Headings That Span Rows and Columns  Insert the following lines starting on line 38

80 Creating Additional Headings That Span Rows and Columns

81 Creating Additional Headings That Span Rows and Columns heading spans columns heading spans 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 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

85

86 Close Notepad and Your Browser  Click the Close button on the browser title bar  Click 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 cells with borders QUIZ GRADES

89 Using Blank Cells blank cells without borders QUIZ GRADES

90 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

91 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

92 Summary  Alter the spacing within cells using the CELLPADDING attribute  Use the ROWSPAN attribute  Use the COLSPAN attribute  Use blank cells

93 What You Should Know

HTML Comprehensive Concepts and Techniques Second Edition Project 3 Complete