XP

Creating Web Pages with HTML

(Part 2)

Section 3: Working with Fonts, Colors, and

Graphics

Presenter: Assist.Prof.Dr. Fatih ABUT

Creating Web Pages with HTML 1

Prepared by: C. Hueckstaedt
 XP
Working with Color in HTML

• Using color will make your web pages:

– visually interesting
– eye-catching for the reader
• HTML is a text-based language, requiring you to
define your colors in textual terms.
• HTML identifies a color in one of two ways:
– by the color’s name
– by the color values

Creating Web Pages with HTML 2

Prepared by: C. Hueckstaedt
 XP
The 16 Basic Color Names

This figure shows the 16 basic color names that are recognized by all versions of HTML.

Creating Web Pages with HTML 3

Prepared by: C. Hueckstaedt
 XP
Partial List of Extended Color Names

This figure shows a partial list of these additional color names. The extended color
name list allows you to create color schemes with greater color variation.

• The list of only 16 colors is limiting to Web designers.

– in response, Netscape and Internet Explorer began to support an extended
list of color names

Creating Web Pages with HTML 4

Prepared by: C. Hueckstaedt
 XP
Using Color Values

• To have more control and more choices, specify

colors using color values.
• A color value is a numerical expression that
precisely describes a color.

Creating Web Pages with HTML 5

Prepared by: C. Hueckstaedt
 XP
Basic Principles of Color Theory

• Any color can be thought of as a combination of

three primary colors: red, green, and blue.
• By varying the intensity of each primary color,
you can create almost any color and any shade of
color.
• This principle allows a computer monitor to
combine pixels of red, green, and blue to create
the array of colors you see on your screen.

Creating Web Pages with HTML 6

Prepared by: C. Hueckstaedt
 XP
Adding the Three Primary Colors

This figure shows the colors yellow, magenta, cyan, and white
are produced by adding the three primary colors.

Creating Web Pages with HTML 7

Prepared by: C. Hueckstaedt
 XP
RGB (Red, Green, and Blue) Triplets

• Software programs, such as your Web browser, define

color mathematically.
• The intensity of each of three colors (RGB) is assigned a
number from 0 (absence of color) to 255 (highest
intensity).
• In this way, 2553, or more than 16.7 million, distinct colors
can be defined.
• Each color is represented by a triplet of numbers, called an
RGB triplet, based on the strength of its Red, Green, and
Blue components.

Creating Web Pages with HTML 8

Prepared by: C. Hueckstaedt
 XP
RGB Triplets Examples

– White has a triplet of (255,255,255), indicating that red,

green, and blue are equally mixed at the highest
intensity.
– Yellow has the triplet (255,255,0) because it is an equal
mixture of red and green with no presence of blue.

Creating Web Pages with HTML 9

Prepared by: C. Hueckstaedt
 XP
A Typical Colors Dialog Box

In most programs, you

make your color choices
with visual clues,
usually without being
aware of the underlying
RGB triplet.

This figure shows a

typical dialog box in
which you would make
color selections
based on the appearance
of the color, rather than
on the RGB values.

Creating Web Pages with HTML 10

Prepared by: C. Hueckstaedt
 XP
Hexadecimal Values

• HTML requires color values be entered as hexadecimals.

• A hexadecimal is a number based on base-16 mathematics rather than
base-10 mathematics that we use every day.
• Because of the popularity of the Web, most graphics programs will
now display the hexadecimal value of the colors in their color selection
dialog boxes.
• Once you know the RGB triplet of a color, the color needs to be
converted to the hexadecimal format.

Creating Web Pages with HTML 11

Prepared by: C. Hueckstaedt
 Color Names, RGB Triplets, andXP
Hexadecimal Values
The color yellow has the RGB triplet (255,255,0) and is represented by the
hexadecimal string FFFF00. This figure shows the RGB triplets and
hexadecimal equivalents for the 16 basic color names presented earlier.

Creating Web Pages with HTML 12

Prepared by: C. Hueckstaedt
 XP
Color Selection Resources
Available on the Web
This figure shows color selection resources available on the Web.

Title URL

ColorMix http://www.colormix.com/

Palette Man http://www.paletteman.com/

Two4U’s Color Page http://www.two4u.com/color/

ZSPC Super Color Chart http://www.zspc.com/color/index-e.html

However you decide to work with color in your Web pages, it’s important to
understand how HTML handles color, if for no other reason than to be able to
interpret the HTML source code of the pages you explore on the Web.

Creating Web Pages with HTML 13

Prepared by: C. Hueckstaedt
 XP
HTML Code for using
Color in a Web Page

• In most cases, the default browser scheme involves:

– black text on a white or gray background
– hypertext links highlighted in purple and blue
• To use different colors than these, modify the attributes of the page,
defined within the <body> tag.
• The <body> tag can be used to indicate the colors on a Web page.
• The syntax for controlling a page’s color scheme through the
<body> tag is: <body bgcolor=“color” text=“color”
link=“color” vlink=“color” alink=“color”>

Creating Web Pages with HTML 14

Prepared by: C. Hueckstaedt
 XP
HTML Code for using
Color in a Web Page Continued
– bgcolor attribute sets the background color
• the value of color will be either one of the accepted color names or the
color’s hexadecimal value
• if you use the hexadecimal value, you must preface the hexadecimal
string with the pound symbol (#) and enclose the string in double or
single quotation marks i.e. <body bgcolor=“#FFC088”>
– text attribute controls text color
– link attribute defines the color of hypertext links
– vlink attribute defines the color of links that have been visited by the
user
– alink attribute determines the color of an active hyperlink (the color
of the link as it is clicked by the user)

Creating Web Pages with HTML 15

Prepared by: C. Hueckstaedt
 XP
HTML Code for using
Color in a Web Page Continued

active hyperlink color

text color previously followed hyperlink color

background color hyperlink color

Creating Web Pages with HTML 16

Prepared by: C. Hueckstaedt
 XP
The Page with the New Color Scheme

The Arcadium Web page now

has dark blue text on a light
blue background.

Hypertext links are red and

dark blue.

By adding the color scheme to

the <body> tag of the HTML
file, you’ve superseded the
browser’s default color
scheme with one of your own.

Creating Web Pages with HTML 17

Prepared by: C. Hueckstaedt
 XP
Modifying Text

• Specifying the text color in the <body> tag of a

Web page changes the color of all the text on the
Web page.
• Occasionally, you may want to change the color of
individual words or characters.
• Changing the color of text is an effective way to
make specific sections of text stand out.

Creating Web Pages with HTML 18

Prepared by: C. Hueckstaedt
 XP
Using the <font> Tag

• The <font> tag allows you to specify the color, the size,
and the font to be used for text on a Web page.
• The syntax for the <font> tag is:
<font size=“size” color=“color” face=“face”>
text </font>
– size attribute allows you to specify the font size of the text
– color attribute allows you to change the color of individual
characters or words
– face attribute specifies a particular font for a section of text

Creating Web Pages with HTML 19

Prepared by: C. Hueckstaedt
 XP
Examples of Different Font Sizes

This figure shows a representation of the various font sizes for a typical browser.

Creating Web Pages with HTML 20

Prepared by: C. Hueckstaedt
 XP
Changing the Font Color

• The color attribute of the <font> tag allows you to change

the color of individual characters or words.
• Specify the color in the <font> tag by using either a color
name or color value.
– for example, to change the color of the word “Aracadium” to
the hexadecimal color value 8000C0, you would enter the
following HTML tag: <font color=“#8000C0”>
Arcadium</font>
• If there is no color specified in the <body> tag, the
default colors of the Web browser is used.

Creating Web Pages with HTML 21

Prepared by: C. Hueckstaedt
 XP
Changing the Font Face

• The face attribute is used to specify a particular font for a

section of text.
• The face attribute overrides the browser’s font choice.
• You must specify a font that is installed on the user’s computer
or use one of the following five generic font names:
– serif
– sans-serif
– monospace
– cursive
– fantasy

Creating Web Pages with HTML 22

Prepared by: C. Hueckstaedt
 XP
Fonts and Browsers

• The face attribute allows you to specify a list of potential

font names.
– the browser tries to use the first font in the list; if it fails, it
will try the second font, and so on.
• A generic font name should be listed last for the browser
to fall back on.
– for example to display the word “Arcadium” in a sans-serif,
enter the following HTML tag: <font face=“Arial,
Helvetica, sans-serif”> Arcadium</font>

Creating Web Pages with HTML 23

Prepared by: C. Hueckstaedt
 Applying a Sans-Serif Font to a XP
Section of Text
This figure shows an example of applying a sans-serif font to a section of text.
text will appear in
a sans-serif font

Creating Web Pages with HTML 24

Prepared by: C. Hueckstaedt
 Using the <font> Tag XP

to Specify Color

• The <font> tag gives you significant control

over the appearance of individual blocks of text.

Creating Web Pages with HTML 25

Prepared by: C. Hueckstaedt
 Using the <font> Tag XP

to Create Spot Color

text will
appear in red

subtitle
appears in red
Creating Web Pages with HTML 26
Prepared by: C. Hueckstaedt
 XP
Inserting a Background Image

• The background attribute allows an image file

for the background of a Web page.
• The syntax for inserting a background image is:
<body background=“URL”>.
– URL is the location and filename of the graphic file you
want to use for the background of the Web page.
• for example, to use an image named “bricks.gif” as a
background image, you would use the tag: <body
background=“brick.gif”>

Creating Web Pages with HTML 27

Prepared by: C. Hueckstaedt
 XP
Images

• The two image file formats supported by most Web

browsers are GIF and JPEG.
• Choosing the appropriate image format is an important part
of Web page design.
• Balance the goal of creating an interesting and attractive
page against the need to keep the size of your page small
and easy to receive.
• Each file format has its advantages and disadvantages, and
you will probably use a combination of both formats in
your Web page designs.

Creating Web Pages with HTML 28

Prepared by: C. Hueckstaedt
 XP
Working with GIF Files

• GIF (Graphics Interchange Format) is the most

commonly used image format on the Web.
• Compatible with virtually all browsers.
• GIF files are limited to displaying 256 colors.
• Often used for graphics requiring fewer colors,
such as clip art images, line art, logos, and icons.
• Images that require more color depth, such as
photographs, can appear grainy when saved as
GIF files.

Creating Web Pages with HTML 29

Prepared by: C. Hueckstaedt
 XP
Transparent GIFs

• A transparent color is a color from the image that is

not displayed when the image is viewed in an
application.
• In place of a transparent color, the browser will
display whatever is on the page background.
• Creating a transparent color depends on the graphic
software used.
• Many applications include the option to designate
transparent color when saving the image i.e.
PhotoShop.

Creating Web Pages with HTML 30

Prepared by: C. Hueckstaedt
 XP
A Transparent Image File

This figure shows a transparent image file.

the green background

will be transparent logo background is
when displayed in the transparent in the
browser browser

Creating Web Pages with HTML 31

Prepared by: C. Hueckstaedt
 XP
Animated GIFs

• One of the most popular uses of GIFs is to create

animated images.
• Animated GIFs are easy to create and smaller in size.
• An animated GIF is composed of several images that
are displayed one after the other in rapid succession.
• Animated GIFs are an effective way to compose slide
shows or to simulate motion.
• Animated GIF files are typically larger than static
GIF images.
Creating Web Pages with HTML 32
Prepared by: C. Hueckstaedt
 XP
Portable Network Graphics (PNG)

• A new file format called PNG (Portable Network

Graphics) has been created.
• PNG files use a free and open file format and can
display more colors than GIFs.
• PNGs cannot be used for animated graphics.
• PNGs do allow transparent colors, but not all browsers
support this feature.
• The PNG format may eventually replace GIFs,
however GIFs are still the preferred standard.
Creating Web Pages with HTML 33
Prepared by: C. Hueckstaedt
 XP
Working with JPEG Files

• The JPEG (Joint Photographic Experts Group)

format creates graphics that use the full 16.7
million colors available in the color palette.
• JPEG files are most often used for photographs
and images that cover a wide spectrum of color.
• JPEG files usually are smaller than GIF files.
• A JPEG file size can by controlled by the degree
of image compression applied to the file.
• You cannot use transparent colors or animation
with JPEG files.Creating Web Pages with HTML
Prepared by: C. Hueckstaedt
34
 XP
The Effects of Compression on
JPEG File Size and Quality

This figure shows

the effect of
compression on a
JPEG file.

The increased
compression cuts moderate compression: file size = 20.7 KB
minimal compression: file size = 84.3 KB
the file size to one-
tenth that of the
original. The
resulting image is
less well-defined
than the image with
low compression.
medium compression: file size = 14.2 KB heavy compression: file size = 8.6 KB

Creating Web Pages with HTML 35

Prepared by: C. Hueckstaedt
 XP
Controlling Image Alignment

• The align attribute can control the alignment of an

image with the <img> tag.
• The syntax for the align attribute is: <img
src=“URL” align=“alignment”>
– URL is the location and filename of the graphic file
– alignment indicates how you want the graphic aligned
in relation to the surrounding text

Creating Web Pages with HTML 36

Prepared by: C. Hueckstaedt
 XP
Alignment Options

This figure describes the possible values of the align attribute.

align= Description
absbottom Aligns the bottom of the object with the absolute bottom of the surrounding text. The absolute bottom is equal to the
baseline of the text minus the height of the largest descender in the text.

absmiddle Aligns the middle of the object with the middle of the surrounding text. The absolute middle is the midpoint between the
absolute bottom and text top of the surrounding text.

baseline Aligns the bottom of the object with the baseline of the surrounding text.
bottom Aligns the bottom of the object with the bottom of the surrounding text. The bottom is equal to the baseline minus the
standard height of a descender in the text.

left Aligns the object to the left of the surrounding text. All preceding and subsequent text flows to the right of the object.

middle Aligns the middle of the object with the surrounding text.
right Aligns the object to the right of the surrounding text. All subsequent text flows to the left of the object.

texttop Aligns the top of the object with the absolute top of the surrounding text. The absolute top is the baseline plus the height of
the largest ascender in the text.

top Aligns the top of the object with the top of the text. The top of the text is the baseline plus the standard height of an
ascender in the text.

Creating Web Pages with HTML 37

Prepared by: C. Hueckstaedt
 XP
Effects of the Align Attribute

This figure shows the effect of each alignment options on text surrounding the image.

align = “bottom” align = “middle” align = “top”

align = “left” align = “right”

Creating Web Pages with HTML 38
Prepared by: C. Hueckstaedt
 XP
Controlling Vertical
and Horizontal Space

• To increase the horizontal and vertical space

around an image use the hspace and vspace
attributes.
• The syntax is: <img src=“URL”
vspace=“value” hspace=“value”>
– hspace (horizontal space) attribute indicates the amount of
space to the left and right of the image.
– vspace (vertical space) attribute controls the amount of space
above and below the image

Creating Web Pages with HTML 39

Prepared by: C. Hueckstaedt
 Using the hspace XP

and vspace Attributes

set the horizontal space

around the graphic to 15
pixels and the vertical
space to 5 pixels

Creating Web Pages with HTML 40

Prepared by: C. Hueckstaedt
 XP
Controlling Image Size

• Another set of attributes for the <img> tag are the height and
width attributes.
• Height and width attributes instruct the browser to display an
image at a specific size.
• Changing the size of the image within the <img> tag does not
affect the file size, it makes the image look smaller improving
the performance of the Web page.
• The syntax for setting the height and width attributes is: <img
src=“URL” height=“value” width=“value”>
– value is the height and width of the image either in pixels or as a
percentage of the page’s height and width
Creating Web Pages with HTML 41
Prepared by: C. Hueckstaedt
 XP
Using the alt Attribute

• The alt attribute specifies text to display in place of an

inline image.
• The syntax for specifying alternate text is: <img
src=“URL” alt=“alternate text”>

Creating Web Pages with HTML 42

Prepared by: C. Hueckstaedt
 Creating Image Maps in HTML XP
An Example of a Image Map

This figure is an
example of a park
map that visitors can
easily find their way
to all of the different
attractions by
clicking on the
image.

For example, when a

user clicks the
section of the map on
roller coaster rides a
page describing the
roller coaster ride is
displayed.

Creating Web Pages with HTML 43

Prepared by: C. Hueckstaedt
 XP
Understanding Image Maps

• To use a single image to access multiple targets, you must

set up hotspots within the image.
• A hotspot is a defined area of the image that acts as a
hypertext link.
• When a user clicks within a hotspot, the hyperlink is
activated.
• Hotspots are defined through the use of image maps, which
list the positions of all hotspots within an image.
• There are two types of image maps: server-side image
maps and client-side image maps.
Creating Web Pages with HTML 44
Prepared by: C. Hueckstaedt
 XP
Linking an Image to
Different Web Pages
This figure shows how links will work.
karts.htm

rides.htm water.htm
Creating Web Pages with HTML 45
Prepared by: C. Hueckstaedt
 XP
Server-Side Image Maps

• In a server-side image map, the image map is

stored on the Web server.
• Server-side image maps are supported by most
graphical browsers.
• Server-side image maps can be slow to operate.
• The browser’s status bar does not display the
target of each hotspot.

Creating Web Pages with HTML 46

Prepared by: C. Hueckstaedt
 XP
Server-Side Image Maps

When a user clicks a

hotspot, the
coordinates where
the user clicked are
sent to a program
running on the
server.

The program uses

the coordinates to
determine which
hotspot was clicked
and then activates
the corresponding
hyperlink.

Creating Web Pages with HTML 47

Prepared by: C. Hueckstaedt
 XP
Client-Side Image Maps

• A client-side image map is inserted in an image map into

the HTML file.
• The browser locally processes the image map.
• Because all of the processing is done locally, you can
easily test Web pages.
• More responsive than server-side maps.
• The browser’s status bar displays the target of each
hotspot.
• Older browsers do not support client-side images.

Creating Web Pages with HTML 48

Prepared by: C. Hueckstaedt
 XP
Defining a Client-Side Image Map

• Create the <map> tag that defines the different hotspots on the image
as follows:
<map name=“mapname”>
<area shape=“shape” coords=“coordinates”
href=“URL” target=“window”>
. . .
</map>
– mapname is the name you give the image map
– shape is the type of hotspot (rectangle, circle, or polygon)
– coordinates are the locations of points that define the shape
– URL is the location of the linked page
– window is the name of a secondary browser window

Creating Web Pages with HTML 49

Prepared by: C. Hueckstaedt
 XP
Defining a Client-Side
Image Map Continued

• If you want to open the linked page in a different

window. You can have multiple <area> tags within
each <map> tag, enabling you to have several
hotspots for each image map.
• Once the image map is created, add the usemap
attribute to the <img> tag for the inline image, as
follows:
<img src=“URL” usemap=“#mapname”>
– mapname is the name you give the image map defined in the
<map> tag

Creating Web Pages with HTML 50

Prepared by: C. Hueckstaedt
 XP
Programs for Creating Image Maps

This figure lists programs available for creating image maps.

Title URL

CompuPic Pro http://www.photodex.com/products/pro/

Image Mapper http://www.coffeecup.com/mapper/

LiveImage http://www.mediatec.com/

MapEdit http://www.boutell.com/mapedit/

Visual Imagemapper http://www.sofasitters.net/imagemap/

Creating Web Pages with HTML 51

Prepared by: C. Hueckstaedt
 XP
Defining Image Map
Hotspots Continued

• Within the <map> tag, enter the code for the type of
hotspot(s) and the coordinates.
• The syntax for a rectangular hotspot is:
<area shape=“rect” coords=“x_left,
y_upper, x_right, y_lower” href=“URL”
target=“window”>
– x_left, y_upper are the coordinates of the upper-left
corner of the rectangle
– x_right, y_lower are the coordinates of the lower-right
corner

Creating Web Pages with HTML 52

Prepared by: C. Hueckstaedt
 XP
The shape Attribute

• The shape attribute refers to the shape of a

hotspot. There are three possible values:
– “rect” for a rectangular hotspot
– “circle” for a circular hotspot
– “poly” or “Polygon” for irregularly shaped polygon
hotspots

Creating Web Pages with HTML 53

Prepared by: C. Hueckstaedt
 XP
The coords Attribute

• The coords attribute specifies the location of the

hotspot.
• The values entered depend on the shape of the hotspot.
• Coordinates are expressed as a point’s distance in
pixels from the left and the top edges of the image.
– for example, the coordinates (123,45) refer to a
point 123 pixels from the left edge and 45 pixels
down from the top

Creating Web Pages with HTML 54

Prepared by: C. Hueckstaedt
 XP
The href Attribute

• Use the href attribute to enter the location of the page

opened by the hotspot.
• The target attribute can specify the name of a secondary
browser window in which to open the linked page.
• Use the value “nohref” in place of a URL to prevent the
hotspot from activating a hypertext link.
– this is a useful technique when first developing image maps,
without hypertext links in place

Creating Web Pages with HTML 55

Prepared by: C. Hueckstaedt
 XP
Creating a Rectangular Hotspot

• Two points define a rectangular hotspot:

– the upper-left corner
– the lower-right corner
• A sample code for a rectangular hotspot is:
<area shape=“rect” coords=“384,61,499,271”
href=“water.htm”>
– coordinates are entered as a series of four numbers separated by
commas
– HTML expects that the first two numbers represent the coordinates
for the upper-left corner of the rectangle, and the second two
numbers indicate the location of the lower-right corner
– the hotspot is a hypertext link to water.htm

Creating Web Pages with HTML 56

Prepared by: C. Hueckstaedt
 XP
Creating a Circular Hotspot

• A circular hotspot is defined by the location of its

center and its radius.
• A sample code for a circular hotspot is:
<area shape=“circle” coords=“307,137,66”
href=“karts.htm”>
– coordinates are (307, 137), and it has a radius of 66 pixels.
– the hotspot is a hypertext link to karts.htm

Creating Web Pages with HTML 57

Prepared by: C. Hueckstaedt
 XP
Creating a Polygonal Hotspot

• To create a polygonal hotspot, you enter the

coordinates for each vertex in the shape.
• A sample code for a polygonal hotspot is:
<area shape=“polygon”
coords=“13,60,13,270,370,270,370,225,230
,225,230,60” href=“rides.htm”>
– coordinates are for each vertex in the shape.
– the hotspot is a hypertext link to rides.htm

Creating Web Pages with HTML 58

Prepared by: C. Hueckstaedt
 XP
An Example of a Polygonal Hotspot

(13 , 60) (230 , 60)

roller coaster rides

(230 , 225)
(370 , 225)

(13 , 270) (370 , 270)

Creating Web Pages with HTML 59

Prepared by: C. Hueckstaedt
 XP
An Example of the
Polygonal Hotspot Code

image map
name

polygonal
hotspot

circular
hotspot

rectangular
hotspot

Creating Web Pages with HTML 60

Prepared by: C. Hueckstaedt
 XP
The usemap attribute

• The usemap attribute tells the browser the name

of the image map to associate with the inline
image.
• The syntax for adding the usemap attribute is:
<img src=“URL” usemap=“#mapname”>
– mapname is the name assigned to the name attribute in
the <map> tag

Creating Web Pages with HTML 61

Prepared by: C. Hueckstaedt
 XP
Image Map and Hotspots

This figure shows an example of an image map and hotspots.

name of
image to use

properties
of image
map
Creating Web Pages with HTML 62
Prepared by: C. Hueckstaedt
 XP
Image Map and Hotspots Continued

pointer changes
to a hand as it
passes over a hot
spot

Creating Web Pages with HTML 63

Prepared by: C. Hueckstaedt
 XP

Creating Web Pages with HTML

(Part 2)

Section 4: Creating Tables with HTML

Creating Web Pages with HTML 64

Prepared by: C. Hueckstaedt
 XP
Defining a Table Structure

• The first step to creating a table is to specify the

table structure:
– the number of rows and columns
– the location of column headings
– the placement of a table caption
• Once the table structure is in place, you can start
entering data into the table.

Creating Web Pages with HTML 65

Prepared by: C. Hueckstaedt
 Using the <table>, XP

<tr>, and <td> Tags

• Graphical tables are enclosed within a two-sided

<table> tag that identifies the start and ending
of the table structure.
• Each row of the table is indicated using a two-
sided <tr> (for table row).
• Within each table row, a two-sided <td> (for
table data) tag indicates the presence of individual
table cells.

Creating Web Pages with HTML 66

Prepared by: C. Hueckstaedt
 XP
The Graphical Table Syntax

• The general syntax of a graphical table is:

<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table>
– This creates a table with two rows and two columns.

Creating Web Pages with HTML 67

Prepared by: C. Hueckstaedt
 XP
A Simple Table

This figure shows the

layout of a graphical
table.

two rows

two columns

Creating Web Pages with HTML 68

Prepared by: C. Hueckstaedt
 XP
Columns within a Table

• HTML does not provide a tag for table columns.

• In the original HTML specifications, the number
of columns is determined by how many cells are
inserted within each row.
– for example, if you have four <td> tags in each table
row, that table has four columns
• Later versions of HTML provide increased
support for controlling the appearance of table
columns.
Creating Web Pages with HTML 69
Prepared by: C. Hueckstaedt
 XP
HTML Structure of a Table

beginning of the
table structure
table cells

You do not need to

indent the <td> tags
first row of six or place them on
in the table
separate lines, but you
may find it easier to
interpret your code if
you do so.

After the table

structure is in place,
you’re ready to add
the text for each cell.
end of the table
structure
Creating Web Pages with HTML 70
Prepared by: C. Hueckstaedt
 XP
Completed HTML Table Tags

This figure shows the

completed text for the
body of the table.

With the text for the

body of the table
entered, the next step
is to add the column
headings.

Creating Web Pages with HTML 71

Prepared by: C. Hueckstaedt
 XP
Creating Headings with the <th> Tag

• HTML provides the <th> tag for table headings.

• Text formatted with the <th> tag is centered
within the cell and displayed in a boldface font.
• The <th> tag is most often used for column
headings, but you can use it for any cell that you
want to contain centered boldfaced text.

Creating Web Pages with HTML 72

Prepared by: C. Hueckstaedt
 XP
Adding Table Headings to the Table

Text in cells
formatted with the
<th> tag is bold and
centered above each
table column.

table headings

Creating Web Pages with HTML 73

Prepared by: C. Hueckstaedt
 XP
Result of Table Headings
as Displayed in the Browser

table headings
appear bold
and centered
over their
columns

Creating Web Pages with HTML 74

Prepared by: C. Hueckstaedt
 XP
Creating a Table Caption

• HTML allows you to specify a caption for a table.

• The syntax for creating a caption is: <caption
align=“alignment”>caption text</caption>
– alignment indicates the caption placement
– a value of “bottom” centers the caption below the table
– a value of “top” or “center” centers the caption above the table
– a value of “left” or “right” place the caption above the table to
the left or right

Creating Web Pages with HTML 75

Prepared by: C. Hueckstaedt
 XP
Table Captions

• Only Internet Explorer supports all caption values.

• Netscape supports only the “top” and “bottom” values.
• The <caption> tag works only with tables, the tag must
be placed within the table structure.
• Captions are shown as normal text without special
formatting.
• Captions can be formatted by embedding the caption text
within other HTML tags.
– for example, place the caption text within a pair of <b> and
<i> tags causes the caption to display as bold and italic

Creating Web Pages with HTML 76

Prepared by: C. Hueckstaedt
 XP
Inserting a Table Caption

Placing the caption

text within a pair of
<b> tags causes the
caption to display as
bold. caption text

caption will be
centered above
the table

Creating Web Pages with HTML 77

Prepared by: C. Hueckstaedt
 XP
Result of a Table Caption

This figure shows a

table with a caption.
table caption

Creating Web Pages with HTML 78

Prepared by: C. Hueckstaedt
 XP
Modifying the Appearance of a Table

• You can modify the appearance of a table by

adding:
– gridlines
– borders
– background color
• HTML also provides tags and attributes to control
the placement and size of a table.

Creating Web Pages with HTML 79

Prepared by: C. Hueckstaedt
 XP
Adding a Table Border

• By default, browsers display tables without table

borders.
• A table border can be added using the border attribute
to the <table> tag.
• The syntax for creating a table border is: <table
border=“value”>
– value is the width of the border in pixels
• The size attribute is optional; if you don’t specify a size,
the browser creates a table border 1 pixel wide.

Creating Web Pages with HTML 80

Prepared by: C. Hueckstaedt
 XP
Tables with Different Borders Values

This figure shows the effect on a table’s border when the border size is varied.

Creating Web Pages with HTML 81

Prepared by: C. Hueckstaedt
 XP
Adding a 5-Pixel Border to a Table

Only the outside

border is affected by
the border attribute;
the internal gridlines
are not affected.

Creating Web Pages with HTML 82

Prepared by: C. Hueckstaedt
 XP
Controlling Cell Spacing

• The cellspacing attribute controls the amount of

space inserted between table cells.
• The syntax for specifying the cell space is:
<table cellspacing=“value”>
– value is the width of the interior borders in pixels
– the default cell spacing is 2 pixels
• Cell spacing refers to the space between the cells.

Creating Web Pages with HTML 83

Prepared by: C. Hueckstaedt
 XP
Tables with Different
Cell Spacing Values
This figure shows how different cell spacing values affect a table’s appearance.

Creating Web Pages with HTML 84

Prepared by: C. Hueckstaedt
 XP
Setting the Cell Spacing to 0 Pixels

Setting the cellspacing

to 0 reduces the width
of the borders between
individual table cells.

This will not remove

the border between the
cells.

Creating Web Pages with HTML 85

Prepared by: C. Hueckstaedt
 XP
Defining Cell Padding

• To control the space between the table text and the

cell borders, add the cellpadding attribute to the
table tag.
• The syntax for this attribute is: <table
cellpadding=“value”>
– value is the distance from the table text to the cell
border, as measured in pixels
– the default cell padding value is 1 pixel
• Cell padding refers to the space within the cells.
Creating Web Pages with HTML 86
Prepared by: C. Hueckstaedt
 XP
Tables with Different
Cell Padding Values
This figure shows the effect of changing the cell padding value for a table.

Creating Web Pages with HTML 87

Prepared by: C. Hueckstaedt
 XP
Setting the Cell Padding to 4 Pixels

This figure shows the

table with the increased
amount of cell padding.

By increasing the cell

padding, you added
needed space to the
table.

Creating Web Pages with HTML 88

Prepared by: C. Hueckstaedt
 XP
Working with Table and Cell Size

• The size of a table is determined by the text it contains in

its cells.
• By default, HTML places text on a single line.
• As you add text in a cell, the width of the column and table
expands to the edge of the page.
– once the page edge is reached, the browser reduces the size of the
remaining columns to keep the text to a single line
• You can insert a line break, paragraph or heading tag
within a cell.

Creating Web Pages with HTML 89

Prepared by: C. Hueckstaedt
 XP
Working with Table
and Cell Size Continued

• When the browser can no longer increase or

decrease the size of the column and table it wraps
the text to a second line.
• As more text is added, the height of the table
expands to accommodate the additional text.
• It is important to manually define the size of the
table cells and the table as a whole.

Creating Web Pages with HTML 90

Prepared by: C. Hueckstaedt
 XP
An Example of Changing
a Table and Cell Size
This figure shows a table where you may want to change the
table and cell size to evenly lay the table out on a Web page.

Creating Web Pages with HTML 91

Prepared by: C. Hueckstaedt
 XP
Defining the Table Size

• The syntax for specifying the table size is: <table

width=“size” height=“size”>
– size is the width and height of the table as measured in pixels or as
a percentage of the display area
• To create a table whose height is equal to the entire height of the
display area, enter the attribute height=“100%”.
• If you specify an absolute size for a table in pixels, its size
remains constant, regardless of the browser or monitor settings
used.

Creating Web Pages with HTML 92

Prepared by: C. Hueckstaedt
 XP
Setting the Width of the
Table to 500 Pixels
This figure shows the
revised page with the
table width increased to
500 pixels.

Once the width is set

for the table, the width
of individual cells and
columns can be set.

Creating Web Pages with HTML 93

Prepared by: C. Hueckstaedt
 XP
Defining Cell and Column Sizes

• To set the width of an individual cell, add the

width attribute to either the <td> or <th> tags.
• The syntax is: width=“value”
– value can be expressed either in pixels or as a
percentage of the table width
– a width value of 30% displays a cell that is 30% of
the total width of the table

Creating Web Pages with HTML 94

Prepared by: C. Hueckstaedt
 XP
Defining Cell and
Column Sizes Continued

• A pixel value or a percentage entered depends on whether

a table will be a specific size or fill a relative space.
• Specifying a width for an individual cell does not
guarantee that the cell will be that width when displayed in
the browser.
– the reason for this is that the cell is part of a column
containing other cells.
• Set the width of all the cells in the column to the same
value to ensure that the cells do not change in size.

Creating Web Pages with HTML 95

Prepared by: C. Hueckstaedt
 XP
Defining Cell and
Column Sizes Continued

• The height attribute can be used in the <td> or <th>

tags to set the height of individual cells.
• The height attribute is expressed either in pixels or as
a percentage of the height of the table.
• If you include more text than can be displayed within
that height value you specify, the cell expands to
display the additional text.

Creating Web Pages with HTML 96

Prepared by: C. Hueckstaedt
 XP
Aligning a Table on the Web Page

• To align a table with the surrounding text, use the align

attribute as follows: align=“alignment”
– alignment equals “left”, “right”, or “center”
– left or right alignment places the table on the margin of the Web
page and wraps surrounding text to the side
– center alignment places the table in the horizontal center of the
page, but does not allow text to wrap around it

• The align attribute is similar to the align attribute used with the
<img> tag.

Creating Web Pages with HTML 97

Prepared by: C. Hueckstaedt
 XP
Results of a Right-Aligned Table

This figure
shows a right-
aligned table.

Creating Web Pages with HTML 98

Prepared by: C. Hueckstaedt
 XP
Aligning the Contents of a Table

• By default, cell text is placed in the middle of the

cell, aligned with the cell’s left edge.
• By using the align and valign attributes, you can
specify the text’s horizontal and vertical
placement.
• To align the text for a single column, you must
apply the align attribute to every cell in that
column.

Creating Web Pages with HTML 99

Prepared by: C. Hueckstaedt
 XP
Values of the Align
and Valign Attributes
This figure shows how the combination of the align and valign attributes
can affect the position of the cell text in relation to the cell borders.

Creating Web Pages with HTML 100

Prepared by: C. Hueckstaedt
 XP
Right-Aligning the Values
in a Column

right-aligned column

Creating Web Pages with HTML 101

Prepared by: C. Hueckstaedt
 XP
Spanning Rows and Columns

• To merge several cells into one, you need to create a

spanning cell.
• A spanning cell is a cell that occupies more than one row
or column in a table.
• Spanning cells are created by inserting the rowspan and
colspan attribute in a <td> or <th> tag.
• The syntax for these attributes is: rowspan=“value”
colspan=“value”
– value is the number of rows or columns that the cell spans in
the table

Creating Web Pages with HTML 102

Prepared by: C. Hueckstaedt
 XP
Spanning Rows and
Columns Continued

• When a cell spans several rows or columns, it is

important to adjust the number of cell tags used in
the table row.
• When a cell spans several rows, the rows below
the spanning cell must also be adjusted.

Creating Web Pages with HTML 103

Prepared by: C. Hueckstaedt
 XP
Example of Spanning Cells

This figure shows a table of opinion poll data in which some

of the cells span several rows and/or columns.

This cell
spans two this cell
columns and spans three
two rows columns

This cell
spans three
rows

Creating Web Pages with HTML 104

Prepared by: C. Hueckstaedt
 XP
A Table Structure with a
Row-Spanning Cell
This figure shows spanning cells.

four table
cells in the
first row
only three table
cells are
required for the
second and third
rows

HTML code

resulting table

Creating Web Pages with HTML 105

Prepared by: C. Hueckstaedt
 XP
Adding Spanning Cells to a Table

this cell
spans two
columns

these cells
span three
rows

Creating Web Pages with HTML 106

Prepared by: C. Hueckstaedt
 XP
Results of a Table with Spanning Cells

This figure shows a table with spanning cells.

spanning cells

Creating Web Pages with HTML 107

Prepared by: C. Hueckstaedt
 XP
An Example of Spanning Cells

This figure shows

an example of
spanning cells.

Creating Web Pages with HTML 108

Prepared by: C. Hueckstaedt
 XP
An Example of Spanning Cells

This figure shows

an example of
spanning cells.

Creating Web Pages with HTML 109

Prepared by: C. Hueckstaedt
 XP
Applying a Background Color

• Table elements support the bgcolor attribute.

• To specify a background color for all of the cells in a table, all
of the cells in a row, or for individual cells, by adding the
bgcolor attribute to either the <table>, <tr>, <td>, or
<th> tags as follows:
<table bgcolor=“color”>
<tr bgcolor=“color”>
<td bgcolor=“color”>
<th bgcolor=“color”>
– color is either a color name or hexadecimal color value

Creating Web Pages with HTML 110

Prepared by: C. Hueckstaedt
 XP
Specifying Table, Row,
and Cell Colors
row table
You cannot set a background background
background color for a color color
column with a single
attribute; to set the
background color for an
entire column, you must
define the background
color for each cell in that cell
column. background
colors
The color defined for a
cell overrides the color
defined for a row, and
the color defined for a
row overrides the color
defined for a table.

Creating Web Pages with HTML 111

Prepared by: C. Hueckstaedt
 XP
Results of a Table
with a Colored Background
This figure shows a table with a colored background.

Creating Web Pages with HTML 112

Prepared by: C. Hueckstaedt
 XP
The bordercolor Attribute

• By default, table borders are displayed in two

shades of gray that create a three-dimensional
effect.
• The syntax for the bordercolor attribute is: <table
bordercolor=“color”>
– color is an HTML color name or hexadecimal color value
• Internet Explorer and Netscape apply this attribute
differently.

Creating Web Pages with HTML 113

Prepared by: C. Hueckstaedt
 XP
Using the bordercolor Attribute

This figure shows that Internet Explorer applies the same color to all parts of the border,
thus removing the 3-D effect; Netscape does not.

<table border=“10” bordercolor=“blue”>

Internet Explorer Netscape

Creating Web Pages with HTML 114

Prepared by: C. Hueckstaedt
 The bordercolorlight and XP
bordercolordark Attributes

• The bordercolorlight and

bordercolordark attributes allow you specify
light and dark colors of a 3-D border.

Creating Web Pages with HTML 115

Prepared by: C. Hueckstaedt
 XP
Using the bordercolorlight Attribute

This figure shows an example of the use of the bordercolor and bordercolorlight
attributes to create a 3-D colored border in Internet Explorer.
Netscape does not support these attributes.

<table border=“10” bordercolor=“blue” bordercolorlight=“#b2b2ff”>

Internet Explorer

Creating Web Pages with HTML 116

Prepared by: C. Hueckstaedt
 XP
Applying a Table Background

• Add a background image to your tables using the

background attribute.
• A background can be applied to the entire table, to
a single row (Netscape 6.2 only), or to an
individual cell.

Creating Web Pages with HTML 117

Prepared by: C. Hueckstaedt
 XP
Applying a Background Image
to a Table, Row, and Cell
This figure shows examples of the background attribute applied to three sample tables.

parch.jpg <tr background=“parch.jpg”>

<table background=“parch.jpg”> <td background=“parch.jpg”>

Creating Web Pages with HTML 118

Prepared by: C. Hueckstaedt
 XP
Changing the Size of the Table Text

• In order to change the size of the table text, you

need to insert a <font> tag into each cell.
• The <font> tag can not be applied to all of the
text in a table.

Creating Web Pages with HTML 119

Prepared by: C. Hueckstaedt