2 ways to insert table of information
on Web page:
– Text Table – contains only text, evenly spaced out
on the page in rows and columns
– Graphical Table – it appears as graphical element
on the Web page and allows you to include design
elements such as color, shading, and borders in a
Kinds of Fonts
a. Fixed-Width fonts – also known as
- font that allots the same amount of
space to each character and to the
empty spaces between characters.
b. Proportional fonts – fonts in which the
width of each character differs with
the character’s shape.
Defining Table Structure
• <TABLE> and </TABLE> tags – identify
the beginning and end of the table.
• <TR> and </TR> tags – identify the
beginning and end of each table row.
• <TD> and </TD> - identify the
beginning and end of each table cell.
• <TH> and </TH> - identify text that will
acts as table headers.
General syntax of Graphical
<TD> First Cell </TD>
<TD> Second Cell </TD>
<TD> Third Cell </TD>
<TD> Fourth Cell </TD>
First cell Second Cell
Third Cell Fourth Cell
Modifying the appearance of
• ALIGN - controls how the table is aligned on
the page Possible values are LEFT, RIGHT, and
• BORDER – specifies the thickness of the table
border in pixels
• BGCOLOR – set equal to the background
color to use in the cells of the table.
• WIDTH – sets the fixed width of the table.
Value of WIDTH can be any number and can
be pixels or a percentage.
• CELLSPACING – use to increase the size
of the border around individual table
• CELLPADDING – use to increase the gap
between the cell text and the surrounding cell
• HEIGHT – sets the fixed height of the table.
• VALIGN – use to control the vertical
placement of text within the table cell.
• COLS – sets the number of columns in a table.
• FRAME – controls which part of the table’s
outer border are rendered. FRAME can take
on the values: ABOVE, BELOW, BORDER, BOX,
• RULES – defines the type of inside table
border to show. Values for RULE can be
NONE, GROUPS, ROWS, COLS, or ALL.
<TABLE BORDER = 2 CELLPADDING = 4 FRAME = VOID
ALIGN = CENTER>
<PRE> tag – used to display
preformatted text which is text
formatted in ways that you want
retained in your web page.
– Spanning cell – is a cell that occupies
more that one row or column in a
<TD ROWSPAN = value COLSPAN =
value> Cell Text </TD>