Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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