Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Concepts and Techniques Fourth Edition Chapter 4 Creating Tables in a Web Site.

Similar presentations


Presentation on theme: "HTML Concepts and Techniques Fourth Edition Chapter 4 Creating Tables in a Web Site."— Presentation transcript:

1 HTML Concepts and Techniques Fourth Edition Chapter 4 Creating Tables in a Web Site

2 Chapter 4: Creating Tables in a Web Site 2 Chapter Objectives Define table elements Describe the steps used to plan, design, and code a table Create a borderless table to position images Create a horizontal menu bar with text links

3 Chapter 4: Creating Tables in a Web Site 3 Chapter Objectives Copy and paste HTML code to a new file Create a borderless table to organize text Create a table with borders and insert text Change the horizontal alignment of text

4 Chapter 4: Creating Tables in a Web Site 4 Chapter Objectives Add background color to rows and cells Alter the spacing between and within cells using the cellspacing and cellpadding attributes Insert a caption below a table Create headings that span rows and columns using the rowspan and colspan attributes

5 Project 4: Creating Tables in a Web Site 5 Introduction Project uses tables –learn about elements used in table –plan, design, and code a table –create tables to organize text and images –table column to create menu bar with text links –enhance tables using attributes and formats borders, colors, spacing, blank cells, and adding a caption

6 Project 4: Creating Tables in a Web Site 6 Page 1 – Statewide Realty image positioned In borderless table

7 Project 4: Creating Tables in a Web Site 7 By Complex – Statewide Realty menu bar table with background color in header row

8 Project 4: Creating Tables in a Web Site 8 By Vacancy– Statewide Realty cellspacing and cellpadding attributes used to space text in table table caption

9 Project 4: Creating Tables in a Web Site 9 By Bedrooms – Statewide Realty colspan attribute used for headings each spanning three columns rowspan attribute used for headings each spanning three rows colspan attribute used for heading spanning four columns

10 Project 4: Creating Tables in a Web Site 10 Table Elements Tables consist of rows, columns, and cells, much like a spreadsheet row – horizontal line of information column – vertical line of information cell – intersection of row and column heading cell – displays text as bold and center- aligned data cell – displays normal text that is left aligned

11 Project 4: Creating Tables in a Web Site 11 Table Borders, Headers, Captions, and Rules table border is the line that encloses the perimeter of a table table header – is the same as a heading cell, any cell with bold text that indicates purpose of the row or column table caption – descriptive text located above or below the table describing the purpose of the table rules attribute – allows developer to select which internal borders to show in a table –rules=none no internal rules –rules=cols creates table with vertical rules between each column –rules=rows creates table with horizontal rules between each row More on Web

12 Project 4: Creating Tables in a Web Site 12 Planning, Designing, and Coding a Table Creating tables for Web Page Three step Process 1.determining if a table is needed 2.planning the table 3.coding the table

13 Project 4: Creating Tables in a Web Site 13 Determining If a Table Is Needed table should be used: –organize information on a Web page making it easier to read –needs to display a structured, organized list of information –includes text and images that must be positioned in a very specific manner

14 Project 4: Creating Tables in a Web Site 14 Planning a Table –plan how information will appear in the table and then create a good design –sketch the table on paper before writing any HTML code saves time when determining HTML tags how many rows and columns to create if table will include headings –include headings that span rows and columns –include a table caption More on Web

15 Project 4: Creating Tables in a Web Site 15 Coding a Table table rows indicated in HTML code – and tags table heading indicated in HTML code – and tags appears bold and centered table data indicated in HTML code – and tags appears normal and left-aligned

16 Project 4: Creating Tables in a Web Site 16 Coding a Table

17 Project 4: Creating Tables in a Web Site 17 Table Tag Attributes

18 Chapter 4: Creating Tables in a Web Site 18 Entering the HTML Tags to Define the Web Page Structure

19 Project 4: Creating Tables in a Web Site 19 Creating a Horizontal Menu Bar with Text Links menu bar placed at the top or left side of page prevents user from having to search the page for navigation links cellspacing attribute set amount of space between cells –gives table additional white space, creates more polished readable look width attribute – changes width of each column relative to entire table –percentage mode – preferred if window resized in browser –pixels mode – less flexible method

20 Chapter 4: Creating Tables in a Web Site 20 Creating a Horizontal Menu Bar with Text Links If necessary, click line 18 Enter the HTML code shown in Table 4-4, pressing ENTER after each line Press the ENTER key once

21 Project 4: Creating Tables in a Web Site 21 Creating a Horizontal Menu Bar with Text Links list of text links in data cells creates menu bar pipe symbol used as divider between link text More on Web

22 Validating a Web Page Open Internet Explorer and navigate to the Web site validator.w3.orgvalidator.w3.org Click the Validate by File Upload tabValidate by File Upload Click the Browse button Locate the statewide.html file on your storage device and click the file name Click the Open button in the Choose file dialog box and the file name will be inserted into the File box Click the Check button Chapter 4: Creating Tables in a Web Site 22

23 Viewing a Web Page In Internet Explorer, click the Address bar to select the URL on the Address bar Type E:\HTML\ChapterFiles\Chapter04\ statewide.html on the Address bar of your browser and press ENTER to display the Web page Chapter 4: Creating Tables in a Web Site 23

24 Project 4: Creating Tables in a Web Site 24 Viewing a Web Page image positioned In borderless table horizontal menu bar

25 Project 4: Creating Tables in a Web Site 25 Creating a Table with Borders and Inserting Text with border=5 and width=75% header tags and text data cells

26 Validating, Viewing, and Printing the Web Page Using the Browser Click the Internet Explorer button on the taskbar Use the W3C validator service to validate the complex.html Web pageW3C validator Use the Back button or click the Statewide Realty Home Page button on the taskbar to return to the Statewide Realty home page Click the By Complex link to display the By Complex page Click the Print button on the Command bar to print the Statewide Realty - By Complex Web page Chapter 4: Creating Tables in a Web Site 26

27 Project 4: Creating Tables in a Web Site 27 Validating, Viewing, and Printing the Web Page Using the Browser image positioned in borderless table horizontal menu bar table with border

28 Project 4: Creating Tables in a Web Site 28 Adding Cellspacing and Cellpadding and a Caption cellspacing defines the number of pixels of space between cells in a table cellpadding defines the number of pixels of space within a cell in a table –cellspacing=2 cellpadding=5 caption describes the purpose of a table Listing of movies by actor

29 Project 4: Creating Tables in a Web Site 29 Adding Cellspacing and Cellpadding and a Caption with cellpadding and cellspacing table caption

30 Project 4: Creating Tables in a Web Site 30 Creating the Headings That Span Rows rowspan spanning 3 rows colspan spanning 3 columns

31 Project 4: Creating Tables in a Web Site 31 Spanning the Main Heading across All Columns first colspan More on Web

32 Project 4: Creating Tables in a Web Site 32 Viewing and Printing the Web Page colspan attribute used for headings each spanning three columns rowspan attribute used for headings each spanning three rows colspan attribute used for heading spanning four columns

33 Chapter 4: Creating Tables in a Web Site 33 Chapter Summary Define table elements Describe the steps used to plan, design, and code a table Create a borderless table to position images Create a horizontal menu bar with text links

34 Chapter 4: Creating Tables in a Web Site 34 Chapter Summary Copy and paste HTML code to a new file Create a borderless table to organize text Create a table with borders and insert text Change the horizontal alignment of text

35 Chapter 4: Creating Tables in a Web Site 35 Chapter Summary Add background color to rows and cells Alter the spacing between and within cells using the cellspacing and cellpadding attributes Insert a caption below a table Create headings that span rows and columns using the rowspan and colspan attributes

36 Project 4: Creating Tables in a Web Site 36 Homework # 7 In the Lab 3 page HTML HTML Creating Linked Schedules See INF 186 Computer Assignment 7 Web page for details, hints, and requirements for the assignmentINF 186 Computer Assignment 7 Web page

37 HTML Concepts and Techniques Fourth Edition Project 4 Complete Creating Tables in a Web Site


Download ppt "HTML Concepts and Techniques Fourth Edition Chapter 4 Creating Tables in a Web Site."

Similar presentations


Ads by Google