Transcript Creating Web Pages with Tables

HTML
Comprehensive Concepts and Techniques
Second Edition
Project 3
Creating Tables
in a Web Site
Objectives
Define table elements
Describe the steps used to plan,
design, and code a table
Create a borderless table with images
only
Create a list of links with text
Create a borderless table with text only
Create a menu bar with links
2
Objectives
Create a table with borders
Change the horizontal alignment of text
Add color to individual cells
Add color to entire rows
Insert a caption beneath a table
Alter the spacing between cells using
the CELLSPACING attribute
3
Objectives
Alter the spacing within cells using the
CELLPADDING attribute
Use the ROWSPAN attribute
Use the COLSPAN attribute
Use blank cells
4
Introduction
Tables allow you to position elements
easily on a Web page
You can develop simple tables or
complex tables
Web page files for this project can be
found on the HTML Data Disk
Once again, you will be using Notepad
to develop your HTML
5
Creating Web Pages with Tables
complex table
no cell
borders
column span
colored background
row span
simple table
colored cells
6
Creating Web Pages with Tables
Tables can have text and/or images
You can use a table to wrap text
around an image
– Tables give you more control over the
placement of the text and image
Tables help make the content on Web
pages clear, interesting, and easy to
read
7
Creating Web Pages with Tables
text wrapping
8
Creating Web Pages with Tables
images
in table
borderless
table
9
Table Elements
Tables consist of rows, columns, and
cells
– A row is a horizontal line of information
– A column is a vertical line of information
– A cell is the intersection of a row and a
column
• Heading cells display text as bold and centeraligned
• Data cells display normal text that is leftaligned
10
Table Elements
row
11
Table Elements
column
12
Table Elements
cell
13
Other Table Parts
Table borders are lines that
encompass the perimeter of the table
Table headers are bold text that
indicate the purpose of the row or
column
A table caption is descriptive text
located above or below the table that
further describes the purpose of the
table
14
Other Table Parts
heading
cell
border
15
caption