HTML TABLE

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.
 Using the <table>,
<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.
 The General Table Syntax
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table>

two rows

two columns
 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.
 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 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.
 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 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
 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
Result of a Table Caption
caption text

caption will be
centered
above the
table
 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.
 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.
 Tables with Different Borders
Values
This figure shows the effect on a table’s border when the border size is varied.
 Adding a 5-Pixel Border to a
Table

Only the outside

border is affected by
the border attribute;
the internal gridlines
are not affected.
 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.
 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.

Tables with Different
Cell Spacing Values
different cell spacing values

different cell padding values

 Table Frames and Rules

● Two additional table attributes introduced in

HTML 4.0 are the frames and rules
attributes.
● With the frame and rule attributes you can
control how borders and gridlines are applied
to the table.
● The frames attribute allows you to determine
which sides of the table will have borders.
● The frame attribute syntax is: <table
frame=“type”>
– type is either “box” (the default), “above”, “below”,
“hsides”, “vsides”, “lhs”, “rhs”, or “void”
Values of the Frame Attribute
 Effect of Different Frame
Values
This figure shows the effect of each of the frame values on the table grid.
 Creating Frames and Rules
Continued
● The rules attribute lets you control how the
table gridlines are drawn (not supported by
Netscape)
● The syntax of the rules attribute is:
<table rules=“type”>
– type is either “all”, “rows”, “cols”, or “none”
the effect of each of the rules attribute values on a table
 Working with Table and Cell
Size
● The size of a table is determined by 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 line break, paragraph, or other tags within a cell.
● 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.
● But, you can manually define the size of the table and its cells.
 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.
● Remember that some monitors display Web pages at a resolution of
640 by 480 pixels.
Setting the Width of the
Table to 500 Pixels
 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 in pixels or as a percentage of the table
width
– width value of 30% displays a cell that is 30% of the total width of
table.
● The height attribute can also 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.
 Defining Cell and Column
Sizes
● 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.
 Aligning a Table on the Web
Page
● By default, a browser places a table on the left margin of a
Web page, with surrounding text placed above and below the
table.
● 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.
Results of a Right-Aligned
Table
 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.
 Values of the Align
and Valign Attributes
 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
 Example of Spanning Cells

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

This cell
spans
three rows
 A Table Structure with a
Row-Spanning Cell
four table cells
in the first
row

only three table

cells are
required for the
second and
third rows

HTML code

resulting table
Adding Spanning Cells to a
Table
Another Example of Spanning
Cells
Another Example of Spanning
Cells
 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
Specifying Table, Row, and Cell
Colors
Specifying Table, Row, and Cell
Colors
 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.

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

Internet Explorer Netscape

 Frames
 Frames are a relatively new addition to the HTML
standard. First introduced in Netscape Navigator
2.0.
Objectives:
Upon completing this section, you should be able to:
 Create a Frame based page.
 Work with the Frameset, Frame, and Noframes
elements.
 Use the attributes of the Frames elements to control
the display.
 Set Targets appropriately.
42
 Frames
 A framed page is actually made up of multiple
HTML pages. There is one HTML document that
describes how to break up the single browser
window into multiple windowpanes. Each
windowpane is filled with an HTML document.

 For Example to make a framed page with a

windowpane on the left and one on the right
requires three HTML pages. Doc1.html and
Doc2.html are the pages that contain content.
Frames.html is the page that describes the
division of the single browser window into two
windowpanes.

43
 Frames

Doc1.html Doc2.html

Doc1.html Doc2.html

Frames.html
44
 Frame Page Architecture
 A <FRAMESET> element is placed in the html document
before the <BODY> element. The <FRAMESET>
describes the amount of screen real estate given to each
windowpane by dividing the screen into ROWS or COLS.
 The <FRAMESET> will then contain <FRAME>
elements, one per division of the browser window.
 Note: Because there is no BODY container, FRAMESET
pages can't have background images and background
colors associated with them.

45
 Frame Page Architecture
<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
<FRAMeSET COLS=“23%,77%”>
<FRAME SRC=“Doc1.html”>
<FRAME SRC=“Doc2.html”>
</FRAMeSET >
</HEAD>

</HTML>

46
The Diagram below is a graphical view of
the document described above

FRAMESET COLS=”23%, 77%”

FRAME FRAME

NAME= NAME=right_pane
left_pane SRC= Doc2.html
SRC=Doc1.ht
ml

47
 <FRAMESET> Container
<FRAMESET> : The FRAMESET element creates divisions
in the browser window in a single direction. This allows you
to define divisions as either rows or columns.
 ROWS : Determines the size and number of rectangular
rows within a <FRAMESET>. They are set from top of the
display area to the bottom.
Possible values are:
 Absolute pixel units, I.e. “360,120”.
 A percentage of screen height, e.g. “75%,25%”.
 Proportional values using the asterisk (*). This is often
combined with a value in pixels , e.g. “360,*”.
 <Frameset cols=“200,20%,*,2*”>

48
 Creating a Frames Page
 COLS: Determines the size and number of
rectangular columns within a <FRAMESET>. They
are set from left to right of the display area.

Possible values are:

 Absolute pixel units, I.e. “480,160”.
 A percentage of screen width, e.g. “75%,25%”.
 Proportional values using the asterisk (*). This is often
combined with a value in pixels , e.g. “480,*”.

49
 Creating a Frames Page
 FRAMEBORDER : Possible values 0, 1, YES, NO. A
setting of zero will create a borderless frame.
 FRAMESPACING: This attribute is specified in pixels. If
you go to borderless frames you will need to set this value
to zero as well, or you will have a gap between your frames
where the border used to be.
 BORDER(thickness of the Frame): This attribute
specified in pixels. A setting of zero will create a borderless
frame. Default value is 5.
 BORDERCOLOR: This attribute is allows you choose a
color for your border. This attribute is rarely used.

50
 <FRAME>
<FRAME>: This element defines a single frame within a
frameset. There will be a FRAME element for each division
created by the FRAMESET element. This tag has the following
attributes:
 SRC: Required, as it provides the URL for the page that will be
displayed in the frame.
 NAME: Required for frames that will allow targeting by other
HTML documents. Works in conjunction with the target
attribute of the <A>, <AREA>, <BASE>, and <FORM> tags.

51
 <FRAME>
 MARGINWIDTH: Optional attribute stated in pixels.
Determines horizontal space between the <FRAME>
contents and the frame’s borders.
 MARGINHEIGHT: Optional attribute stated in pixels.
Determines vertical space between the <FRAME>
contents and the frame’s borders.
 SCROLLING: Displays a scroll bar(s) in the frame.
Possible values are:
1. Yes – always display scroll bar(s).
2. No – never display scroll bar(s).
3. Auto – browser will decide based on frame contents.
By default: scrolling is auto.

52
 <FRAME>

 NORESIZE: Optional – prevents viewers from

resizing the frame. By default the user can
stretch or shrink the frame’s display by
selecting the frame’s border and moving it up,
down, left, or right.

53
 <NOFRAMES>
 <NOFRAMES>: Frame – capable browsers ignore all HTML
within this tag including the contents of the BODY element.
This element does not have any attributes.

<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
</HEAD>

54
 <NOFRAMES>
<FRAMESET COLS="23%,77%">
<FRAME SRC="" NAME="left_pane“>
<FRAME SRC="" NAME="right_pane">
<NOFRAMES>
<P> This is a Framed Page. Upgrade your browser
to support frames.</P>
</NOFRAMES></FRAMESET>

55
 Compound FRAMESET Divisions

 In this case a second FRAMESET element will be

inserted in the place of the FRAME element that
would describe the second row.
 The second FRAMESET element will divide the
remaining screen real estate into 2 columns.
 This nested FRAMESET will then be followed by 2
FRAME elements to describe each of the subsequent
frame divisions created.

56
 Compound FRAMESET Divisions

<html> <noframes>
<head>
<p>
<title> Compound Frames Page</title>
Default
</head>
message
<frameset rows=“120,*”>
<frame src=“banner_file.html” </p>
name”banner”> </noframes>
<frameset cols=“120,*”>
<frame src=“links_file.html”
</frameset>
name=“links”> </frameset>
<frame src=“content_file.html”
name=“content”> </head>

57
Compound FRAMESET Divisions
You may want to create a frames design with a
combination of rows and columns.

Banner File

Links
File Contents File

58
 Compound FRAMESET Divisions
Example
<HEAD>
<FRAMESET ROWS="25%,50%,25%”
<FRAME SRC="">
<FRAMESET COLS="25%,*">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
<FRAME SRC="">
</FRAMESET>
</HEAD>

59
Output

60
61
62
63
 Frame Formatting
• Example:

<frameset rows=“20%, *, 20%”>

<frame src=“header.html” noresize
scrolling=no>
<frame src=“body.html”>
<frame src=“navigationbar.html” noresize
scrolling=no>
</frameset>

64
65
66
 What do the following mean?

1) <FRAMESET COLS="2*, 3*, 5*">

2) <FRAMESET COLS="150, 20%, *, 3*">
So what are the space-allocation priorities?
Absolute pixel values are always assigned
space first, in order from left to right. These
are followed by percentage values of the total
space. Finally, proportional values are divided
based upon what space is left.

67
 Generic Frame Formula
• The <FRAME> tag has six associated attributes:
SRC, NAME, MARGINWIDTH, MARGINHEIGHT,
SCROLLING, and NORESIZE. Here's a complete
generic FRAME:
• <FRAME SRC="url" NAME="window_name"
SCROLLING=YES|NO|AUTO
MARGINWIDTH="value" MARGINHEIGHT="value"
NORESIZE>

68
 Targets
 When you use links for use in a frames environment you will
need to specify an additional attribute called TARGET.
 The TARGET attribute uses the NAME attribute of the FRAME
element.
 If we were to place a link in doc1.html that linked to doc3.html
and we wanted doc3.html to be displayed in the right
windowpane; the HTML code would appear in doc1.html as
follows:

<A HREF=“doc3.html”
TARGET=“right_pane”>Link to Document 3
</A>

69
 Special Targets
• There are 4 special target names that cannot be assigned by the
NAME attribute of the FRAME tag.
1. TARGET=“_top” : This loads the linked document into the full
browser window with the URL specified by the HREF attribute. All
frames disappear, leaving the new linked page to occupy the entire
window. The back is turned on.
2. TARGET=“_blank” : Opens an unnamed new browser window and
loads the document specified in the URL attribute into the new
window (and your old window stays open). The back is turned off.
Other windows remains on.

3. TARGET=“_self” : Loads the document in the same window where

the anchor was {Clicked}. This is the default setting for linking
elements.

4. TARGET=“_parent” : the _parent frame is a prior frameset that the

current frameset was “spawned” from. If there isn’t one it is the
browser window. The document is loaded into the area occupied by
the columns or rows frameset containing the frame that contains the
link. The back is turned on. All windows disappear.

70
 Targeting links to frames
The TARGET attribute allows you to specify the frame into which a page is to be
loaded into in a frames setting.

<A HREF=“chap1.html” TARGET=“_self”> [Chapter 1]</A>

<A HREF=“chap1.html” TARGET=“_parent”> [Chapter 2]</A>

Parent window
chap1.html Learning HTML
[Chapter 1][Chapter 2][Chapter 3]

chap2.html

71
 Targeting links to frames

The TARGET attribute allows you to specify the frame into which a page is to
be loaded into in a frames setting.

<A HREF=“chap1.html” TARGET=“bottom”> [Chapter 1]</A>

<A HREF=“chap2.html” TARGET=“bottom”> [Chapter 2]</A>
<A HREF=“chap3.html” TARGET=“bottom”> [Chapter 3]</A>

chap1.html Learning HTML

[Chapter 1][Chapter 2][Chapter 3]

chap2.html

chap3.html

72
 Inline frame(iframe)
● Content can also be mixed in another way and
placed with other graphics and text.
● Used with xhtml
<iframe src=”banner.html name=”mybanner”
width=”300” height=”200” align=”right”>
</iframe>
 Inline frame(iframe)
<iframe height="300px" width="100%"
src="demo_iframe.htm"
name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>

<p>When the target of a link matches the name of

an iframe, the link will open in the iframe.</p>