Project 4

HTML

Concepts and Techniques

Fourth Edition

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 2


• 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



• 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


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 5

Page 1 – Statewide Realty image positioned

In borderless table


By Complex – Statewide Realty menu bar table with background color in header row


By Vacancy – Statewide Realty table caption

Project 4: Creating Tables in a Web Site cellspacing and cellpadding attributes used to space text in table

8

rowspan attribute used for headings each spanning three rows

By Bedrooms – Statewide Realty colspan attribute used for heading spanning four columns colspan attribute used for headings each spanning three columns


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 centeraligned

• data cell – displays normal text that is left aligned


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


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


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


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


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


Coding a Table


Table Tag Attributes


Entering the HTML Tags to

Define the Web Page Structure


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


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


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


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


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


Viewing a Web Page horizontal menu bar image positioned

In borderless table


Creating a Table with Borders and Inserting Text

<table> with border=“5” and width=75% header tags and text data cells


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


Validating, Viewing, and Printing the

Web Page Using the Browser image positioned in borderless table horizontal menu bar table with border


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>


Adding Cellspacing and Cellpadding and a Caption table caption

Project 4: Creating Tables in a Web Site with cellpadding and cellspacing

29

rowspan spanning

3 rows

Creating the Headings

That Span Rows colspan spanning

3 columns


Spanning the Main Heading across All Columns first colspan

Project 4: Creating Tables in a Web Site

More on Web

31

rowspan attribute used for headings each spanning three rows

Viewing and Printing the Web Page colspan attribute used for heading spanning four columns colspan attribute used for headings each spanning three columns


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


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


HTML

Concepts and Techniques

Fourth Edition

Project 4 Complete

Creating Tables in a Web Site

Project 4

Related documents

Products

Support

Project 4

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib