1. Creating Table
Tutorial 4

2. 2 ways to insert table of information
on Web page:
• Using:
– 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
table.

3. Kinds of Fonts
a. Fixed-Width fonts – also known as
typewriter font.
- 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.

4. Defining Table Structure
with HTML
• <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.

5. General syntax of Graphical
table:
<TABLE>
<TR>
<TD> First Cell </TD>
<TD> Second Cell </TD>
</TR>
<TR>
<TD> Third Cell </TD>
<TD> Fourth Cell </TD>
</TR>
</TABLE>

6. First cell Second Cell
Third Cell Fourth Cell
Graphical representation

7. Creating Table Caption
• Syntax:
<CAPTION ALIGN = value>
Caption Text </CAPTION>

8. Modifying the appearance of
a table
• ALIGN - controls how the table is aligned on
the page Possible values are LEFT, RIGHT, and
CENTER.
• 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.

9. • CELLSPACING – use to increase the size
of the border around individual table
cell.
• CELLPADDING – use to increase the gap
between the cell text and the surrounding cell
border.
• 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.

10. • FRAME – controls which part of the table’s
outer border are rendered. FRAME can take
on the values: ABOVE, BELOW, BORDER, BOX,
HSIDES.
• RULES – defines the type of inside table
border to show. Values for RULE can be
NONE, GROUPS, ROWS, COLS, or ALL.
Example:
<TABLE BORDER = 2 CELLPADDING = 4 FRAME = VOID
ALIGN = CENTER>

11. <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
table.
Syntax:
<TD ROWSPAN = value COLSPAN =
value> Cell Text </TD>

12. Fin