Creating Tables in a Web Site Chapter 4 Creating Tables in a Web Site

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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