HTMLConcepts and Techniques

Fourth Edition

Chapter 4

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

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

Project 4: Creating Tables in a Web Site 6

Page 1 – Statewide Realty

imagepositionedIn borderlesstable

Project 4: Creating Tables in a Web Site 7

By Complex – Statewide Realty

menu bar

table withbackground color

in header row

Project 4: Creating Tables in a Web Site 8

By Vacancy– Statewide Realty

cellspacing andcellpadding

attributes used tospace text in table

tablecaption

Project 4: Creating Tables in a Web Site 9

By Bedrooms – Statewide Realty

colspanattributeused forheadings

each spanning

threecolumns

rowspanattributeused forheadings

eachspanning

three rows

colspanattributeused forheading

spanningfour

columns

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

rowMore 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

1. determining if a table is needed

2. planning the table

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

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

Chapter 4: Creating Tables in a Web Site 18

Entering the HTML Tags to Define the Web Page Structure

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

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

Project 4: Creating Tables in a Web Site 21

Creating a Horizontal Menu Bar with Text Links

list of text linksin data cells

creates menu bar

pipe symbol usedas divider between

link text

More on Web

Chapter 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

22

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

23

Project 4: Creating Tables in a Web Site 24

Viewing a Web Page

imagepositionedIn borderlesstable

horizontalmenu 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 tagsand text

datacells

Chapter 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

26

Project 4: Creating Tables in a Web Site 27

Validating, Viewing, and Printing the Web Page Using the Browser

imagepositioned in

borderless table

horizontalmenu bar

table withborder

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

tablecaption

Project 4: Creating Tables in a Web Site 30

Creating the Headings That Span Rows

rowspanspanning

3 rows

colspanspanning3 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

colspanattributeused forheadings

each spanning

threecolumns

rowspanattributeused forheadings

eachspanning

three rows

colspanattributeused forheading

spanningfour

columns

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

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

Project 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

HTMLConcepts and Techniques

Fourth Edition

Project 4 Complete

Creating Tables in a Web Site