Presentation is loading. Please wait.

Presentation is loading. Please wait.

Creating Tables in a Web Site

Similar presentations


Presentation on theme: "Creating Tables in a Web Site"— Presentation transcript:

1 Creating Tables in a Web Site
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 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 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 Chapter 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 Project 4: Creating Tables in a Web Site

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

7 By Complex – Statewide Realty
menu bar table with background color in header row 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 Project 4: Creating Tables in a Web Site

9 By Bedrooms – Statewide Realty
colspan attribute used for heading spanning four columns colspan attribute used for headings each spanning three columns rowspan attribute used for headings each spanning three rows 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 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 Project 4: Creating Tables in a Web Site

12 Planning, Designing, and Coding a Table
Creating tables for Web Page Three step Process determining if a table is needed planning the table coding the table 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 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 Project 4: Creating Tables in a Web Site

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

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

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

18 Entering the HTML Tags to Define the Web Page Structure
Chapter 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 Project 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 Chapter 4: Creating Tables in a Web Site

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

22 Validating a Web Page Open Internet Explorer and navigate to the Web site validator.w3.org Click the Validate by File Upload tab 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

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

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

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

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

27 Validating, Viewing, and Printing the Web Page Using the Browser
image positioned in borderless table horizontal menu bar table with border 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 <caption align=“bottom”><em>Listing of movies by actor</em></caption> Project 4: Creating Tables in a Web Site

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

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

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

32 Viewing and Printing the Web Page
colspan attribute used for heading spanning four columns colspan attribute used for headings each spanning three columns rowspan attribute used for headings each spanning three rows Project 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 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 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 Chapter 4: Creating Tables in a Web Site

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

37 Creating Tables in a Web Site
Project 4 Complete Creating Tables in a Web Site


Download ppt "Creating Tables in a Web Site"

Similar presentations


Ads by Google